SVG vs PNG vs ICO Favicons: Which Should You Use?

Should your favicon be SVG, PNG, or ICO? Short answer: use all three for a future-proof setup. But each format has a clear role. Here's how they compare.

Quick comparison

ICO — the universal fallback

.ico is the oldest favicon format and the only one guaranteed to work everywhere, including Internet Explorer and old enterprise browsers. A single .ico can bundle multiple sizes (typically 16, 32, 48), and the browser picks the best one.

Downside: not scalable, no transparency tricks, larger file size than SVG. But every site should still ship one.

Convert PNG to ICO →

PNG — the workhorse

PNG is what most modern browsers actually load for the tab icon. You declare multiple sizes and the browser picks the right one for the display:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

Downside: each size is a separate file, and PNGs can't adapt to dark mode.

SVG — no longer the future, now the present

SVG favicons are vectors: they stay perfectly crisp at any size, weigh less, and — best of all — support dark mode via embedded CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .logo { fill: #ffffff; }
    }
    .logo { fill: #000000; }
  </style>
  <rect class="logo" width="32" height="32" rx="6"/>
</svg>

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Update (September 2025): Safari 26 finally added SVG favicon support, which makes SVG a Baseline feature across all modern browsers — Chrome, Edge, Firefox, and Safari. The old advice that “Safari doesn't support SVG favicons” is now out of date.

The remaining caveats: Safari currently ignores dark-mode media queries inside SVG favicons (WebKit bug #309949), and legacy Android WebViews and locked-down corporate browsers still need a raster fallback — so keep the PNG/ICO links alongside your SVG.

Generate a sanitized favicon.svg →

So which should you use?

The recommended favicon stack (declare them in this order):

1. An SVG first — modern browsers (all of them, since Safari 26) pick it up, and it enables dark mode. See the SVG favicon generator.
2. PNGs at 32, 180 (Apple), 192, 512 for each platform.
3. An .ico as the universal legacy fallback.
4. A site.webmanifest linking them all for PWAs.

Get all of these from one upload at Favicon.one — the generator outputs the full multi-format package with ready-to-paste HTML.