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

Quick answer: a modern site needs a favicon at 16×16 and 32×32px (browser tabs), 180×180px (Apple touch icon), and 192×192px plus 512×512px (Android and PWA manifests) — packaged as a multi-resolution favicon.ico for legacy fallback, PNGs for everything else, and optionally an SVG for crisp scaling at any size.

There's no single "correct" favicon size anymore. There used to be — for years, 16×16 pixels was the only size that mattered, because that's all a browser tab needed. Then Apple added home-screen icons, Android added adaptive launcher icons, and the web app manifest arrived to describe icons for installed PWAs. Today a favicon isn't one file, it's a small family of files, each serving a different surface.

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 every browser still requests /favicon.ico as a fallback, and that file conventionally bundles the 16, 32 and 48px sizes into one multi-resolution container. Skip it, and you risk a 404 in the console on every single page load — harmless in practice, but sloppy, and some older tools (RSS readers, certain crawlers, legacy embed widgets) still only ever look there.

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.