SVG to ICO
Make a favicon straight from your logo — never uploaded.
How it works
Three steps, and nothing leaves your device.
-
1
Drop the SVG in
Your logo, exactly as your designer drew it.
-
2
Six sizes are rendered
16, 32, 48, 64, 128 and 256px, all in one .ico.
-
3
Download the .ico
Put it at your site root as favicon.ico.
Starting from a vector is the right way to do this
- A vector is the ideal favicon source. Every size is drawn from the original geometry rather than resampled from one bitmap, so the 16px entry is as sharp as it can be instead of a blurred downscale of a 512px PNG.
- Make the SVG square first. Each icon size is square. A wide logo is squashed rather than letterboxed, so set a square
viewBox— and usually crop to the mark rather than the full lockup. - Design for 16 pixels, not for the logo. That is the size in a browser tab, and a wordmark is unreadable there. Nearly every favicon that works is one letter, a monogram or a single shape.
- Convert text to outlines before exporting. An SVG that names a font renders with whatever the device has. If it is not installed the text silently falls back, and that fallback is baked into the icon.
- You may still want the SVG itself. Modern browsers accept an SVG favicon via a link tag, which stays sharp at any size. The .ico remains worth having as the fallback older browsers find by convention.
Frequently asked questions
Which sizes go in the file?
16, 32, 48, 64, 128 and 256 pixels, all in a single .ico.
Does my SVG need to be square?
It should be. Each icon size is square, and a wide logo gets squashed.
Why does my text look wrong?
The SVG references a font the device does not have. Convert text to outlines before exporting.
Where do I put the file?
At the root of your site as favicon.ico.