Favicon Format Comparison: ICO vs PNG vs SVG
Three formats, three jobs. Use .ico for the /favicon.ico path and old clients, PNG for modern browsers and every app-icon size, and SVG for a crisp, theme-aware tab icon.
The formats do different jobs
There is no single best favicon format. Each one covers a case the others cannot. Picking one and forcing it everywhere is how tabs go blank and home screens show a gray box.
The .ico format is a container that holds several sizes in one file. That matters because browsers and crawlers still request /favicon.ico by default, and older clients only understand .ico. A real .ico is not a PNG with the extension renamed. Renaming a file changes its name, not its bytes, and most clients will reject it.
PNG is the workhorse. Every modern browser reads it, and every app-icon and manifest slot (16, 32, 180, 192, 512) is a PNG. SVG is the newcomer: one vector file that stays sharp at any size and can swap colors for dark mode with a media query inside the file.
ICO vs PNG vs SVG
| Format | Best for | Watch out for |
|---|---|---|
| .ico | The /favicon.ico path and old browsers or crawlers that only read .ico | Must be a real multi-size container (16 + 32 + 48), not a renamed PNG. Do not use it for app icons. |
| PNG | Modern browser tabs and every app-icon and manifest size (16, 32, 180, 192, 512) | Raster, so each size is a separate file. You still need the sizes, one PNG does not cover them all. |
| SVG | A single crisp tab icon that scales to any size and can flip color for dark mode | Not valid at /favicon.ico and not used for iOS or Android home screens. Keep it simple, effects can render differently across browsers. |
How they sit together in the head
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">A browser that reads SVG uses favicon.svg. Everything else falls back to the PNGs and .ico. The apple-touch-icon stays PNG because iOS ignores SVG here.
Common questions
Can I just rename a PNG to favicon.ico?
No. .ico is its own container format, not a PNG with a different extension. Some browsers tolerate a mislabeled file, but many do not, and crawlers are stricter. Generate a real multi-size .ico.
Do I still need favicon.ico if I have PNG and SVG?
Yes, keep one. Browsers, feed readers, and search crawlers still request /favicon.ico with no tag at all. A file at that path is the safety net when your link tags are missed.
Is an SVG favicon better than PNG?
For the tab icon it can be, because one file stays sharp at every size and can adapt to dark mode. It does not replace the PNG app icons for home screens, so use both.
Which format do I use for the 512x512 manifest icon?
PNG. The manifest icons array expects raster PNGs at 192 and 512, including a maskable one. SVG is not the format Android uses for installed-app icons.