Convert SVG to ICO
A favicon is the smallest thing you will ever ship and the least forgiving. Starting from a vector is what makes the small sizes clean, because each frame can be drawn at its own resolution instead of shrunk down from someone else's.
Use this without the search next time. Prathom Workbench puts Prathom's tools in your toolbar.
Add to Chrome — freeDrop your SVG file here, or click to browse
Up to 50 MB. Deleted automatically after 30 minutes.
What it does
- 16, 32 and 48 pixel frames, each rendered from the vector
- Transparency preserved throughout
- One file that Windows, browsers and legacy tooling all accept
- No watermark and no sign-up
How to use SVG to ICO
- 1
Add the SVG
A logo mark or icon. Simple, high-contrast shapes work; a detailed illustration will not survive being sixteen pixels wide, no matter what it is drawn with.
- 2
Convert
The drawing is rendered three times, once per size, and the results are packed into a single .ico container.
- 3
Put it where the site can find it
Save it as favicon.ico at the root of your site. Browsers request that path automatically even when nothing in the HTML points at it.
How it works
The SVG is rendered three separate times — at 16, 32 and 48 pixels — and the three bitmaps are assembled into one ICO container with a directory at the front listing what is inside.
Rendering per size is the part that matters. A vector has no native resolution, so asking for a 16-pixel render is a real instruction to the rasterizer rather than a request to shrink something. The 16 and the 48 are independent drawings of the same geometry, each resolved against its own grid.
Why small sizes are their own problem
At sixteen pixels a shape is roughly 250 pixels in total. A one-pixel line is six percent of the width. There is no room for anything to be approximately placed.
That is why favicons that work look like traffic signs: one shape, strong contrast, no interior detail. The constraint is not the file format or the converter, it is that the eye needs distinguishable form at a size where almost no information fits.
Designers handle this by drawing separate simplified marks for small use rather than scaling the full logo. If you have such a mark, it is the right input here.
Testing it properly
Do not judge the icon zoomed in. Open the site in a real tab, alongside several other tabs, and see whether you can pick yours out at a glance — that is the actual job.
Check it against both a light and a dark browser theme. An icon with dark strokes and a transparent background disappears against a dark tab strip, which is a common and entirely avoidable failure. Giving the mark its own background shape solves it.
Then force a refresh. Browsers cache favicons aggressively and for a long time, so a stale icon after an update usually means the cache, not the file.
Where this fits alongside modern favicons
ICO remains the compatibility floor. It is what a browser fetches unprompted, what Windows understands, and what older tooling expects.
For everything past that floor — high-density displays, home-screen icons, themed installs — a set of PNGs referenced from a web manifest does the work, and those are also best generated from the same vector. Converting once to ICO and once to a few PNG sizes covers both, and both start from the file where the shapes are still shapes.
Examples
A simple monogram
Each frame is a separate render at its own size, so the 16 has its strokes resolved against a 16-pixel grid rather than inheriting the blur of a larger image squeezed down. This is the entire reason to start from vector.
A detailed illustrated logo
The conversion works and the result does not. At sixteen pixels there is no room for fine lines, and the gradient becomes a smear. The fix is editorial rather than technical: draw a simplified mark for small sizes, which is what the detailed logo's owner should have anyway.
Frequently asked questions
Why start from SVG rather than a large PNG?
Because each size gets its own render. Downscaling one big bitmap to sixteen pixels averages detail into mush, while rendering the vector directly at that size lets the rasterizer resolve edges against the actual pixel grid. The difference is small in absolute terms and very visible, because a favicon is viewed at exactly the size where it matters.
Which sizes go into the file?
16, 32 and 48 pixels. Those are the three that operating systems and browsers actually request: 16 for the tab and address bar, 32 for taskbar and bookmark views, 48 for desktop shortcuts and Explorer. A single-size icon file is really just a PNG with a misleading extension.
Do I still need favicon.ico in 2026?
Yes, though it is no longer the whole story. Browsers request /favicon.ico by default whether or not you declare it, so having one avoids a stream of 404s in your logs. Modern sites pair it with a larger PNG and a web manifest for home-screen icons, which cover the cases ICO was never designed for.
What happens to gradients and effects?
Gradients render, but flatten visually at small sizes where there are too few pixels to show a transition. Blurs, drop shadows and other SVG filter effects are approximated or dropped. Favicons that survive contact with sixteen pixels are almost always flat, high-contrast and simple, which is a design constraint rather than a converter limitation.
Further reading
- A Three-Size Favicon Was 15 KB and the Same Images Were 1.3 KBA favicon is the smallest image on a website and one of the larger files in its root directory, which is a strange thing to be true. The reason is that .ico is not a compressed format at all, and every extra size you add costs its full uncompressed weight.
- Which Favicon Sizes You Actually NeedMost favicon guides list a dozen sizes and explain none of them. Only a few are ever actually drawn, the rest are cargo from an older web, and knowing which is which turns an afternoon of exporting into about five minutes.