---
title: SVG Favicons: When to Use One, and the ICO You Still Need
description: An SVG favicon is one file that scales to any size and can even adapt to dark mode. Where it shines, where it falls short, and the .ico you keep alongside it.
canonical: https://favicontools.com/blog/svg-favicon-guide
---
# 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
```html
```
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.