Favicon SVG Generator

Why an SVG favicon in 2026

The SVG favicon is a relatively new option in the favicon stack. Real cross-browser support landed only around 2020 with Chrome 80, Firefox 41 (full support shipped earlier than Chrome but with quirks), Edge 80 (Chromium) and partial support in Safari 9. Before that, every site shipped one or more raster files (ICO, PNG) per size. A single SVG now replaces most of that machinery for one core reason: it is a vector, so it renders crisply at any pixel ratio from 16-pixel pinned tabs to 4K browser surfaces.

Three other advantages matter in production:

• File size — a typical glyph SVG is 1–2 KB, often smaller than a 32x32 PNG and dramatically smaller than the multi-resolution ICO container.
• Theme awareness — the SVG can carry its own CSS, swapping colors via prefers-color-scheme so the favicon adapts to dark mode without a second file.
• Animation — SMIL or CSS animations inside the SVG can pulse, rotate or change color, which a few browsers actually render on the tab (others freeze the first frame).

HTML markup

An SVG favicon declared alone leaves older browsers — and iOS Safari — without an icon. The robust pattern declares the SVG first, then a PNG fallback, then an Apple Touch Icon:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Browsers walk the list and use the first usable match: modern engines pick the SVG, older ones fall back to PNG, iOS Safari pulls the Apple Touch Icon. The type attribute on each link is what lets the browser skip formats it does not understand without downloading them.

viewBox sizing

The viewBox should be small — typically 0 0 16 16 or 0 0 32 32. There is no benefit to declaring a 512x512 viewBox: the file becomes the same size but the coordinates lose precision, and the design tends to drift toward detail that disappears on the actual 16-pixel rendering. Treat the favicon viewBox as a pixel grid you are designing for, not a canvas.

Common pitfalls

Several SVG features are blocked or unreliable inside favicons:

• No <script> inside the SVG. Every browser refuses to execute JavaScript embedded in a favicon — both for security and because the favicon runs outside the document context. Inline scripts are silently ignored.
• Avoid complex gradients. Linear and radial gradients render correctly, but rasterization at 16 pixels tends to blur the bands and wash out colors. Solid fills read sharper at tab size.
• Keep paths simple. Combine <rect>, <circle>, <polygon> and short paths rather than long Bézier curves. At 16 pixels the renderer rounds everything to integer offsets anyway.
• External resources fail silently. An SVG that references an external image, font or filter URL will draw nothing — favicons are fetched with restricted permissions.

Theme color, manifest and the broader icon surface

The <meta name="theme-color"> tag does not affect the favicon — it tints the address bar on Android Chrome and the title bar of installed PWAs. Pair it with the dominant favicon color for a consistent brand surface.

A Web App Manifest (manifest.webmanifest) declares 192x192 and 512x512 PNG icons for Android home-screen shortcuts and PWA splash screens. The SVG favicon does not replace these: Android Chrome reads the manifest, not the <link rel="icon"> chain, when creating a home-screen shortcut.

FAQ

Does SVG favicon work in Safari?

Safari has supported SVG favicons since version 9 on macOS, but inconsistencies remain on iOS Safari for the Apple Touch Icon surface, which still expects a 180x180 PNG. For desktop Safari, an SVG declared with type="image/svg+xml" works.

Will an older browser fall back to the PNG?

Yes, as long as both <link> tags are present and the PNG comes after the SVG in document order. Older engines skip the SVG (unknown type) and pick the next icon they can render.

Do I need to mask the SVG for rounded corners?

No for the favicon surface — browsers render the SVG as authored. The Apple Touch Icon is a different story: iOS applies the rounded mask automatically to a square PNG. Inside the SVG you can use <clipPath> to bake in a custom shape, but that is rarely necessary in 2026.