fix: configure favicon metadata and improve bead visibility

Metadata fixes:
- Update icon path from /icon.svg to /icon to match route handler
- Ensure proper MIME type (image/svg+xml) is set in both metadata and response

Favicon visibility improvements:
- Increase AbacusReact scaleFactor from 1.0 to 1.8 for larger beads
- Add hideInactiveBeads prop to hide inactive beads
- Add hide-inactive-mode class to wrapper for CSS to take effect
- Adjust outer scale to 0.48 to fit larger abacus in 100x100 viewBox
- Reposition abacus with translate(28, -2) for proper centering

CSS cleanup:
- Strip !important declarations from generated SVG (production code policy)
- Apply same fix to OG image generator

User needs to restart dev server to clear in-memory cache.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/scripts/generateAbacusIcons.tsx

@@ -51,7 +51,10 @@ function generateFavicon(): string {
   )
 
   // Extract just the SVG content (without div wrapper)
-  const svgContent = extractSvgContent(abacusMarkup)
+  let svgContent = extractSvgContent(abacusMarkup)
+
+  // Remove !important from CSS (production code policy)
+  svgContent = svgContent.replace(/\s*!important/g, '')
 
   // Wrap in SVG with proper viewBox for favicon sizing
   // AbacusReact with 1 column + scaleFactor 1.0 = ~25×120px
@@ -116,7 +119,10 @@ function generateOGImage(): string {
   )
 
   // Extract just the SVG content (without div wrapper)
-  const svgContent = extractSvgContent(abacusMarkup)
+  let svgContent = extractSvgContent(abacusMarkup)
+
+  // Remove !important from CSS (production code policy)
+  svgContent = svgContent.replace(/\s*!important/g, '')
 
   return `<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
   <!-- Dark background like homepage -->

apps/web/scripts/generateDayIcon.tsx

@@ -33,10 +33,11 @@ const abacusMarkup = renderToStaticMarkup(
   <AbacusReact
     value={day}
     columns={2}
-    scaleFactor={1.0}
+    scaleFactor={1.8}
     animated={false}
     interactive={false}
     showNumbers={false}
+    hideInactiveBeads={true}
     customStyles={{
       columnPosts: {
         fill: '#1c1917',
@@ -64,17 +65,20 @@ const abacusMarkup = renderToStaticMarkup(
   />
 )
 
-const svgContent = extractSvgContent(abacusMarkup)
+let svgContent = extractSvgContent(abacusMarkup)
+
+// Remove !important from CSS (production code policy)
+svgContent = svgContent.replace(/\s*!important/g, '')
 
 // Wrap in SVG with proper viewBox for favicon sizing
-// AbacusReact with 2 columns + scaleFactor 1.0 = ~50×120px
-// Scale 0.7 = ~35×84px, centered in 100×100
+// AbacusReact with 2 columns + scaleFactor 1.8 = ~90×216px
+// Scale 0.48 = ~43×104px (slightly overflows height, but fine for icon)
 const svg = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <!-- Background circle with border for definition -->
   <circle cx="50" cy="50" r="48" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>
 
   <!-- Abacus showing day ${day.toString().padStart(2, '0')} (US Central Time) -->
-  <g transform="translate(33, 8) scale(0.7)">
+  <g class="hide-inactive-mode" transform="translate(28, -2) scale(0.48)">
     ${svgContent}
   </g>
 </svg>

apps/web/src/app/layout.tsx

@@ -52,7 +52,7 @@ export const metadata: Metadata = {
   icons: {
     icon: [
       { url: '/favicon.ico', sizes: 'any' },
-      { url: '/icon.svg', type: 'image/svg+xml' },
+      { url: '/icon', type: 'image/svg+xml' },
     ],
     apple: '/apple-touch-icon.png',
   },