Most favicon guides published before 2024 tell you to ship 14 different files. In 2026, you can cover 99% of real-world traffic with five. The list got shorter because Apple finally standardized apple-touch-icon, modern browsers consume SVG natively, and Windows tile icons quietly stopped mattering when nobody pinned sites to their Start menu anymore.
This is the practical reference: every dimension that real devices actually fetch in 2026, what to drop, and the exact <link> tags and manifest.json entries that wire it all together.
If you only ship five files, ship these:
| File | Size | Format | What it covers |
|---|---|---|---|
favicon.ico | 16 + 32 + 48 (multi-size) | ICO | Legacy IE, Edge tab, address bar fallback |
favicon.svg | any (vector) | SVG | Chrome, Firefox, Safari, Edge — sharpest at every zoom |
apple-touch-icon.png | 180×180 | PNG | iOS home screen, iPadOS, Safari pinned tab |
icon-192.png | 192×192 | PNG | Android home screen, PWA install |
icon-512.png | 512×512 | PNG | Android splash, PWA store, social cards fallback |
That's it. Five files. The PNG-at-every-size shotgun approach from 2018 was solving for browser bugs that no longer exist.
The original favicon size, still the one users see most often. At 16 pixels you have roughly 200 pixels of canvas to work with, so anything thinner than a 2px stroke will dissolve into anti-aliasing mush. Test your design at this size first; if it doesn't read at 16×16, simplify until it does.
What Retina, 4K, and modern Windows displays actually render in the tab. Always ship this one. If you ship only a 16×16, your favicon looks blurry on every laptop sold after 2019.
Used by Windows when you save a site to the desktop or pin it to taskbar. Bundle it inside the same multi-size favicon.ico and you're done — no separate file needed.
The single iOS size that matters in 2026. Apple deprecated the older 57/72/76/120/152 sizes in iOS 16; they all fall back to a downscaled 180. iOS will round the corners and add gloss for you, so ship a flat square with no pre-rounded corners and no padding. Use a solid background color (not transparency) — iOS shows transparent areas as black on the home screen.
Android Chrome and every PWA installer expects exactly these two sizes in manifest.json. The 192 is used for home-screen and notifications; the 512 is used for splash screens and the install prompt artwork. Ship both with the "purpose": "any maskable" property so Android can crop into the new circle/squircle/teardrop shapes without slicing off your logo.
The following sizes were standard advice five years ago and are almost certainly dead weight today:
color attribute — Safari 16+ uses your regular SVG favicon and respects the document's color scheme.If your generator from 2019 dumped 17 files into your /public folder, you can safely delete two-thirds of them and your traffic won't notice.
Drop this in <head> and you're done:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">And the matching manifest.json:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
],
"theme_color": "#0a0a0f",
"background_color": "#0a0a0f",
"display": "standalone"
}The sizes="any" attribute on the ICO link is the trick that tells modern browsers to prefer the SVG when available, but fall back to ICO without ever requesting the wrong size.
Browsers respect prefers-color-scheme inside SVG favicons. If your favicon has solid black or solid white elements that disappear against a dark or light tab background, embed a media query directly in the SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..."/>
</svg>Chrome 121+, Firefox 122+, and Safari 17+ all honor this. Edge follows Chromium. This replaces the old workaround of swapping favicons with JavaScript on a media-query change — you no longer need it.
purpose: "any maskable". Without it, Android crops into your icon's edges, often slicing off the logo.Type any letter, drop in an emoji, or upload a logo. Our free generator outputs the exact 5-file set described above (ICO with all three sizes bundled, SVG, apple-touch-icon, and the 192/512 PNG pair) plus a ready-to-paste manifest.json. No signup, no watermark, runs entirely in your browser.
If any of those five steps shows a blurry, cropped, or invisible icon, fix the corresponding file before launch. After that, you're set for at least the next major browser cycle.
<link> reference — the latest rel="icon" behavior across browsers.Ship a favicon you're proud of, then forget about it for three years. The standards have stabilized — what you build today should render correctly until at least 2029.