SVG Favicon Generator - With the SVG as the Primary Icon
Most favicon generators hand you a folder of PNGs and a dozen link tags for iOS versions that stopped shipping years ago - and quietly leave out the one file that matters most on a current site. The result is a package that is simultaneously bloated and incomplete. Your SVG is the best favicon you have: one vector file covers every screen density there will ever be, and it is usually smaller than the 32 pixel PNG people replace it with. So this package ships it as favicon.svg and points the markup at it first, with the ICO as the fallback underneath. The PNGs are all still there for the places that need them, each drawn from your vector at its own size rather than downscaled from one big render. Everything is built in your browser and nothing is uploaded.
How to use this tool
Drop in your SVG
Drag your logo or mark onto the box above, up to 5 MB. Square artwork works best - anything else is fitted into a square frame, and the empty space stays transparent.
Check the small sizes
The preview shows 16, 32 and 48 pixels at actual size, rendered from your vector through the same path the package uses. If the mark is unreadable at 16 pixels here, that is what your visitors will see in their tab.
Name your site
Whatever you type goes into site.webmanifest as the name and short name, which is what Android and desktop Chrome show when someone installs your site to their home screen. Leave it blank and the manifest ships a neutral placeholder to edit later.
Build and download the package
Click Build the favicon package. Your drawing is rendered at 16, 32, 48, 180, 192 and 512 pixels, three of those go into favicon.ico, and everything is zipped with a manifest and a README.
Copy the four tags
Unzip everything into your site's root directory, then copy the four link tags shown beside the download button into your <head>. That is the whole installation - no build step and no extra configuration.
Frequently Asked Questions
What exactly is in the ZIP?
Seven files: favicon.svg - your original artwork - plus favicon.ico containing 16, 32 and 48 pixel versions, apple-touch-icon.png at 180, icon-192.png and icon-512.png for Android and installable apps, site.webmanifest, and a README repeating the tags. Every file the snippet references is in the archive.
Why is the SVG listed before the ICO?
Because it is the better icon and browsers pick the last format they understand. One vector file stays sharp on every display density that exists or ever will, needs no size variants, and is often smaller than a 32 pixel PNG. Browsers that cannot use it simply fall through to the ICO on the next line.
Do I really only need four tags?
Yes, on any site being built today. The long lists of apple-touch-icon-precomposed variants that generators still produce target iOS 6 and earlier. Current iOS reads a single apple-touch-icon, Android reads the manifest, and everything else reads the icon links. Four tags cover all of it.
Can my favicon change with dark mode?
Only the SVG can, which is another reason it leads. Put a media query inside the SVG itself - a prefers-color-scheme rule on a fill - and the browser applies it live in the tab. The ICO and the PNGs are fixed images and will keep whatever colours they were rendered with.
Why are the small sizes rendered separately?
Because shrinking one big render throws away exactly the detail small icons depend on. Measured on a pixel-art mark at 16 × 16: drawn from the vector it gave 141 solid pixels and no half-transparent ones, while the same artwork downscaled from 512 gave 98 solid and 64 blurred. That is 40% of the ink turned to mush.
Where do the files go on my server?
All of them in the site root, alongside index.html, so they resolve at /favicon.svg, /favicon.ico and so on. The paths in the snippet start with a slash for exactly that reason. If your framework serves static files from a public or static directory, put them there instead and the URLs stay the same.
My favicon has not changed after I uploaded the new one.
Browsers cache favicons harder than almost anything else, often ignoring a normal refresh. Open the icon URL directly and reload it, or use a private window to check. It is nearly always caching rather than a broken file, so verify the URL loads before changing anything else.
What size should my source SVG be?
The viewBox size barely matters, since everything is redrawn from geometry - but square proportions do. Design the mark to read at 16 pixels first and scale up from there. A logo that works on a business card usually has far too much detail to survive in a browser tab.
Do I still need the ICO at all?
Keep it. It is a few kilobytes and it covers the places nobody tests: Windows desktop shortcuts, RSS and podcast readers, link previews in older chat clients, and embedded browsers inside desktop apps. Most of those still request /favicon.ico by convention and ignore whatever your markup declares.
Is anything uploaded to build the package?
No. Every render, the ICO packing and the ZIP are all produced in your browser. Your logo never reaches a server, which also means the package is ready the moment you click rather than after a queue, and there is no copy of your artwork left anywhere.
You might also need
Something not working? Report a bug