SVG to Favicon Generator

One SVG in, a ready-to-upload favicon kit out, with the exact <link> tags to paste into your <head>.

Loading the SVG to Favicon tool…

Processed on your device. Files are never uploaded.

How to use the SVG to Favicon tool

Drop or paste your logo SVG.
Optionally set a background colour and padding for the Apple and Android icons.
Download the ZIP, upload its files to your site root and paste the HTML snippet.

The minimal modern favicon set

Following the approach popularised by Evil Martians’ “How to Favicon” guide, you only need: favicon.ico (32 px, for legacy requests), favicon.svg (modern browsers, can adapt to dark mode), apple-touch-icon.png (180 px, for iOS home screens) and 192/512 px PNGs referenced from a web manifest for Android. That is what this generator builds.

Why add a background to touch icons

iOS fills transparent areas of apple-touch-icon with black. A solid background and around 10% padding keeps the logo looking deliberate on a home screen.

Questions

Where do I put the files?

In your site’s root folder (next to index.html), so that /favicon.ico resolves. Then paste the HTML snippet into your <head>.

Can the SVG favicon support dark mode?

Yes. Add a <style> block with @media (prefers-color-scheme: dark) inside favicon.svg to swap fill colours.

Is anything uploaded?

No. All icons and the ZIP are created in your browser.