Updated September 2026

ICO vs PNG vs SVG: Which Favicon Format Should You Use?

Modern browsers will happily accept several different favicon formats, and that is exactly where the confusion comes from: ICO, PNG and SVG all work, but they are not interchangeable, and picking the wrong one — or only one — means your icon looks wrong somewhere. Here is what each format is actually good for.

.ICO — the universal fallback

An .ICO file is not a single image: it is a small container that can hold several resolutions of the same icon in one file (X-Icon Editor packs 64x64, 32x32, 24x24 and 16x16 into one .ico for exactly this reason). The browser picks whichever size fits the context — a sharp 16x16 for the tab, a larger one for a taskbar shortcut — instead of scaling a single image up or down.

It is also the one format every browser and operating system has supported since favicons existed, and the one browsers fall back to automatically at /favicon.ico if you do not specify anything else. If you can only ship one file, this is still the one to ship.

PNG — required for phones, PWAs and tiles

Apple touch icons, Android/Chrome home-screen icons and Windows tiles do not accept .ico at all — they specifically require PNG:

• <link rel="apple-touch-icon" href="/apple-touch-icon.png"> — 180x180 PNG, no transparency (iOS renders transparent areas as black).
• manifest.json icons for Android/Chrome and installable PWAs — typically 192x192 and 512x512 PNG.
• Windows Start menu tiles — 150x150, 310x150 and 310x310 PNG, referenced via meta tags.

See our icon sizes cheat sheet for the full breakdown of which size goes where.

SVG — sharp at any size, with a catch

<link rel="icon" type="image/svg+xml" href="/icon.svg"> lets you ship one vector file that stays crisp on any display density, and (with a bit of CSS inside the SVG) can even switch colors automatically for dark and light browser themes. The catch is support: Chrome, Firefox and Edge render SVG favicons, but Safari’s support has historically been inconsistent, which is why SVG should be an addition to an .ico fallback, not a replacement for it.

What we recommend

For most sites, the practical set is: a multi-resolution .ico at the root for universal support (exported directly from X-Icon Editor), a 180x180 PNG for apple-touch-icon, and 192x192 / 512x512 PNGs referenced from a manifest.json if you want a proper Android/PWA icon. An SVG icon is a nice-to-have on top of that, not a replacement for it. Build the base design once in the editor and export the resolutions you need from it, so every version stays visually consistent.