PLOTCASTER Open the tool

SVG to ICO converter

Choose an SVG, tick the sizes you want inside the icon, and download one .ico file. Made for favicons and Windows icons.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

or drop it here, or paste. SVG code works too

How to make a favicon.ico from an SVG

  1. Choose your SVG, drop it on the box, or paste SVG code.
  2. Tick the sizes to include. 16, 32 and 48 are the usual set for a website.
  3. Download the .ico and put it at the root of your site as favicon.ico.

What is inside the file

An .ico file is a container for several pictures of the same icon at different sizes, and the browser or Windows picks the one it needs. This tool draws your SVG separately at each size you tick, straight from the vector, so the 16 pixel icon is drawn for 16 pixels and not shrunk from a larger one.

Each size is stored as a 32-bit PNG with transparency, the form all current browsers and every version of Windows since Vista read. If the SVG is not square, it is centred on a square with transparent margins.

Which sizes you need

  • 16 × 16: browser tabs on ordinary screens.
  • 32 × 32: tabs on high-density screens, and the Windows taskbar.
  • 48 × 48: Windows desktop shortcuts.
  • 64, 128 and 256: large icon views in Windows. Worth adding for an application icon, unnecessary for a website.

Using it on a website

Browsers look for /favicon.ico on their own, so putting the file there is enough. To be explicit, add <link rel="icon" href="/favicon.ico" sizes="any"> to the page’s head. Chrome, Edge and Firefox can also use the SVG itself: <link rel="icon" href="/icon.svg" type="image/svg+xml">. Keep the .ico as the fallback every browser understands.

Questions

My icon looks blurry at 16 pixels. What can I do?

Sixteen pixels is very little. Fine lines and small text cannot survive at that size however they are drawn. Use a simpler version of the mark for the icon: one bold shape, thick strokes, no text.

Can I add a background colour?

Not here: the icon keeps the SVG’s transparency. If you want a solid tile, add a filled rectangle or circle behind the drawing in the SVG first.

Does it work for Windows application icons?

Yes. Tick all six sizes, up to 256 × 256, and Windows will choose the right one for each view.

Related