SVG to ICO

Browsers, bookmarks, Windows shortcuts and many crawlers still look for favicon.ico. An .ico file holds several square images at different sizes, and the quality of the small ones decides how your site looks in a crowded tab bar. Starting from an SVG lets every size be drawn from the vector at its exact pixel size, which gives the crispest possible icons.

Why rendering each size matters

The common way to make an icon is to shrink one large PNG to 16, 32 and 48 pixels. Shrinking averages neighboring pixels, so thin lines turn gray and edges blur. Here, the SVG is rendered separately at each size: the vector renderer places edges on the 16-pixel grid directly, so lines that land on whole pixels stay sharp. The difference is most visible at 16 and 24 pixels.

Which sizes to include

Sixteen and 32 pixels are used in browser tabs and bookmarks, 48 in Windows Explorer and some site shortcuts, 256 for large desktop icons and high-DPI displays. Those four are selected by default. Add 24 and 64 for a Windows application icon, and 128 if the icon will appear in a large list view. More sizes make the file slightly larger, which rarely matters.

Square and not-so-square logos

Icons are square. A wide logo is scaled to fit the square and centered, with transparent space above and below; nothing is cut off or stretched. Wordmarks become tiny that way, so for favicons most brands use just their symbol. If your SVG has a lot of empty space around the artwork, crop the viewBox in your editor first so the logo fills the icon.

Designing for tiny sizes

Small icons reward simplicity: bold shapes, two or three colors, no fine text, strokes at least two pixels wide at the 16-pixel size. Consider a dedicated small-size version of the logo. You can check the result by opening the downloaded .ico in ICO to PNG, which shows every size inside the file.

SVG favicon and favicon.ico together

Modern browsers also accept an SVG favicon via a link tag, which can even switch colors for dark mode. Keep favicon.ico anyway for older browsers, Windows shortcuts and tools that ignore link tags. For the complete set of PNG sizes used by phones, plus a web manifest, use the Favicon Generator.

Steps

Drop the SVG, keep or change the selected sizes, convert and download the .ico. Rename it to favicon.ico and upload it to the root of your site. Clear the browser cache or open the site in a private window to see the new icon, since browsers keep favicons for a long time.

Related tools

For icons from bitmap logos, see PNG to ICO and JPG to ICO. To produce PNG versions of the SVG for app stores and social profiles, use SVG to PNG.

Checking the icon before publishing

Preview the favicon in context: upload it to a test page or open it in a browser tab next to other sites. Look at it on a light and a dark tab bar, because a dark logo with a transparent background can disappear on dark themes. If that happens, add a light outline or a rounded background shape to the SVG, convert again and compare. Small adjustments at this stage make a big difference to how recognisable the site is among many open tabs.