sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add favicon and manifest file for improved website branding

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 22:10:06 +00:00
parent 5306fde0be
commit 5f632f57fd
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

@ -31,6 +31,11 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#3b82f6" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/api/favicon" />
<link rel="apple-touch-icon" href="/api/favicon?size=180" />
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<div id="root"></div>

23
client/public/manifest.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "go4.video - Professional Video Streaming Platform",
"short_name": "go4.video",
"description": "Professional video streaming platform featuring Geschichte des Liedes, FOLX STADL, and premium content",
"theme_color": "#6366f1",
"background_color": "#2D1B69",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "/api/favicon?size=192",
"sizes": "192x192",
"type": "image/svg+xml",
"purpose": "any maskable"
},
{
"src": "/api/favicon?size=512",
"sizes": "512x512",
"type": "image/svg+xml",
"purpose": "any maskable"
}
]
}

33
server/routes.ts
View File

@ -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;
}