Generate a simple letter favicon SVG plus HTML head tags and web manifest. For PNG sizes, convert the SVG using a tool like ImageMagick or realfavicongenerator.net.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="12" fill="#2563eb" />
<text x="32" y="44" text-anchor="middle" font-family="system-ui, sans-serif" font-size="40" font-weight="700" fill="#ffffff">A</text>
</svg><link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#2563eb" />{
"name": "App Name",
"short_name": "App",
"icons": [
{
"src": "/favicon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#2563eb",
"background_color": "#2563eb",
"display": "standalone"
}