Favicon sizes every site needs in 2026 (and the ones you can skip)

Six files cover every mainstream surface: favicon.ico with 16, 32 and 48 px images inside it; an SVG favicon; apple-touch-icon.png at 180×180; icon-192.png and icon-512.png for the web app manifest; and a maskable variant at 512 px, with 192 as well if you want to be thorough. A seventh file, mstile-150.png, is only worth adding if pinned tiles in Windows matter to you.

Each one has a different consumer. The ICO answers the bare /favicon.ico request browsers make when there is no markup at all. The SVG is what modern desktop browsers prefer, because it stays sharp at any zoom level and often weighs less than a 32 px PNG. The Apple file is what iOS copies to the home screen. The manifest pair is what an installed web app uses for its launcher entry, its splash screen and its task-switcher card.

Everything else on the classic checklist — the 57, 60, 72, 76, 114, 120, 144 and 152 px Apple sizes, the android-chrome-* zoo, browserconfig.xml — targets systems that have been out of support for years. Generating them costs you nothing but noise in the repository and a longer HTML head that nobody reads.

Browsers still request /favicon.ico from the site root when a page provides no icon markup: an error page served by your proxy, a directory listing, a raw JSON response opened in a tab. That single automatic request is the whole argument for keeping the file, and for keeping it at the root rather than tucked into an assets folder.

ICO is a container, not an image format. A six-byte header records how many images are inside; a sixteen-byte directory entry for each one records its width, height, colour depth, byte length and offset; then the payloads follow. Since Windows Vista those payloads may be PNG streams, which is how three sizes with a full alpha channel fit into a few kilobytes. IconBatcher writes exactly that structure — three PNGs and the directory that points at them.

What you cannot do is rename icon.png to favicon.ico. Some browsers sniff the content and forgive you; Windows Explorer, several feed readers and older Edge builds do not, and you end up with a blank square in exactly the places you are least likely to check.

A link tag with rel=icon, type=image/svg+xml and an .svg href is read by Chrome, Edge, Firefox and Opera. Safari does not use it for tab icons and falls back to your ICO or PNG declarations, which is one more reason to ship both. A vector favicon is resolution independent: the same file is crisp on a 4K monitor, in a zoomed tab strip and in a bookmark manager.

Because it is a real SVG, it can carry a media query. A style block with prefers-color-scheme: dark lets the same file draw a light mark on dark browser chrome and a dark mark on light chrome — something no PNG can do. Keep it to fills and simple shapes: scripts do not run and external references are not fetched when an SVG is used as an icon.

Keep the artwork simple for a second reason. A favicon is rendered at sixteen CSS pixels most of the time, and a vector with fifty nodes and half-pixel hairlines turns to mush just as reliably as a badly scaled PNG. If your logo has a wordmark, drop the words and keep the symbol.

Since iOS 8 a single apple-touch-icon.png at 180×180 is enough — iOS scales it down for smaller devices. The old per-device names, apple-touch-icon-114x114-precomposed.png and its relatives, are dead weight that only makes the head longer.

Two rules matter. Do not round the corners yourself: iOS applies its own squircle mask, and rounding twice reads as a mistake. Do not use transparency: iOS composites transparent pixels onto black, so a mark drawn for a white page arrives as a mark on a black tile. Both rules are why a generator should render this file square and opaque even when the rest of the pack is transparent.

The same file is used when someone adds the page to the home screen and when an installed web app appears in the iOS app switcher. One file, two jobs, no variants — which makes it the easiest item on the list to get right.

The web app manifest carries its own icons array. Two entries with purpose any — 192 and 512 px — are the baseline: 192 for the launcher, 512 for splash screens and high-density devices. Add at least one maskable entry so Android launchers can crop to their own shape without slicing through your logo.

The Windows tile is the last piece of genuinely legacy markup that still does something: two meta tags, msapplication-TileColor and msapplication-TileImage, pointing at a 150×150 PNG. browserconfig.xml is no longer needed. If nobody pins your site in Windows, skip the tile entirely and save yourself a file.

One thing the manifest cannot do is replace the ICO. It is only fetched on pages that link to it, and only by browsers that implement installation; a tab icon has to work before any of that happens.

Declare the ICO and PNG first and the SVG last. When several declarations are equally suitable, browsers tend to take the last one they parsed, so the vector wins where it is supported and the raster covers everything else. Use the sizes attribute honestly: it is a hint the browser matches against, not a resize instruction.

Then there is caching. Favicons are cached far more aggressively than page assets, sometimes for weeks, and a hard reload does not reliably clear them. If you change an icon, change its filename too, or add a query string to the href. Otherwise a good share of your returning visitors keep seeing the old mark long after the deploy.

Finally, keep the set in sync. The most common favicon bug is not a missing size — it is a 2019 ICO sitting next to a 2026 SVG because somebody regenerated half the pack by hand. Rendering everything from one source in one pass removes that class of problem completely.