About the SVG to Favicon
Zyff's SVG-to-favicon generator passes your SVG through byte for byte as icon.svg and renders the raster fallbacks around it — the PNG sizes, the multi-size .ico, the apple-touch icon and the Android set — then writes the link tags in the order a browser resolves them. A vector icon is the one favicon that is genuinely resolution-independent, which is why current browsers prefer it when offered both, but it is not enough on its own: iOS ignores it for home-screen icons and anything older falls back to the .ico. Rendering runs on Zyff's servers in memory only.
How to make an SVG favicon
Upload the SVG
It is passed through unchanged as icon.svg, so what you upload is exactly what ships. Flatten text to paths first if the SVG uses a font — a browser rendering your icon has no access to your webfont.
Keep the raster fallbacks on
They are preset on for a reason. The SVG covers current desktop and Android browsers; the PNGs and the .ico cover everything else, and iOS uses apple-touch-icon regardless of what the SVG says.
Check the rasterised previews
The PNGs are rendered from your SVG at a resolution chosen per size. A vector with hairline strokes or 1px detail rasterises badly at 16px, and this is where you see it.
Copy the head snippet
The SVG link comes first with type="image/svg+xml", then the PNG links with explicit sizes, then the .ico. A browser takes the first type it understands, which is why the order is not cosmetic.
Add a dark-mode variant if you want one
That lives inside your own SVG, not in the tag: a prefers-color-scheme media query in the SVG's own style block switches the fill. Zyff passes the file through untouched, so whatever you put in there ships.
What the SVG to Favicon does
SVG passed through unchanged
Byte for byte, as icon.svg. Nothing is re-serialised or minified, so no optimiser can quietly change how your mark renders.
Fallbacks generated around it
PNG sizes, a multi-size .ico, apple-touch and the Android set, all rasterised from the same SVG at the resolution each size needs.
Link tags in resolution order
SVG first with its MIME type, then sized PNGs, then the .ico. A browser stops at the first type it can read.
Transparency kept
Preset on, because a vector icon's whole advantage is sitting cleanly on whatever chrome the browser has.
Dark mode stays yours
A prefers-color-scheme query inside your SVG survives the passthrough. Nothing here rewrites your file to guess at a dark variant.
At a glance
| SVG handling | Passed through byte for byte as icon.svg |
|---|---|
| Rasterised fallbacks | PNG 16-512 px, multi-size .ico, apple-touch 180, Android 192 and 512 |
| Link order in the snippet | icon.svg, then sized PNGs, then favicon.ico |
| Transparency | Preserved by default |
| Accepted input | SVG (also PNG, JPG, WebP, AVIF — without the passthrough) up to 25 MB |
| Manifest | site.webmanifest referencing the Android sizes |
Frequently asked questions
Can a favicon be an SVG?
Yes, and current browsers prefer it when a page offers both an SVG and PNGs. It is declared with <link rel="icon" href="/icon.svg" type="image/svg+xml">, and the type attribute is what lets a browser skip it if it cannot render one. It does not replace the other files: iOS uses apple-touch-icon for home-screen icons regardless, and older browsers need the .ico.
Do I still need PNG favicons if I have an SVG?
Yes. The SVG covers current desktop and Android browsers, but apple-touch-icon is a PNG by specification, and /favicon.ico is still requested from your root without being declared. The practical set is the SVG plus a 180px apple-touch, 192 and 512 for Android, and a small .ico.
How do I make a dark-mode favicon?
Put a prefers-color-scheme media query inside the SVG itself, in its own <style> block, switching the fill or stroke. The tag does not change. Zyff passes your SVG through unmodified, so the query ships exactly as you wrote it — but test it, because a browser rendering a favicon does not always apply the same colour-scheme context as the page.
Why does my SVG favicon look wrong at 16px?
Because vector precision does not survive a 16-pixel grid. Hairline strokes disappear, small counters fill in, and detail merges. Draw a deliberately simplified version for the icon rather than reusing your full logo, and check the 16px rasterised preview here before shipping.
Should my SVG use a font?
No. Convert text to paths before uploading. A browser rendering your favicon has no access to your webfont, so a text-based SVG falls back to whatever font the renderer happens to have, or to nothing at all. This is the same reason Zyff's own brand mark is a path rather than type.
Is the SVG modified in any way?
No — it is stored and served as the exact bytes you uploaded. The PNG and ICO fallbacks are rendered from it, but the vector file itself is a passthrough, so nothing here can alter how your mark draws.