Guide

Favicon (.ico) vs SVG

SVG is the most exciting favicon format of the modern era — vector, dark-mode aware, and tiny. But it cannot fully replace .ico in 2026. Here's why, and how to use both.

SVG scales infinitely and supports dark-mode media queries inside the file itself. A 1 KB SVG covers every density on every modern browser.

ICO is the universal fallback. Older Safari versions, legacy browsers, and the bare-URL <code>/favicon.ico</code> convention all still depend on it.

The recommended setup: ship <code>favicon.ico</code> + <code>favicon.svg</code>. Browsers that support SVG will prefer it; the rest fall back to .ico automatically.

Comment ça marche

  1. 1

    Design or export an SVG

    Square viewBox, single root <svg> element.

  2. 2

    Generate the .ico fallback

    Use FetchFavicon to rasterize your SVG into a multi-size .ico.

  3. 3

    Link both

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

Essayez maintenant

Generate the .ico + SVG pair

Convertisseur SVG en PNG

FAQ

Can I drop .ico entirely if I use SVG?+

Not safely. Many social embedders, RSS readers, and legacy tools still request /favicon.ico by convention.

Which browsers support SVG favicons?+

Chrome 80+, Edge 80+, Firefox 41+, Safari 15+, and Brave. iOS Safari still prefers the apple-touch-icon PNG.

How small can an SVG favicon be?+

Under 1 KB for a clean monochrome mark. Even complex multicolour logos rarely exceed 4 KB.

Outils associés

Plus de guides