Favicon Sizes 2026: What You Actually Need

What a favicon actually is (in 2026)

A favicon is the tiny icon representing your site in browser tabs, bookmarks, history, and search results. At 16×16 pixels — the classic tab size — it's the smallest brand impression you'll ever make, roughly the size of a grain of rice on screen. And yet it does real work: in a sea of twenty tabs, the favicon is how people find yours. A missing favicon (the browser's default blank-document icon) reads as unfinished, like a shop with no sign.

The format history matters because it explains the conflicting advice. The original favicon was `favicon.ico`, a Windows icon file containing multiple sizes in one container — 16, 32, and 48px. Browsers then added PNG support (simpler, better quality). Apple added `apple-touch-icon` (180×180) for iOS home screens. Android/Chrome added the web app manifest with 192×192 and 512×512 icons. Each layer solved a real need, and each layer is still referenced by tutorials that never got updated.

In 2026, the practical stack is: PNG files at the key sizes, an `.ico` fallback for older contexts, and optionally an SVG favicon for modern browsers. That's it. You don't need the seventeen-file cargo cult.

The sizes that matter: 16, 32, 180, 192

Here are the four sizes that cover essentially every context, and what each one is for:

16×16 — the browser tab. The original and still the most-seen favicon. At this size, detail is the enemy: your full logo with tagline becomes mud. Design (or choose) a simplified mark — a single letter, a glyph, a bold shape. Test it by squinting; if you can't identify it at arm's length, simplify further.

32×32 — the high-DPI tab and taskbar. Retina displays show the 32px version in tabs; Windows taskbar pins use it too. This is the size most people actually see on modern screens. Your simplified mark should read clearly here — this is the "real" favicon size in practice.

180×180 — Apple touch icon. When someone adds your site to their iPhone/iPad home screen, iOS uses this. Note: iOS doesn't support transparency in touch icons — it fills transparent areas with black, which looks broken. Export this one with a solid background (your brand color), full-bleed.

192×192 — Android/Chrome. The web app manifest icon for Android home screens and the Chrome "install app" prompt. Like Apple's, it wants a solid background — and Android's adaptive icons may mask it into a circle, so keep the important content centered with padding (the "safe zone" is roughly the central 66%).

The honest extras: a 512×512 icon for the manifest's larger contexts and splash screens (nice to have, one more export), and the `.ico` file containing 16+32+48 for legacy browsers and tools that still request `/favicon.ico` by ancient convention. Generate them, link them, forget them.

What you do not need: separate 57, 60, 72, 76, 114, 120, 144, 152 sizes. That was the 2012-era iOS sprawl, and modern iOS just scales the 180px icon. Anyone telling you to generate twelve Apple sizes is quoting a decade-old tutorial.

SVG favicons: the one-file future

The elegant endgame is the SVG favicon: one small vector file that renders crisply at every size, from 16px tab to 512px splash screen. No multiple exports, no pixelation, tiny file size. You link it with `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` and modern browsers do the rest — including a genuinely delightful trick: SVG favicons can adapt to dark mode with a `prefers-color-scheme` media query inside the SVG, so your icon can invert itself for dark browser themes.

The catch is Safari. As of recent versions, Safari's SVG favicon support remains the gap — it still prefers PNG (and uses the touch icon in pinned-tab contexts). The standard practice is belt-and-braces: serve the SVG for modern browsers and the PNG sizes as fallback. Browsers pick the first format they understand, so everyone gets a crisp icon.

My recommendation for 2026: generate the full PNG set (16, 32, 180, 192, plus 512 and the `.ico`) and an SVG version. Link the SVG first, PNGs after. It's barely more work when a generator produces all of them from one source image, and it covers every browser on Earth including the Apple-shaped exceptions. Check current specs before launch day in case Safari's position changes — this is the one fact in this guide most likely to age.

Generating the full set in one go

Doing this by hand — exporting six sizes, building an `.ico`, writing the link tags — is exactly the kind of fiddly work that produces mistakes. The sane approach: start from one high-quality square source image (1024×1024 is ideal; minimum 512×512) and let a generator produce every size plus the HTML snippet.

Source image guidance, because garbage in means garbage out at 16px: use a simplified mark, not your full logo. If your logo is a wordmark, use just the first letter or the icon portion. Bold, simple shapes survive miniaturization; thin lines and small text don't. Give the source some padding — elements touching the edge look cramped at small sizes, and the Android circular mask will eat edge content.

The Favicon & App Icon Generator Online takes that source image and produces the complete set — 16, 32, 180, 192, 512, the `.ico`, and the SVG option — entirely in your browser. The HTML snippet it generates includes the link tags in the right order with the right `sizes` attributes, which is the part people most often get wrong by hand (a missing `sizes` attribute means browsers guess, and browsers guess badly).

Then paste the snippet into your page's `<head>`, deploy, and move to testing — because favicons are cached aggressively and "it works on my machine" is never the full story.

Testing: tabs, phones, bookmarks

Favicons are among the most aggressively cached assets on the web. Browsers cache them independently of normal page caching, CDNs cache them, and Google's search index caches them. This means your testing workflow needs cache-busting discipline:

The tab test. Open the site in a fresh tab. Is the icon crisp at 16px? Open twenty tabs and find yours by icon alone — that's the real-world usability test. Check both light and dark browser themes if you shipped an adaptive SVG.

The hard-refresh ritual. Changed the icon and don't see the update? Normal page refresh often won't clear favicon cache. Try: hard refresh (Ctrl/Cmd+Shift+R), opening in an incognito window, or appending a version query (`/favicon-32.png?v=2` — and update the link tag to match). The query-string version bump is the professional's standard trick.

The phone test. Add the site to your home screen on iOS and Android. Check the 180px icon renders on a solid background (no black-filled transparency on iOS) and the Android icon survives circular masking (content centered, padding intact).

The search test. Google shows favicons in mobile search results. After deploying, check that Google's index picks up the new icon — this can take days to weeks, and there's no force-refresh. Getting it right before launch beats waiting for re-crawl.

The 404 check. Request `/favicon.ico` directly. Browsers and bots request it by convention even without a link tag; a 404 in your logs is noise, but serving the actual file is cleaner. Your generator's `.ico` placed at the site root handles this silently.