Generate dynamic favicon ico file

README.md

@@ -191,7 +191,6 @@ Static files served directly to the browser are within the `public` directory at
 ```md
 
 public/
-├── favicon.ico
 ├── scripts/
 │   └── vendor/
 │       ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)

src/pages/favicon.ico.ts

@@ -0,0 +1,28 @@
+import type { APIRoute } from "astro";
+import sharp from "sharp";
+import ico from "sharp-ico";
+import path from "node:path";
+
+const faviconSrc = path.resolve("src/images/icon.png");
+
+export const GET: APIRoute = async () => {
+
+  // Resize the image to multiple sizes
+  const sizes = [16, 32, 48, 64, 128, 256];
+
+  const buffers = await Promise.all(
+    sizes.map(async (size) => {
+      return await sharp(faviconSrc)
+        .resize(size)
+        .toFormat("png")
+        .toBuffer();
+    })
+  );
+
+  // Convert the image to an ICO file
+  const icoBuffer = ico.encode(buffers);
+
+  return new Response(icoBuffer, {
+    headers: { "Content-Type": "image/x-icon" },
+  });
+};