fix: use company logo for favicon

public/site.webmanifest

@@ -8,6 +8,6 @@
   "theme_color": "#ff7d41",
   "lang": "zh-CN",
   "icons": [
-    { "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" }
+    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
   ]
 }

src/layouts/Base.astro

@@ -77,8 +77,7 @@ const allLd = [organizationLd, websiteLd, webpageLd, ...pageLd.filter((item) =>
     <meta name="description" content={description} />
     <meta name="robots" content={noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"} />
     <link rel="canonical" href={canonical} />
-    <link rel="icon" href="/favicon.ico" sizes="32x32" />
-    <link rel="icon" href={logo.src} type="image/svg+xml" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="alternate" hreflang="zh-CN" href={canonical} />
     <link rel="alternate" hreflang="x-default" href={canonical} />

src/pages/favicon.ico.ts

-import type { APIRoute } from "astro";
-
-function makeFavicon(): Uint8Array {
-  const size = 32;
-  const pixelBytes = size * size * 4;
-  const maskBytes = size * 4;
-  const imageBytes = 40 + pixelBytes + maskBytes;
-  const bytes = new Uint8Array(22 + imageBytes);
-  const view = new DataView(bytes.buffer);
-  view.setUint16(2, 1, true); // ICO type
-  view.setUint16(4, 1, true); // image count
-  bytes[6] = size;
-  bytes[7] = size;
-  view.setUint16(10, 1, true);
-  view.setUint16(12, 32, true);
-  view.setUint32(14, imageBytes, true);
-  view.setUint32(18, 22, true);
-  view.setUint32(22, 40, true); // BITMAPINFOHEADER
-  view.setInt32(26, size, true);
-  view.setInt32(30, size * 2, true); // XOR + AND mask heights
-  view.setUint16(34, 1, true);
-  view.setUint16(36, 32, true);
-  view.setUint32(42, pixelBytes, true);
-
-  const pixelOffset = 62;
-  for (let y = 0; y < size; y++) {
-    for (let x = 0; x < size; x++) {
-      const offset = pixelOffset + ((size - 1 - y) * size + x) * 4;
-      const roundedCorner = (x < 3 || x > 28) && (y < 3 || y > 28);
-      const jMark = (x >= 18 && x <= 22 && y >= 7 && y <= 22) ||
-        (x >= 10 && x <= 22 && y >= 7 && y <= 11) ||
-        (x >= 9 && x <= 18 && y >= 20 && y <= 24);
-      bytes[offset] = jMark ? 255 : 0;
-      bytes[offset + 1] = jMark ? 255 : 183;
-      bytes[offset + 2] = jMark ? 255 : 0;
-      bytes[offset + 3] = roundedCorner ? 0 : 255;
-    }
-  }
-  return bytes;
-}
-
-const favicon = makeFavicon();
-
-export const prerender = true;
-export const GET: APIRoute = () => new Response(favicon.buffer as ArrayBuffer, {
-  headers: {
-    "Content-Type": "image/x-icon",
-    "Cache-Control": "public, max-age=31536000, immutable",
-  },
-});