The Complete Favicon Size Guide for 2026 (16px to 512px)

For years there was one favicon size: 16×16, because that's all a browser tab needed. Then Apple added home-screen icons, Android added launcher icons, and the web app manifest arrived for installable apps. Today a favicon is a small family of files, each one for a different surface.

Here's the current list. 16×16 and 32×32 for browser tabs, bundled together with 48×48 in a favicon.ico. 180×180 for the Apple touch icon. 192×192 and 512×512 for Android and the web manifest. And optionally an SVG, which covers every size at once in browsers that support it. The table below shows exactly where each one appears.

This guide covers every size you'll actually need, what reads each one, and how to avoid shipping a blurry or cropped result.

The core sizes, at a glance

Size	File	Used by
16×16	favicon-16x16.png (and baked into favicon.ico)	Browser tabs, address bar
32×32	favicon-32x32.png (and baked into favicon.ico)	Retina tabs, taskbar shortcuts
48×48	baked into favicon.ico	Windows desktop shortcuts, older browsers
96×96	favicon-96x96.png	Some Android launchers, desktop shortcuts
180×180	apple-touch-icon.png	iOS home screen, Safari pinned tabs
192×192	icon-192.png (manifest)	Android home screen, PWA install prompt
512×512	icon-512.png (manifest)	PWA splash screens, app switchers

If you only remember one rule, remember this: export from a source image that's at least 512×512px, then downscale for every smaller size. Never upscale a small logo to hit a bigger target — it will look soft or pixelated exactly where people are most likely to notice, which is at small sizes where every pixel is doing double duty.

Why 16×16 still exists

It's tempting to assume 16px favicons are a relic, but browsers still fall back to /favicon.ico on any page that doesn't declare an icon, and that file conventionally bundles the 16, 32 and 48px sizes into one multi-resolution container. Skip it, and those pages log a 404 in the console. Plenty of other tools (RSS readers, link previews, certain crawlers) only ever look there, too.

Why 180×180 matters more than people think

Apple's touch icon size is easy to overlook because it never shows up while you're testing in a desktop browser. It only appears the moment someone taps "Add to Home Screen" on an iPhone or iPad — by which point, if it's missing, iOS quietly falls back to a screenshot of your page instead of your icon. That's a bad first impression to discover after the fact. If you want to see exactly what iOS will use for a live site, run it through a favicon checker rather than guessing.

Why you need both 192×192 and 512×512

These two sizes come from the web app manifest, not from <link> tags, and they serve different moments in the PWA lifecycle:

• 192×192 is the standard size Android uses for the home-screen icon itself.
• 512×512 is used for the splash screen shown while an installed PWA is loading, and for larger displays like app switchers and some app-store-style install prompts.

Both are declared inside site.webmanifest, typically with "purpose": "maskable" so Android can safely crop them into its adaptive icon shapes without clipping important content — which is also why it's worth keeping your subject centered with a little breathing room around the edges at these sizes.

Should you export an SVG too?

If your icon is a simple vector mark, yes. An SVG favicon stays crisp at any resolution and on any pixel density, so a single file effectively replaces several PNG sizes for browsers that support it (most current ones do, via <link rel="icon" type="image/svg+xml">). Keep the PNG and ICO set alongside it regardless — SVG support isn't universal, and you'll still want a solid fallback.

A practical export checklist

1. Design or choose your source art at 512×512px or larger.
2. Export 16, 32 and 48px versions and pack them into one favicon.ico.
3. Export a 180×180px apple-touch-icon.png with no transparency (iOS fills transparent areas with black).
4. Export 192×192 and 512×512px PNGs and reference them from site.webmanifest.
5. Optionally ship a favicon.svg for vector-crisp scaling.
6. Paste the matching <link> tags into your <head> and verify with a checker.

The Generator builds this entire set in one pass from an icon, emoji, text or image — every size above, sized correctly rather than stretched, packaged as one download.