The one asset every site needs and nobody agrees on
Search for favicon advice and you will find checklists demanding fourteen files, and single-line answers claiming one SVG is enough. Both were true at some point. The honest position in 2026 is that a small set of files covers essentially every browser and platform, and the rest is legacy weight. This guide sets out what each file is actually for, which sizes still matter, and why .ico — a format from Windows 3.0 — has not gone away.
What .ico is, and why it survives
ICO is a container, not a compression format. One .ico file holds several complete images at different pixel sizes, each stored as a bitmap or, since Windows Vista, as an embedded PNG. The consumer picks whichever size fits the space it is drawing into. That is the whole trick, and it is why a 16×16 tab icon and a 48×48 desktop shortcut can come from one file without either looking like a bad resample.
It survives for two unglamorous reasons. Browsers still request /favicon.ico from the site root when no icon is declared in the HTML, so the file gets fetched whether or not you provide one — and a missing one shows up as 404s in your logs. And Windows itself uses ICO for pinned sites and desktop shortcuts. Everything modern prefers PNG or SVG; ICO is the floor nobody has been able to remove.
The sizes that still do something
| Size | Where it is used | Still needed? |
|---|---|---|
| 16×16 | Browser tab, bookmark list, address bar | Yes — inside the .ico |
| 32×32 | Tab on a high-DPI screen, Windows taskbar | Yes — inside the .ico |
| 48×48 | Windows desktop shortcut, some Android surfaces | Useful — inside the .ico |
| 180×180 | iOS home screen (apple-touch-icon) | Yes — a separate PNG |
| 192×192 | Android home screen, PWA manifest | Yes — a separate PNG |
| 512×512 | PWA splash screen, app listings | Yes if you ship a manifest |
| Any size, SVG | Modern browsers, scales perfectly, dark-mode aware | Recommended as the primary icon |
| 64, 96, 128, 256 as separate files | Historic advice | No — the .ico and the SVG cover these |
A practical set
Four files handle everything that matters, and you can build all of them from a single source image:
favicon.icoat the site root, containing 16, 32 and 48 pixel versions. Make it with JPG / PNG to ICO.icon.svgfor browsers that support it, which is all current ones. Sharp at every size and a single small file.apple-touch-icon.pngat 180×180, with no transparency — iOS composites transparent pixels onto black.icon-192.pngandicon-512.pngreferenced from the web app manifest, if the site is installable.
If you have an SVG logo, SVG to PNG renders it at each exact pixel size, which is much better than resizing a PNG down — the vector is re-rasterised at the target resolution rather than interpolated. Going the other way, ICO to PNG extracts the images from an existing favicon when you have lost the original artwork.
Designing for 16 pixels
A 16×16 icon is 256 pixels in total. Most favicons fail because they are a logo shrunk until it is unreadable rather than a mark designed for the size. What works:
- One shape or one letter. Two elements at 16 pixels merge into a smudge.
- High contrast against both light and dark tab bars. A dark logo on a transparent background disappears in dark mode. Give it a solid coloured backing, or supply a dark-mode variant in the SVG with a media query.
- No thin strokes and no gradients. A one-pixel line either vanishes or turns grey through anti-aliasing.
- No text beyond a single character. Words are never legible at this size.
- Check it at actual size. Zoomed-in previews flatter an icon badly. Open the real tab.
Why the browser is showing the old one
Favicons are cached unusually aggressively, in a store separate from the normal page cache, so a hard refresh often changes nothing. Things that do work: load the icon URL directly in a tab and refresh it there, add a query string to the link tag when you change the artwork, or test in a private window. If the icon is right in a private window and wrong in the normal one, it is caching and not your markup.
One more source of confusion: search engines and link-preview services fetch icons on their own schedule. A correct favicon can take days to appear in Google's results, and that delay is not something you can fix from the site.