Guide
How to make an SVG favicon.
One SVG can replace the stack of 16, 32, and 48-pixel bitmaps a favicon used to require. Here is how to design artwork that survives at 16 pixels, the markup to reference it, and the fallback still worth keeping.
Updated 2026-08-05
Design for the smallest size
An SVG favicon scales cleanly, but its artwork still has to remain recognizable at roughly 16 pixels. Simplify fine detail, increase narrow gaps, and test the icon at actual tab size instead of judging it only while zoomed in.
Use a square viewBox such as 0 0 32 32 and let the browser scale the vector. The viewBox matters more than assigning one fixed output size.
Reference the SVG correctly
Add a link element with rel set to icon, type set to image/svg+xml, and href pointing to the SVG file. List an ICO fallback after it for older browsers and non-browser tools that still request /favicon.ico directly.
- Serve the SVG with the image/svg+xml content type.
- Keep the artwork self-contained and avoid external assets.
- Retain a favicon.ico fallback for legacy consumers.
Support light and dark browser themes
An SVG favicon can include a prefers-color-scheme media query. This allows fills or strokes to change when the browser uses a dark tab strip, preventing a dark logo from disappearing against a dark background.
Test caching and compatibility
Favicons are cached aggressively. Open the icon URL directly to verify the response, then hard-refresh or reopen the tab. Test both themes and keep shapes simple enough to remain clear in bookmarks and browser chrome.
Frequently asked questions
Do browsers support SVG favicons?
All current major browsers do, referenced through a standard link rel="icon" tag with type="image/svg+xml". Support arrived at different times across browsers, which is why a favicon.ico fallback is still worth keeping for older versions and for tools that fetch icons outside a browser.
What size should an SVG favicon be?
Give the root svg element a viewBox — a square one such as 0 0 32 32 is conventional — and let the browser scale it. What matters is not a pixel size but whether the artwork still reads at 16 pixels wide. Zoom out to that size before you commit.
Do I still need a favicon.ico?
Keep one. It costs a few kilobytes and covers old browsers, feed readers, and various crawlers that only look for /favicon.ico. List the SVG first in your markup so modern browsers prefer it.
Can an SVG favicon adapt to dark mode?
Yes, and this is the main thing an ICO cannot do. A prefers-color-scheme media query inside the SVG lets the icon switch colors with the browser theme, which keeps a dark monogram from disappearing against a dark tab strip.
Why does my favicon look blocky after converting from ICO?
Because the source had very little to work with. An ICO that only contains a 16x16 frame holds 256 pixels in total, and tracing cannot add detail that was never there. Convert from the largest frame in the container — 48x48 or 256x256 if it exists — or redraw the mark.
Why is my new favicon not showing up?
Favicons are cached unusually aggressively. Load the icon URL directly to confirm it is being served with the right content type, then do a hard reload. Some browsers only refresh the tab icon after the tab is closed and reopened.