Why a favicon needs a layered set, not one file
A favicon is the small icon in the browser tab, the bookmark bar, the history list and the phone home screen — and each of those surfaces reads a different file. Because no single format is understood everywhere, the reliable approach is to ship a small set and let each browser pick what it can use. A modern browser grabs your SVG, an iPhone grabs the 180px PNG, and an old browser or a crawler falls back to favicon.ico. The table shows the typical layers.
| Layer | Covers |
|---|---|
| favicon.ico (16/32/48) | Legacy browsers, crawlers, the root request |
| PNG 16 / 32 | Modern desktop tabs and bookmarks |
| apple-touch-icon 180 | iOS home screen and Safari |
| PNG 192 / 512 | Android web app manifest |
| SVG | Scalable, dark-mode-aware modern browsers |
Why you still ship a favicon.ico
ICO is the original favicon format, and its superpower is that a single file can contain several sizes — typically 16, 32 and 48 pixels — so the browser picks the crisp version it needs. The other reason to keep one is the automatic request: browsers, link unfurlers and crawlers will ask for /favicon.ico at your site root even when no markup points to it, so having that file present avoids a stream of 404s. You can convert a PNG to ICO in seconds, and if you want the background first read what is an ICO file.
PNG favicons: modern, simple and predictable
For current browsers the simplest, most predictable option is a set of PNG icons referenced with explicit <link rel="icon"> tags carrying a sizes attribute. PNG gives you lossless edges and real transparency, so a small logo stays sharp on any tab colour. Provide at least a 16 and a 32, plus the 180px Apple touch icon and the 192/512 manifest icons. If a source image is the wrong size you can resize a PNG to each exact dimension rather than letting the browser scale one file.
SVG favicons: scalable and dark-mode aware
An SVG favicon is a single vector file that stays perfectly sharp at every density, from a 16px tab to a high-DPI display, with no separate exports. Its best trick is theming: because SVG is text you can embed a @media (prefers-color-scheme: dark) rule so the icon recolours itself when the user switches to a dark browser theme. Support is good in Chrome, Edge and Firefox and growing in Safari, but it is not universal — so treat the SVG as the primary icon and keep the PNG and ICO layers as fallbacks for everything else.
Which sizes to ship, and how to make them
A complete, no-nonsense set is: a multi-size favicon.ico (16/32/48), PNG 16 and 32 for tabs, a 180 Apple touch icon, 192 and 512 for the Android manifest, and an SVG as the master. Rather than export each by hand, the fastest route is the favicon generator, which produces the whole set from one upload. For a deeper comparison of the two raster choices, see PNG vs ICO. Whatever you do, build small versions from a master rather than scaling a single large image down — that is the difference between a crisp tab and a muddy one.
Frequently asked questions
- Do I still need a favicon.ico file in 2026?
- Yes, keep one. Browsers and crawlers still request /favicon.ico automatically even when you have no link tag, and some feed readers and older clients only understand ICO. It is a tiny insurance file, so shipping it costs nothing.
- Can I use a single SVG as my only favicon?
- Not safely yet. Modern desktop browsers render SVG favicons, but Safari support is incomplete and older browsers ignore them entirely. Use an SVG as the primary icon but always pair it with a PNG and an ICO fallback.
- What favicon sizes should I actually ship?
- 16x16 and 32x32 cover browser tabs and bookmarks, 48x48 helps Windows and some search results, 180x180 is the Apple touch icon for iOS home screens, and 192x192 plus 512x512 are used by the web app manifest for Android.
- Why does my favicon look blurry?
- Almost always because a single large image is being scaled down to 16px by the browser. Export each size from a master file so the small versions are drawn crisply, rather than letting the browser squash one big PNG.
- Should a favicon have a transparent background?
- Usually yes for the tab icon, so it sits cleanly on light and dark browser chrome. Apple touch icons are the exception — iOS adds rounded corners and prefers a filled, opaque square, so give that size a solid background.