Favicon Formats and Sizes 2026: What Your Site Actually Needs

Last month I helped a friend launch his first SaaS. Everything looked great — until he messaged me a screenshot from his phone. Instead of his logo, the home screen showed the default grey globe. His favicon was a single 16×16 .ico file from a tutorial written in 2011. iOS never stood a chance.

This happens a lot, because most of us learned favicons back when one file solved everything. It doesn't anymore. Tabs, bookmarks, home screens, PWA installs and Google results each want their own file and their own size. The whole setup is still small — nine files and five lines of HTML — but you need all of them.

SVG vs PNG vs ICO (spoiler: answer is all three)

SVG is the future and honestly the present too. One file, sharp at every size, and it can even swap colors for dark mode with a media query. Every modern browser reads it. The old ones just fall back to your PNGs, which is why you still ship those.

PNG does the daily work: browser tabs, Google results, Android. The bare minimum is 32×32, plus 192 and 512 for the manifest. And the ICO? Keep it. Browsers fetch /favicon.ico on their own when someone views a PDF on your domain, so without one that tab shows nothing. A proper ICO bundles 16, 32 and 48 px in a single file.

Which platform asks for what

• Desktop tab: 16×16 and 32×32 PNG (32 covers retina screens)
• Google results: renders around 48×48 — this is where low-res icons get embarrassing
• /favicon.ico: 16/32/48 px packed into one file, fetched implicitly
• Apple touch icon: exactly 180×180, and don't pre-round it — iOS masks it itself
• Android/PWA: 192×192 and 512×512 declared in site.webmanifest; without these there's no install prompt

Why can't one big PNG cover it all? Because each context renders differently. Tabs are tiny. Home screens are huge and masked into circles or squircles by the OS. Ship one 16×16 file and the home screen looks broken; ship one 512 PNG and PDF viewers get nothing. Annoying, but that's the deal.

The head snippet I paste into every project

Five tags do it: an ICO link with sizes="48x48", an SVG icon link, two PNG links (32 and 16), the apple-touch-icon at 180×180, and a manifest link. SVG-capable browsers grab the SVG; older ones ignore it and take the PNG; Android reads the manifest for the big icons and theme color. Copy it once and forget about it.

One thing to delete from your muscle memory: rel="shortcut icon". It's an IE-era leftover. Plain rel="icon" covers everything.

Designing something that survives 16 pixels

Nobody reads your favicon — they glance at it. At 16 px, thin strokes melt, text becomes noise and detailed illustrations turn into colorful smudges. What works: a bold monogram or a single simple shape on a solid tile. High contrast always wins.

Watch out for dark mode too. A dark glyph on a transparent background is invisible on a dark browser theme, and on iOS transparency in the apple-touch-icon becomes black. Give the icon a proper background and leave roughly 10–20% padding, because the home-screen masks eat the corners.

No artwork yet? A monogram gets you 90% there. Our Logo Maker puts one or two letters on a rounded gradient tile in about a minute, and its 1024px PNG export is the perfect input for the next step.

Get everything in one ZIP

Drop a square image (512×512 or bigger) into the Favicon Generator, tweak background and padding if your logo needs air, and download the package: the multi-size ICO, all five PNGs, a ready manifest and the exact head markup. It runs in your browser, so the artwork never leaves your machine.

Check it after every deploy

In practice, favicons break at deployment, not at design time. A CDN path changes, the manifest doesn't get uploaded, the apple-touch-icon 404s after you reorganize /assets. I've seen every one of these on real sites. Run your live URL through the Favicon Checker — it fetches each file, flags the missing ones, and previews the icon in a tab, in Google results and on an iPhone home screen. A minute of checking, and no visitor ever sees the grey globe.