Favicon sizes and best practices: the complete 2026 checklist

The 16×16 icon in a browser tab is asked to do a surprising amount of work — tabs, bookmarks, home screens, search results, dark mode. This checklist covers which sizes and formats you actually need now, how to design artwork that survives being tiny, and the markup that ties it together.

Favicons suffer from a decade of accumulated advice. Pages still ship a dozen PNG sizes "just in case", most of which no browser has requested in years, while missing the two files that matter most today: an SVG icon and an Apple touch icon. The modern set is smaller than the folklore suggests — but the design problem is as real as ever, because your brand mark must stay recognisable at sixteen pixels, roughly the size of a fingernail clipping.

Below is the current, evidence-based set, then the design rules that separate icons that read at tab size from those that dissolve into mush.

The sizes that actually get requested

Notice what is absent: the constellation of 57, 72, 114 and 144-pixel Apple sizes from the early iPhone era. Current iOS scales the 180×180 icon down for every device. Generating a couple of legacy sizes costs nothing, but they should be the last thing you check, not the first.

Markup that connects it all

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Order and honesty matter. Browsers that understand SVG take the SVG; others take the ICO. The web app manifest is where the 192 and 512 icons live, along with your app name and theme colour. Keep theme-color in step with your design as well — it colours the browser chrome on mobile and is part of how the site presents itself, favicon included.

Designing artwork that survives 16 pixels

At 16×16 you have 256 pixels to express a brand, and the physics are unforgiving: a one-pixel line is 6% of the icon's width, anti-aliasing blurs colour boundaries into the background, and any detail finer than about 3 pixels becomes texture rather than shape. The icons that work are ruthlessly simple — a single letterform with generous weight, a geometric mark, one object silhouette. The ones that fail are almost always a full logo, shrunk: wordmarks turn to grey smudge and multi-element logos to confetti.

1. Reduce the logo to its essence first. Take the one shape people would recognise in silhouette — a letter, an animal, a tool — and let the rest go at small sizes. Large displays can use the fuller mark via the SVG's own detail; tabs cannot.
2. Use the full canvas. Marks floating in generous padding vanish. Let the shape occupy 80–90% of the frame, as the recognised icons in your own tab bar do.
3. Limit the palette to two or three colours with strong value contrast between shape and background — contrast, not hue, is what survives shrinking.
4. Draw a dedicated small version if needed. Professional icon sets routinely ship a simplified 16-pixel variant with thicker strokes and removed details. With SVG you can even adapt inside one file using media queries for dark browser themes.
5. Preview at true size, in a row of real tabs. Judge it among neighbours, not alone on a design canvas. If you cannot pick it out at arm's length, simplify further.

Mistakes and pitfalls

Shipping only favicon.ico

An ICO alone leaves home-screen users with a screenshot of your homepage as their shortcut icon and PWA installs with nothing at all. The ICO is the floor, not the set.

Putting text in the icon

Even a two-letter monogram is near the limit; a word is unreadable at tab size and signals an icon that was never tested small. If the brand is a wordmark, promote its initial — set boldly — instead.

Forgetting dark tab bars

A dark navy mark that looks sharp on a light browser theme vanishes against dark chrome. Test both, and if needed serve an SVG icon that restyles itself with prefers-color-scheme.

Common questions

Do I still need favicon.ico if I have an SVG icon?

Yes, as a fallback: older browsers, some RSS readers, and various bots ask for /favicon.ico directly and ignore link tags. A small multi-size ICO in the root costs a few kilobytes and covers them all.

Why does my home-screen icon have rounded corners and a background I did not choose?

iOS applies its own mask to the Apple touch icon and places transparent icons on a background it selects. Design the 180×180 as a full-bleed square with the background colour you want, and keep key artwork inside the central safe area.

How do I check which icons my site is missing?

Open your browser's developer tools network panel, reload, and filter for "icon" — 404s and unexpected fallbacks show up immediately. Most analytics platforms also report favicon.ico requests hitting your 404 page.

To wrap up

Favicons reward a short, deliberate checklist: a scalable SVG for modern browsers, an honest ICO fallback, one 180-pixel icon for Apple home screens, the manifest pair for Android, and artwork simplified until it reads at sixteen pixels in both browser themes. Do it once and every tab, bookmark and home screen your site ever appears on looks intentional.

Budget ten minutes for the acceptance test nobody does: open the finished site in two browsers, pin the tab, bookmark it, add it to a phone's home screen, and switch the browser between its light and dark themes. Look at your icon among real neighbours, because a row of tabs is a competitive environment and icons are judged there, not in isolation on a design canvas. If yours disappears beside the saturated marks of large platforms, the fix is more weight or more background contrast — never more detail. And keep the source artwork with the project files: favicon requests resurface at every redesign, rebrand and platform launch, and the team that kept the master vector answers them in minutes instead of starting this whole exercise again.