SVG → favicon.svg

SVG Favicon Generator

Q: Does the SVG favicon support dark mode?

Chrome and Firefox honor prefers-color-scheme media queries embedded inside SVG favicons. Safari currently ignores them due to WebKit bug #309949, so test carefully and keep a theme-neutral design as a fallback.

Q: What does the generator fix in my SVG?

It removes script tags, event handler attributes, and external references (a security requirement for anything served as a favicon), and adds a viewBox when missing so the icon scales correctly to 16px and beyond.

Drop in any SVG and get a sanitized, properly-scaled favicon.svg with a live 16px preview and the exact HTML to paste. Free, instant, and processed entirely in your browser.

Generate my SVG favicon

Drop your SVG here or click to browse

Your file never leaves the browser — 100% client-side processing

SVG favicons are now Baseline — Safari finally joined

For a decade, the answer to “can I use an SVG favicon?” was “not in Safari.” That changed in September 2025: Safari 26 added SVG favicon support, making SVG a Baseline web platform feature across Chrome, Edge, Firefox, and Safari. A single vector file now covers every modern browser — crisp at 16px, crisp on retina, and typically a fraction of the bytes of a PNG set.

You should still keep PNG and ICO fallbacks for older Android WebViews and locked-down corporate browsers, but SVG now deserves the first spot in your <head>.

The correct link order (SVG first)

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

Modern browsers pick the SVG; everything else falls through to the PNG and ICO. Browsers choose the last suitable icon they understand, so ordering SVG first is what lets capable browsers use it.

Why sanitize an SVG before shipping it as a favicon?

An SVG is an XML document — it can carry <script> tags, inline event handlers, and external references. Most designers export logos from editors that leave this cruft behind. The generator above strips all executable content, removes external href references, and adds a viewBox when missing (without one, your icon can render at its raw pixel size instead of scaling to the 16px tab).

Dark mode: one step forward, one caveat

The killer feature of SVG favicons is adaptive dark mode via an embedded prefers-color-scheme media query — Chrome and Firefox honor it. The caveat: Safari currently ignores media queries inside SVG favicons (tracked as WebKit bug #309949). Design your icon to look acceptable on both light and dark tabs, and see our dark mode favicon guide and the Safari troubleshooting article for workarounds.

Need PNG and ICO too?

This tool produces the SVG. For the complete package — multi-resolution favicon.ico, every PNG size, and site.webmanifest — use the main favicon generator or the SVG to ICO converter. For the full format comparison, read SVG vs PNG vs ICO favicons.

FAQ

Are SVG favicons supported in all browsers?

SVG favicons reached Baseline status in September 2025, when Safari 26 added support — joining Chrome, Edge, and Firefox. Keep PNG and ICO fallbacks for legacy environments.

Does the SVG favicon support dark mode?

Chrome and Firefox honor prefers-color-scheme inside SVG favicons. Safari currently ignores them (WebKit bug #309949), so keep a theme-neutral design as your baseline.

Is my SVG uploaded to a server?

No. Sanitization and preview rendering happen entirely in your browser. Your file never leaves your device.

What does the generator fix in my SVG?

It removes script tags, event handlers, and external references, and adds a viewBox when missing so the icon scales correctly to 16px and beyond.