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.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
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.
How it works
- 1
Design or export an SVG
Square viewBox, single root <svg> element.
- 2
Generate the .ico fallback
Use FetchFavicon to rasterize your SVG into a multi-size .ico.
- 3
Link both
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Try it now
Generate the .ico + SVG pair
SVG to PNG ConverterFAQ
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.