PNG vs ICO vs SVG favicon: which formats do you need?
"Which favicon format should I use?" is usually asked as if one format wins. The honest answer is that PNG, ICO and SVG each hold one job the other two cannot do, which is why a properly set up website in 2026 ships all three — in about five files, generated once, that between them cover every browser tab, search result and home screen. This comparison explains what each format actually is, where each one wins and fails, what Google, Safari, iOS and Android do with them, and the exact division of labour to copy. If you only want the resulting file list, the sizes and formats cheat sheet is the one-page version; this post is the reasoning behind it.
The three formats in one paragraph each
SVG is a vector: a text file describing shapes, paths and colours, which the browser draws at whatever size the surface demands. One file is sharp at 16 pixels in a tab and at ten times that elsewhere, weighs a few kilobytes for a typical logo, supports transparency, and — uniquely — can contain a prefers-color-scheme rule that swaps its colours for dark mode. Its limits: it must be self-contained (no external fonts or images load in favicon context), it cannot be the format iOS or Android consume for home screens, Safari 18 and earlier do not use SVG favicons for tabs (Safari 26 and later do), and Google Search does not list SVG among its supported favicon formats.
PNG is a raster: a fixed grid of pixels with lossless compression and full transparency. A PNG is exactly as sharp as the size you exported and softer everywhere else, so it is shipped at deliberate sizes — 96×96 for desktop and Google, 180×180 for Apple, 192 and 512 for Android. It cannot change with the theme, but every platform on earth can read it, which makes it the universal fallback and the mandatory platform format.
ICO is a container from 1999: one .ico file bundling several raster images (here, 16, 32 and 48 pixels), from which the browser picks the closest size. It is the heaviest way to ship a given picture and has no modern tricks — no dark mode, no scaling beyond its embedded sizes. It survives for one structural reason: browsers and tools request /favicon.ico from the site root by convention, including when there is no HTML to read, as when a PDF is displayed. Nothing else can answer at that address in that format's place.
Head to head
| Question | SVG | PNG | ICO |
|---|---|---|---|
| Type | Vector shapes | Fixed pixel grid | Container of pixel images |
| Sharp at any size? | Yes, from one file | Only at exported sizes; browsers scale neighbours | At its embedded sizes |
| Transparency | Yes | Yes | Yes |
| Dark mode | Yes — media query inside the file | No | No |
| Typical weight | A few KB | Small at favicon sizes | Largest — several images bundled |
| Tab support | Chrome, Edge, Firefox, Opera | Every browser | Every browser |
| Home screens | No | Yes — the required format | No |
| Found without HTML? | No | No | Yes — /favicon.ico convention |
| Best role | Main desktop favicon | Fallback + Google, iOS, Android | Legacy safety net at the root |
Read the table by rows and the conclusion builds itself: no column is all "yes", and each column owns at least one row outright. SVG owns sharpness and dark mode. PNG owns home screens and universality. ICO owns the one address that works with no markup at all. A single-format site is a site that chose which visitors get a degraded icon.
SVG: the main favicon — with two honest limits
Where SVG favicons are supported, browsers prefer them, and the preference is earned: one tiny file replaces the historical pile of per-size exports, renders crisply on standard and high-density displays alike, and can carry its own dark variant — something no raster can do, since a PNG has no way to know the tab turned dark. The full craft of producing one — simplifying artwork, cleaning the viewBox, outlining text, embedding everything — is in how to create an SVG favicon, and the theme mechanics in SVG favicons and dark mode.
Two limits keep SVG from being the only file, and both are about other people's surfaces, not the format's quality. Safari 18 and earlier still render tab icons from PNG and ICO (SVG arrived in Safari 26, September 2025), and Google Search does not list SVG as supported, so an SVG-only site hands them nothing deliberate to show. And the two home-screen systems never consult your SVG: iOS builds its shortcut from the Apple Touch Icon, Android from the web app manifest icons. Add the tools that request /favicon.ico blind, and "SVG only" leaves four audiences improvising. That is not an argument against SVG — it is the argument for declaring the cheap fallbacks beneath it.
One production warning belongs here: an SVG favicon is loaded as an image, in isolation. Scripts never run, external resources are never fetched, and live text is rendered without your webfonts — convert type to outlines and embed any raster the artwork needs, or parts of the icon simply render as nothing. A file that looks perfect opened as a document can still fail as a favicon; test it as one.
PNG: the fallback that became the platform format
PNG's role doubled over the years. It began as (and remains) the fallback every browser understands, and it became the format the platforms standardised on: Google displays PNG favicons in search results, iOS requires a PNG touch icon, Android's manifest icons are PNGs. The craft is in choosing sizes rather than spraying them. A modern package needs 96×96 for desktop fallback and Google — Google's current guidance is a square icon of at least 8x8 pixels, ideally larger than 48x48, in a supported format (the old multiple-of-48 rule was dropped in 2024), and 96 meets it while scaling down cleanly to tab size — plus the platform sizes below. It does not need a PNG at 16, 32, 48, 64 and 128 "just in case": the SVG covers scalable desktop use, the ICO embeds the small sizes, and browsers scale a close PNG well. Each extra file is another asset to keep in sync when the logo changes.
PNG's real weaknesses are two. It cannot adapt to dark mode, so design the desktop PNG high-contrast with a background of its own rather than transparency, so it survives light and dark tabs as one fixed picture. And as a fixed grid it punishes bad sourcing: export each size down from a master of at least 512×512 (or the original vector artwork), because a 512 home-screen icon upscaled from a 64-pixel upload is the blur users see every time they look at their phone.
ICO: small, old, and structurally irreplaceable
It is tempting to declare ICO dead — it is a 1999 container with 256-colour ancestors — and many "modern favicon" guides do exactly that, right up until their icon vanishes somewhere. Browsers request /favicon.ico at the site root by convention before and beyond your markup; displaying a PDF or image directly, some RSS readers and crawlers, and assorted legacy tools only ever look there. Our own generator's checks see the same pattern from the other side: the favicon checker probes the default location precisely because so many tools do. A small three-size ICO (16, 32, 48) costs a few kilobytes and closes that hole permanently. What ICO should no longer be is your strategy: ICO-only means no dark mode, no designed home-screen icons, mediocre scaling and a heavier download than the SVG that replaces it in tabs. Keep it as the safety net, filed at the root, declared with rel="shortcut icon" after the modern formats — the generated markup's order, which browsers resolve by format and size rather than by simply taking the first line.
Resist one embellishment: a 256×256 layer inside the ICO. Nothing displays a favicon at that size; the layer only inflates every download of a file whose whole purpose is to be fetched constantly and ignored gracefully.
Who actually uses which file
- Chrome, Edge, Firefox, Opera (tabs): your SVG, dark variant included; the 96×96 PNG where SVG is absent.
- Safari (tabs): the SVG from Safari 26, the PNG and ICO in Safari 18 and earlier — which is why "Safari shows nothing" on an older Safari almost always means an SVG-only declaration, a diagnosis walked through in why your favicon isn't showing up.
- Google search results: a square raster icon (PNG or ICO; not SVG), larger than 48×48 pixels ideally, from a stable, crawlable URL on the home page — 96×96 is the practical choice.
- iOS home screen: the opaque 180×180
apple-touch-icon.png; transparency becomes black, and iOS applies the rounded mask itself. - Android home screen and install surfaces: the 192×192 and 512×512 PNGs in
site.webmanifest, designed inside the 80% maskable safe zone. - PDFs, legacy tools, no-HTML contexts:
/favicon.ico, found by convention.
The same matrix, kept current, is the compatibility page — worth a look before believing any "you only need one file" claim, including, in a few years, this one.
So what should you ship? The five-file answer
Exactly what the favicon generator produces from one upload, in your browser with nothing sent to a server: favicon.svg as the main icon (with a dark variant if you define one), favicon-96x96.png as the universal fallback and Google's size, favicon.ico holding 16/32/48 at the root, the opaque 180×180 apple-touch-icon.png, and web-app-manifest-192x192.png plus web-app-manifest-512x512.png declared in site.webmanifest — with the matching markup:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Generate it, install it once, and the formats question stops being a question: each consumer, from a dark-mode desktop tab to a PDF viewer, finds the file that was designed for it. Verify the deployed result with the favicon checker, which reports every icon a live page declares, its real format and size, and how it previews across those same surfaces. Installing on a specific platform? Follow the WordPress favicon guide or the Shopify, Wix and Squarespace guide — and if you have no logo to convert in the first place, a favicon from text or an emoji may be the strongest artwork to generate from.
Quick questions
If I truly must pick one format?
For a controlled internal tool on one modern browser, the SVG. For anything public, the premise is the mistake — the fallbacks cost kilobytes, and the first older-Safari visitor, iPhone shortcut or Google crawl without them costs more. If forced to rank: SVG first, then the 96×96 PNG, then the ICO, then the platform PNGs.
Is a PNG converted from my logo as good as a real SVG?
No. Wrapping a raster inside an SVG container produces a valid, useful SVG file, but the artwork inside is still pixels and softens when scaled up. Start from vector artwork for a truly sharp icon, or from at least 512×512 pixels so every export is a downscale.
Do favicon formats affect SEO?
Only through Google's display rules: a crawlable, stable, square icon in a supported raster format (ideally larger than 48x48 pixels), declared on the home page, earns the icon beside your name in results. No format is a ranking factor beyond being eligible and recognisable.
Can I drop the ICO if my analytics show modern browsers only?
Your analytics only record browsers that visited pages. The ICO's audience — PDF views, readers, crawlers, tools — is largely invisible to it. Keep the few-kilobyte file at the root.
The short version
SVG for sharpness and dark mode, PNG for universality and every platform surface, ICO for the root address nothing else can answer. Ship all three as the five-file package above, generated from one good master — and let each format do the one job it is still, demonstrably, the best at. Create the complete package and check it live before you call the question settled.