Favicon advice ages badly. One guide tells you a single favicon.ico is enough; the next hands you a folder of thirty files including sizes for a Microsoft tile nobody has seen since 2018. Both were right once. What is worth knowing is which files something still asks for, and what happens when each one is missing.
Two Ways a Browser Finds Your Icon
The first is the link element. HTML defines rel="icon" as an external resource link, and a page may carry as many as it likes, each with its own sizes and type. The browser reads them all, then picks one, preferring a type it supports and a sizes value close to what it is about to draw.
The second is the fallback, and it is not in any specification. If a document declares no icon at all, browsers request /favicon.ico from the site root, a convention Internet Explorer 5 introduced in 1999 and everything since has kept. It is a plain GET for a fixed path, made without asking the page.
That fallback is why a .ico still earns its place even though no modern browser will choose it when a PNG link is present. It covers everything that never parsed your head: feed readers, chat apps generating a link preview, crawlers, and any page on your site that shipped without the snippet.
What Each File Is Actually For
Six files cover every consumer that still exists. Anything beyond this list is for a platform that has been retired.
| File | Size | Who asks for it | Missing it means |
|---|---|---|---|
| favicon.ico | 16, 32, 48 in one file | Anything requesting the root path by name | A 404 in your logs and a blank icon in feed readers |
| favicon-32x32.png | 32 × 32 | Tabs on high-density screens, bookmark bar | The browser upscales the 16, and it shows |
| favicon-16x16.png | 16 × 16 | Tabs at ordinary density | The browser downscales a larger file, usually badly |
| apple-touch-icon.png | 180 × 180 | iOS home screen bookmarks | iOS screenshots your page and uses that |
| android-chrome-192x192.png | 192 × 192 | Android home screen, via the manifest | Chrome picks whatever it can find |
| android-chrome-512x512.png | 512 × 512 | Android splash screen, install prompts | No splash icon, and no install prompt in Chrome |
ICO Is a Container, Not an Image Format
This is the part most people never learn, and it explains why renaming a PNG to favicon.ico is not the same thing.
An ICO file starts with a six-byte directory header, followed by a sixteen-byte entry per image: width, height, colour depth, byte length and the offset where that image begins. After the directory come the images themselves, each one complete and independent. One file, several pictures.
So a browser asking for a 16-pixel icon reads the directory, finds the 16-pixel entry, and decodes only that. Windows asking for a 48-pixel shortcut icon takes the 48. Nothing is resampled, which is the entire advantage over shipping a single bitmap and hoping.
The images inside are traditionally 32-bit BMP: raw BGRA rows stored bottom to top, followed by a one-bit transparency mask. Since Windows Vista an entry may hold a PNG instead, which is smaller. Both are legal, and a generator choosing BMP is choosing compatibility with the older software that is the only reason the file exists at all.
The sizes="any" trick, and why it exists
Chrome used to prefer a 32-pixel PNG over an SVG favicon, because a concrete size looked like a better match than none. Declaring the ICO as <link rel="icon" href="/favicon.ico" sizes="any"> was the fix that circulated in 2021, and it works by telling the browser the ICO covers every size, which pushes the choice on to the SVG line below it. It has been in the standard snippet ever since.
Generate the whole set from one logo
A real multi-size .ico, the PNG links, Apple and Android icons, a manifest, and the head snippet — previewed at 16 pixels before you download.
The Five Ways This Goes Wrong
None of these is a rendering bug. They are all consequences of how the files are consumed, and every one of them is avoidable.
The icon is illegible at 16 pixels
256 pixels of canvas holds one shape, not a logo. Thin strokes vanish, gradients flatten to a single grey, and a wordmark becomes a smear. Crop to the strongest element — one letter, one symbol — and check it at actual size rather than at the size you are designing it.
The iOS icon has a black background
iOS composites a home-screen icon onto black, not onto your page. A transparent apple-touch-icon.png therefore arrives as artwork floating on a black tile. Give that one file a solid background even when the rest stay transparent.
The old icon will not go away
Favicons are cached far more aggressively than page assets, and a hard reload often does not touch them. Open the file's own URL and reload that, or version the link as /favicon.ico?v=2. Search results are slower still, since the crawler refreshes on its own schedule.
The paths are wrong
The leading slash in the snippet means the site root. If your site lives in a subfolder, or your framework serves static files from a prefixed path, every link resolves somewhere empty. The manifest has the same problem twice over, since the icon paths inside it are resolved against the manifest's own URL.
The manifest is missing
Without one, Chrome on Android has no name, no theme colour and no icon set to install with, so it improvises from the page title and whatever icon it can find. It is also the reason an install prompt never appears: no manifest with a 512-pixel icon, no prompt.
Designing for a 16-Pixel Square
A favicon is the smallest thing a designer is ever asked to make, and the constraint is unusually hard: at 16 pixels a one-pixel stroke is six percent of the width, and anti-aliasing spreads it across two rows of grey.
What survives is contrast and silhouette. A filled shape reads; an outlined one closes up. Two colours read; a gradient becomes one flat tone. A single glyph reads at any size, which is why so many well-known sites use one letter rather than their full mark.
What does not survive is anything you would have to look twice at on paper. If the shape is not identifiable in a squint test at thumbnail size, it will not be identifiable in a tab, and the tab is where almost everyone will see it — usually crowded between fifteen others, at a glance, as the only thing distinguishing your page from the rest.
The second consideration is the background behind it. Tab strips are light in one theme and near-black in the other, and a dark mark on transparency disappears in dark mode as surely as a white one disappears in light. Either give the icon its own background, or use a mark with enough mid-tone contrast to hold up on both.
The Manifest Is a Separate Job
site.webmanifest is a small JSON file defined by the W3C Web Application Manifest specification, and it answers a different question from the favicon links: not "what icon goes in the tab" but "what does this site look like when it is installed".
Four fields do most of the work. icons lists the images with their sizes and types, and this is where the 192 and 512 pixel files are declared — 512 in particular, since Chrome requires an icon of at least that size before it will offer to install a site at all. name and short_name are the full title and the truncated label printed under the icon on a home screen, where anything past roughly twelve characters is cut. theme_color tints the status bar and the task switcher. display: "standalone" is what removes the browser frame.
The file is inert until you point at it with <link rel="manifest" href="/site.webmanifest">, and its icon paths resolve relative to the manifest rather than to the page, which is the detail that breaks it when the file is moved.
The Head Snippet, Line by Line
Order matters: a browser reads every line and picks one, so the vector goes above the rasters.
| Line | What it does |
|---|---|
| rel="icon" href="/favicon.ico" sizes="any" | Declares the legacy file without letting it outrank the SVG |
| rel="icon" href="/favicon.svg" type="image/svg+xml" | Chosen by Chrome, Firefox and Edge; ignored by Safari |
| rel="icon" sizes="32x32" href="/favicon-32x32.png" | The raster fallback at bookmark and retina-tab size |
| rel="icon" sizes="16x16" href="/favicon-16x16.png" | The raster fallback at ordinary tab size |
| rel="apple-touch-icon" href="/apple-touch-icon.png" | The only line iOS reads for a home-screen bookmark |
| rel="manifest" href="/site.webmanifest" | Everything Android needs to install the site |
What You Can Safely Leave Out
Older generators still emit files for platforms that no longer read them, and each one is a request that can 404.
browserconfig.xml and the msapplication-* meta tags configured Windows 8 and 10 Start menu tiles. Live tiles were removed in Windows 11, and the tags are dead weight.
The long ladder of apple-touch-icon sizes — 57, 60, 72, 76, 114, 120, 144, 152 — dates from when iOS did not scale the icon itself. It does now, from the 180-pixel version, so one file covers every device.
apple-touch-icon-precomposed told iOS 6 and earlier not to add its own gloss. The gloss went away in iOS 7.
And mask-icon, the monochrome Safari pinned-tab SVG, was deprecated in Safari 12. It is harmless but no longer used.
Frequently Asked Questions
Related Tools
Keep Reading
Why the Same SVG Exports at Three Different Sizes
width and height are optional, and an icon set ships neither. What a rasterizer falls back to, and why a file with no viewBox cannot be scaled at all.
Why Resized Images Come Out Noisy, and the Fix Nobody Applies
Bilinear sampling reads four pixels no matter how far you shrink, so a 20:1 reduction ignores 396 of every 400. Halving in steps reads all of them.
Rounded Image Corners: When to Use CSS and When to Bake Them In
border-radius is ignored by Outlook and dropped by most PDF exporters. Where a permanent round is the only option, and why the file must be PNG.
What the JPEG Quality Slider Is Really Doing to Your Photo
Quality 80 scales the quantization tables to 40 percent, it does not keep 80 percent of the picture. Where the setting stops being free, and why PNG has no dial.