Add favicon and manifest file for improved website branding

Implement an API endpoint for dynamic favicon generation using SVG and add a manifest.json file for progressive web app capabilities.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8

server/routes.ts

@@ -689,6 +689,39 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Favicon generation endpoint
+  app.get('/api/favicon', (req, res) => {
+    try {
+      const size = req.query.size ? parseInt(req.query.size as string) : 32;
+      const padding = Math.max(2, size * 0.1);
+      const logoSize = size - (padding * 2);
+      const cornerRadius = Math.max(2, size * 0.15);
+      
+      // Generate SVG favicon with just the logo
+      const svg = `<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+          </linearGradient>
+        </defs>
+        
+        <!-- Logo background -->
+        <rect x="${padding}" y="${padding}" width="${logoSize}" height="${logoSize}" rx="${cornerRadius}" fill="url(#logoGradient)"/>
+        
+        <!-- Play triangle -->
+        <polygon points="${padding + logoSize * 0.35},${padding + logoSize * 0.25} ${padding + logoSize * 0.35},${padding + logoSize * 0.75} ${padding + logoSize * 0.65},${padding + logoSize * 0.5}" fill="white"/>
+      </svg>`;
+
+      res.setHeader('Content-Type', 'image/svg+xml');
+      res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
+      res.send(svg);
+    } catch (error) {
+      console.error('Error generating favicon:', error);
+      res.status(500).send('Error generating favicon');
+    }
+  });
+
   const httpServer = createServer(app);
   return httpServer;
 }