ICO to SVG converter
Choose an .ico file and get an SVG traced from the largest picture inside it, in flat colours with the see-through parts kept, or in black and white.
Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.
How to convert an ICO to SVG
- Choose your .ico file or drop it on the box. A favicon.ico saved from a website works.
- The largest picture in the file is traced at once. If the file holds several sizes, you can pick another.
- Choose flat colours or black and white, and press “Few”, “Some” or “Many” until the SVG matches the icon.
- Download the SVG. It takes the icon’s name.
What is inside an ICO file
An .ico file is a small folder of pictures: the same icon drawn at several sizes, so that Windows or a browser can take whichever fits. A favicon.ico commonly holds 16, 32 and 48 pixel versions; a Windows program’s icon often adds one of 256. The file begins with a list saying how many pictures there are and how big each is. This page reads that list, shows it, and traces the picture with the most pixels, because the largest one has the most detail to follow.
Each picture is stored in one of two ways, and both are read here. Newer icons hold whole PNG files, which is the usual form for the 256 pixel size. Older and smaller ones hold Windows bitmaps with 1, 4, 8, 24 or 32 bits for each pixel. A bitmap of fewer than 32 bits has a second, one-bit layer called the mask, which marks the pixels that are see-through; a 32-bit one carries its own transparency.
An icon is pixels, so the SVG is a tracing
Nothing in an .ico file is a vector shape. Converting ICO to SVG therefore means tracing: finding the edges between areas of colour and writing them as curves. The result is a real SVG of paths, which scales cleanly, but it is a new drawing made from the pixels, not the designer’s original artwork.
How good it is depends on how many pixels there were. A 256 × 256 picture has 65,536 pixels and traces well. A 16 × 16 favicon has 256 pixels in all, about one for every detail, and its tracing can only be a rounded, simplified version of the icon. The tracer enlarges a small picture up to six times before it looks for edges, which smooths the staircase but cannot add detail that was never there. If the icon was made from a logo, the logo’s own SVG, where you can get it, will always be better than a tracing of its favicon.
Colours, transparency and the clip path
In flat colours the picture is reduced to the number of colours you choose, six to begin with. Each colour becomes one path, except the one that covers the most area, which is written as a plain rectangle behind the rest. Icons are usually drawn in a few flat colours, so a low number often gives the cleanest result: extra colours get spent on the soft pixels along the edges.
Most icons have see-through corners or a see-through background. The SVG keeps them: the icon’s outline is traced from its transparency, and the colours are shown only inside that outline by a clip path. Browsers, Inkscape and most design programs honour clip paths. If a cutting program shows a full square of colour, untick “Keep see-through parts see-through” under Fine-tune, which paints those parts white, or trace in black and white, where see-through counts as blank paper and no clip path is used.
What is and is not read
- .ico files with PNG or uncompressed bitmap pictures, at any size up to 256 pixels and beyond.
- .cur cursor files, which are built the same way. The cursor’s hot spot is not kept.
- A PNG, JPG or GIF that has been named favicon.ico, which web servers accept and which is common. The page says what the file really is and traces it anyway.
- Not read: pictures stored as compressed bitmaps or with 16 bits for each pixel, which are rare. If the largest picture is one of those, the next largest is used, and the page says so.
- Not read: .icns files from macOS and .exe or .dll files with icons inside them. Extract the icon as an .ico or a PNG first.
Questions
Which picture in the file is traced?
The one with the most pixels. If two are the same size, the one with more bits for each pixel, which has more colours. Every size in the file is listed beside the result, and you can press another to trace that one.
Can I get the original vector logo back from a favicon?
No. The favicon was made by drawing the logo at 16 or 32 pixels and throwing the rest away. A tracing of those few pixels gives a rough outline, good enough to recognise and not much more. Look for the site’s logo as an SVG or a large PNG if you can.
Why does my SVG show a coloured square in one program and not another?
The see-through corners are kept with a clip path, and that program is ignoring it. Untick “Keep see-through parts see-through” under Fine-tune, or trace in black and white.
How do I make an ICO from an SVG?
With the SVG to ICO converter, which draws the SVG at each size a favicon needs and packs them into one file.