SVG Favicons: When to Use One, and the ICO You Still Need

One SVG can be your sharpest favicon on modern browsers, and it can flip for dark mode from a single file. It just can't be your only icon, so here is where it fits and what it leaves for the .ico and the PNGs.

Short answer: Use an SVG favicon for the browser tab: it's one file, crisp at every size, and it can adapt to dark mode. Keep a favicon.ico alongside it for older clients and crawlers, and PNG app icons for iOS and Android, which don't read SVG.

What an SVG favicon does well

A favicon is drawn at wildly different sizes across surfaces, and a single SVG covers all of them from one file. It stays sharp on any display because it's vector, not a fixed grid of pixels, so there's no blurry upscaling and no separate 16, 32, and 48 pixel exports to keep in sync.

It has one more trick a raster icon can't match: a prefers-color-scheme media query inside the SVG lets the same file recolour itself when the operating system switches to dark mode, so the mark stays legible against a dark tab strip without shipping a second image.

Linking it, with the fallbacks






A browser that understands SVG prefers the first line. Everything else is there for the surfaces that don't.

Where SVG works, and where it doesn't

Surface | Uses the SVG?
Modern browser tabs | Yes, and it looks the best there
Older browsers | No, they fall back to the .ico or a PNG
The /favicon.ico path | No, that request needs a real .ico
iOS home screen | No, it uses the apple-touch-icon PNG
Android and PWA install | No, it reads PNG icons from the manifest

Keep the .ico as a floor: Crawlers, feed readers, and older clients request /favicon.ico by path and won't read an SVG. It's a tiny file and a cheap safety net, so ship it even when your main icon is an SVG.

Making the SVG adapt to dark mode

Put a prefers-color-scheme media query in the SVG's own styles and let it swap fill colours when the OS theme changes. One file then reads correctly on both light and dark browser chrome, which is the neatest way to handle a theme-aware favicon.

If you'd rather not maintain the media query, a single mid-tone mark with enough contrast to survive on either background is a simpler route to the same goal.

Frequently asked questions

Should I use an SVG favicon?

For the browser tab, yes: it's one file, scales perfectly, and can adapt to dark mode. Just pair it with a favicon.ico and PNG app icons so the surfaces that don't read SVG are still covered.

Do all browsers support SVG favicons?

Most modern browsers do, but not all, and no home-screen surface uses one. That's why you keep an .ico and PNGs as fallbacks rather than relying on the SVG alone.

Do I still need favicon.ico if I have an SVG?

Yes. Browsers, crawlers, and feed readers still request /favicon.ico by path, and that request can't be answered with an SVG. Keep a real .ico at the site root.

Can an SVG favicon do dark mode?

Yes, that's one of its advantages. A prefers-color-scheme media query inside the SVG recolours it when the OS switches themes, so a single file works on both light and dark browser chrome.