Home · Blog · Favicon sizes

Favicon sizes in 2026: what you actually need

1 Oct 2026 · Images · 7 min read

The favicon is the smallest image on your website and somehow one of the most fiddly. It's the 16-pixel square in the browser tab, the icon on a phone home screen, the tile in a bookmarks bar — a dozen different sizes, in a dozen different places, each with its own rules. Get it right and nobody notices. Get it wrong and your site shows a generic globe icon next to a competitor's crisp logo, which is a small but real credibility leak.

This article is the complete, current picture: every size that matters in 2026, what each one is for, the enduring weirdness of the ICO format, and the exact HTML snippet to wire it all up. No folklore, no decade-old advice — just the set that works.

Where favicons actually show up

Before the sizes, it helps to know the venues, because each one reaches for a different file:

• Browser tabs: 16×16 pixels on standard displays, 32×32 on high-density ("retina") displays. This is the classic favicon — the one everyone pictures.
• Bookmarks bars and history lists: usually 16×16 or 32×32, depending on the browser and display.
• iOS home screen (when someone taps "Add to Home Screen"): 180×180 pixels. Apple calls this the apple-touch-icon, and it has its own rules — more on those below.
• Android home screen and the web app manifest: 192×192 pixels, with 512×512 recommended for the full install prompt. Android masks icons into its own shapes, so your artwork needs breathing room.
• Windows taskbar pins and tiles: historically a zoo of sizes; in practice the browser now handles most of this from the same set.
• Search results and browser new-tab pages: increasingly, browsers show larger versions of your icon here — another reason the big sizes matter.

The complete set

Here is the full set that covers everything above. Five files, each with a job:

A note on the 32×32 PNG: in practice it has quietly become the most important file in the set. Modern browsers on high-density displays reach for it in tabs, and many will use it as the general-purpose icon when nothing more specific matches. If you were going to generate only one PNG, this would be the one — but generating all five takes seconds, so generate all five.

The enduring weirdness of the ICO file

The ICO format dates to the 1980s, and it shows. It is not really an image format so much as a container: a single .ico file holds multiple images at multiple sizes, each stored as a BMP with a transparency mask. A proper favicon.ico contains at least 16×16 and 32×32 versions, letting very old software pick the size it wants.

Why bother in 2026? Because browsers still request /favicon.ico from your site's root automatically, whether you link it or not. If the file isn't there, you get a 404 in your server logs — harmless, but untidy — and ancient edge cases (old IE compatibility modes, some feed readers, assorted crawlers) still only understand ICO. It's cheap insurance: one small file, generated once, that silences a whole category of weirdness.

Designing for 16 pixels

The sizes are the easy part; the design is where favicons actually fail. A logo that looks magnificent at 400 pixels wide becomes an unrecognisable smudge at 16. The rules for tiny sizes are brutal and non-negotiable:

• Simplify ruthlessly. At 16×16 you get roughly one idea: a single letter, a simple shape, a bold mark. Fine lines, small text and subtle gradients all turn to mush. Design the small version as its own thing, not as a shrunken copy of the big logo.
• Use high contrast. The icon sits on browser chrome that may be light or dark depending on the user's theme. A mid-grey mark on a transparent background vanishes on one theme or the other. Bold shapes with strong light-dark contrast survive everywhere.
• Fill the canvas. Timid icons with wide transparent margins look lost at small sizes. Let the mark use the full square — you can always add padding in the larger sizes.
• Test at actual size. Zoom your editor out to 16 pixels and squint. Better yet, install the icon in a real browser tab next to real sites. The tab strip is the harshest critic your icon will ever face.
• Keep the apple-touch-icon opaque. iOS does not respect transparency in touch icons the way you'd expect — transparent areas render as black. Flatten onto your brand colour or a solid background.

The SVG favicon question

Sharp-eyed readers will have noticed SVG missing from the complete set above. Modern browsers — Chrome, Edge, Firefox, Safari — all support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">, and for a simple geometric logo an SVG favicon is genuinely lovely: infinitely sharp, often under a kilobyte, and recolourable for dark mode with a prefers-color-scheme media query inside the SVG itself.

So why isn't it in the recommended set? Because support, while broad, isn't universal — Safari only added it relatively recently, and plenty of non-browser consumers (feed readers, crawlers, older software) don't understand SVG icons at all. The pragmatic approach is both: ship the PNG/ICO set as the reliable baseline, and add an SVG link on top for browsers that prefer it. Browsers pick the SVG when they support it and fall back to the PNGs otherwise. One extra line of HTML, best of both worlds — just don't rely on the SVG alone until the long tail catches up.

The HTML to wire it up

Place the files at your site's root (or wherever you like, as long as the paths match) and add this to the <head> of every page:

The sizes="any" on the ICO tells modern browsers it's the multi-size container. The web manifest (a small JSON file) is where the 192×192 icon — and ideally a 512×512 one — gets referenced for Android. If you don't have a manifest yet, the PNG links alone still cover tabs and iOS.

The honest caveats

Two things about favicons will test your patience, and neither is your fault. First, browsers cache favicons aggressively and opaquely — sometimes for weeks, in places that ignore normal cache-clearing. When you update an icon and the old one stubbornly persists, it's the cache, not your HTML. A hard refresh of the page won't always do it; opening the icon URL directly and hard-refreshing that, or temporarily renaming the file, usually forces the issue.

Second, browsers choose sizes by their own inscrutable logic. You can link every size perfectly and still find a particular browser picking the 32×32 PNG for a context where you expected the 16×16. This is normal. The defence is the same as the whole strategy: provide the complete set, make every size look good on its own, and let the browsers choose. They'll pick something reasonable as long as everything you offer is reasonable.

Try the Favicon Generator