fix: add dedicated square favicon for HQ Command Center

Programmatic icon.tsx using Next.js convention — generates a 32×32 PNG with dark bg + cyan "F" glyph. Replaces the inherited 16:9 fallback that appeared stretched in browser tabs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-06 17:30:32 -05:00
parent c3d196df03
commit 6b9a94490b
1 changed files with 59 additions and 0 deletions
@@ -0,0 +1,59 @@
 // src/app/hq-command/icon.tsx
 // ─────────────────────────────────────────────────────────────────────────────
 // Programmatic favicon for the HQ Command Center.
 // Uses Next.js App Router icon convention — generates a square PNG on demand,
 // so no external image file is needed and it never looks stretched.
 //
 // Design: dark rounded square with a cyan "F" glyph, matching the command
 // center's dark-mode aesthetic (#050505 bg + #00F0FF accent).
 // ─────────────────────────────────────────────────────────────────────────────
 import { ImageResponse } from "next/og";
 export const size = { width: 32, height: 32 };
 export const contentType = "image/png";
 export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#0A0A0F",
          borderRadius: "6px",
        }}
      >
        {/* Subtle accent ring */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "28px",
            height: "28px",
            borderRadius: "5px",
            border: "1.5px solid rgba(0, 240, 255, 0.3)",
            background: "linear-gradient(135deg, #0A0A1A 0%, #0D1117 100%)",
          }}
        >
          <span
            style={{
              color: "#00F0FF",
              fontSize: "18px",
              fontWeight: 900,
              fontFamily: "Inter, system-ui, -apple-system, sans-serif",
              lineHeight: 1,
              marginTop: "-1px",
            }}
          >
            F
          </span>
        </div>
      </div>
    ),
    { ...size },
  );
 }