Modern favicon setup: one SVG that scales, an ICO fallback for old browsers, and an apple-touch-icon for iOS home screens. Skip the 12-file <link> dump from favicon generators of yore.
HTML
<!-- Modern, minimal set — covers ~98% of browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/site.webmanifest">
<!-- ICO is still good for very old browsers + Windows shortcuts -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- For PWAs / installable web apps: site.webmanifest -->
<!--
{
"name": "Example",
"short_name": "Example",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0a0a0a",
"background_color": "#0a0a0a",
"display": "standalone",
"start_url": "/"
}
-->Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.