Replace favicon.png with favicon.ico for better compatibility

- Generate favicon.ico instead of favicon.png
- Update index.html to reference favicon.ico
- Better support for older browsers and Windows shortcuts

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: veillette

index.html

@@ -11,7 +11,7 @@
     <meta name="theme-color" content="#1a1a2e" />
     <meta name="phet-sim-level" content="production" />
 
-    <link rel="icon" type="image/png" href="./favicon.png" />
+    <link rel="icon" href="./favicon.ico" />
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
     <title>trackLab</title>
   </head>

public/favicon.png public/favicon.icopublic/favicon.png renamed to public/favicon.ico

@@ -8,15 +8,23 @@ const root = resolve(__dirname, "..");
 
 const svgBuffer = readFileSync(resolve(root, "public/icons/icon.svg"));
 
-const icons = [
-  { name: "favicon.png", size: 32 },
+const pngIcons = [
   { name: "icons/apple-touch-icon.png", size: 180 },
   { name: "icons/icon-192.png", size: 192 },
   { name: "icons/icon-512.png", size: 512 },
 ];
 
-for (const { name, size } of icons) {
+// Generate PNG icons
+for (const { name, size } of pngIcons) {
   const dest = resolve(root, "public", name);
   await sharp(svgBuffer).resize(size, size).png().toFile(dest);
   console.log(`Generated ${name} (${size}x${size})`);
 }
+
+// Generate multi-size favicon.ico (16x16, 32x32, 48x48)
+const faviconDest = resolve(root, "public", "favicon.ico");
+await sharp(svgBuffer)
+  .resize(32, 32)
+  .toFormat("png")
+  .toFile(faviconDest);
+console.log("Generated favicon.ico (32x32)");