# SVG to Favicon

> Turn an SVG into a modern favicon set: the vector icon.svg browsers prefer, plus PNG and .ico fallbacks and the exact link tags. Free, no signup.

- Canonical URL: https://www.zyff.app/tools/svg-to-favicon
- Status: working
- Price: free, no signup, no watermark
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

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

1. **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.
2. **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.
3. **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.
4. **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.
5. **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.

## Features

- **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.

## Specifications

| Property | Value |
| --- | --- |
| 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.

## Related tools

- [Favicon Maker](https://www.zyff.app/tools/favicon-generator): Produce every favicon size from a single image.
- [Favicon Size Generator](https://www.zyff.app/tools/favicon-size-generator): Every favicon size at once, as separate PNGs plus a zip.
- [PNG to ICO](https://www.zyff.app/tools/png-to-ico): Convert a PNG into a multi-resolution .ico file.
- [Format Converter](https://www.zyff.app/tools/image-converter): Convert between JPG, PNG, WebP, AVIF, HEIC, BMP, ICO and PDF.