feat: generate favicon.ico from logo using png-to-ico

- Add png-to-ico dependency for ICO generation
- Update generate-icons.ts to create favicon.ico with 16/32/48px sizes
- Update index.html to use /favicon.ico
- Add favicon.ico to .gitignore (generated file)

Author: ibetitsmike

.gitignore

@@ -6,6 +6,7 @@
 public/fonts/
 # Generated icons (from scripts/generate-icons.ts)
 public/icon-*.png
+public/favicon.ico
 
 # OSX
 .DS_Store

bun.lock

@@ -107,6 +107,7 @@
         "mermaid": "^11.12.0",
         "nodemon": "^3.1.10",
         "playwright": "^1.56.0",
+        "png-to-ico": "^3.0.1",
         "postcss": "^8.5.6",
         "posthog-js": "^1.276.0",
         "prettier": "^3.6.2",
@@ -2761,6 +2762,10 @@
 
     "plist": ["plist@3.1.0", "", { "dependencies": { "@xmldom/xmldom": "^0.8.8", "base64-js": "^1.5.1", "xmlbuilder": "^15.1.1" } }, "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ=="],
 
+    "png-to-ico": ["png-to-ico@3.0.1", "", { "dependencies": { "@types/node": "^22.10.3", "minimist": "^1.2.8", "pngjs": "^7.0.0" }, "bin": { "png-to-ico": "bin/cli.js" } }, "sha512-S8BOAoaGd9gT5uaemQ62arIY3Jzco7Uc7LwUTqRyqJDTsKqOAiyfyN4dSdT0D+Zf8XvgztgpRbM5wnQd7EgYwg=="],
+
+    "pngjs": ["pngjs@7.0.0", "", {}, "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="],
+
     "points-on-curve": ["points-on-curve@0.2.0", "", {}, "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="],
 
     "points-on-path": ["points-on-path@0.2.1", "", { "dependencies": { "path-data-parser": "0.1.0", "points-on-curve": "0.2.0" } }, "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g=="],

index.html

@@ -9,7 +9,7 @@
     <meta name="description" content="Parallel agentic development with Electron + React" />
     <meta name="theme-color" content="#1e1e1e" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" type="image/png" href="/icon-192.png" />
+    <link rel="icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" href="/icon-192.png" />
     <title>mux - coder multiplexer</title>
     <style>

package.json

@@ -148,6 +148,7 @@
     "mermaid": "^11.12.0",
     "nodemon": "^3.1.10",
     "playwright": "^1.56.0",
+    "png-to-ico": "^3.0.1",
     "postcss": "^8.5.6",
     "posthog-js": "^1.276.0",
     "prettier": "^3.6.2",

scripts/generate-icons.ts

@@ -1,11 +1,13 @@
 #!/usr/bin/env bun
-import { mkdir, rm } from "node:fs/promises";
+import { mkdir, rm, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import pngToIco from "png-to-ico";
 import sharp from "sharp";
 
 const SIZES = [16, 32, 64, 128, 256, 512];
 const PWA_SIZES = [192, 512];
+const FAVICON_SIZES = [16, 32, 48];
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -16,6 +18,7 @@ const PUBLIC_DIR = path.join(ROOT, "public");
 const ICONSET_DIR = path.join(BUILD_DIR, "icon.iconset");
 const PNG_OUTPUT = path.join(BUILD_DIR, "icon.png");
 const ICNS_OUTPUT = path.join(BUILD_DIR, "icon.icns");
+const FAVICON_OUTPUT = path.join(PUBLIC_DIR, "favicon.ico");
 
 const args = new Set(process.argv.slice(2));
 if (args.size === 0) {
@@ -38,6 +41,17 @@ async function generatePwaIcons() {
   await Promise.all(tasks);
 }
 
+async function generateFavicon() {
+  // Generate PNGs at multiple sizes for the ICO
+  const pngBuffers = await Promise.all(
+    FAVICON_SIZES.map((size) =>
+      sharp(SOURCE).resize(size, size, { fit: "cover" }).png().toBuffer()
+    )
+  );
+  const icoBuffer = await pngToIco(pngBuffers);
+  await writeFile(FAVICON_OUTPUT, icoBuffer);
+}
+
 async function generateIconsetPngs() {
   await mkdir(ICONSET_DIR, { recursive: true });
 
@@ -91,6 +105,7 @@ await mkdir(BUILD_DIR, { recursive: true });
 if (needsPng) {
   await generateIconPng();
   await generatePwaIcons();
+  await generateFavicon();
 }
 
 if (needsIcns) {