How to
How to convert SVG to ICO
- Add your SVG. A square logo or symbol works best. Choose the file, drop it on the box, or paste the SVG code.
- Tick the sizes. 16, 32 and 48 pixels for a favicon; add 256 for a Windows icon.
- Choose the background. Transparent suits most favicons. A color gives the icon a solid tile.
- Download the .ico. One file holds every size, and each app picks the one it needs.
Why each size is drawn separately
A 16 pixel icon made by shrinking a 256 pixel image often looks soft and gray, because thin lines fall between pixels. Here every size is drawn from the vector at that exact size, so edges line up with the pixel grid as well as the shapes allow. If a detailed logo still turns to mush at 16 pixels, make a simpler version for the small sizes: the initial or the symbol alone.
Inside the ICO file
The sizes up to 128 pixels are stored as 32-bit bitmaps with an alpha channel, which every version of Windows and every browser reads. The 256 pixel size is stored as a PNG inside the file, the way Windows expects it, which keeps the file small. Non-square drawings are centered on a square canvas.
For a PNG app icon or a touch icon, use SVG to PNG with an exact width, such as 180 pixels for an Apple touch icon.
Questions people ask
Can I convert SVG to ICO for free?
Yes. Drop the SVG here, tick the sizes you want and download the .ico file. It is free, with no sign-up, and the conversion happens in your browser, so your logo is never uploaded. Each size is drawn from the vector, which keeps the small icons crisp instead of shrinking one large image.
What sizes should a favicon.ico contain?
16, 32 and 48 pixels cover browser tabs, bookmarks and the Windows taskbar, and that is the default here. A Windows application or shortcut icon also uses 256 pixels, and 24 and 64 help at some display scaling settings. More sizes make a bigger file, so a website favicon rarely needs more than three.
How do I add a favicon.ico to my website?
Upload the file to the root of your site so it is served at /favicon.ico, which browsers request by default. Then add a link element to the head of your pages: a link with rel set to icon and href set to /favicon.ico. Browsers cache favicons hard, so a new one can take a while to appear.
Do I still need an ICO if my site has an SVG favicon?
Keep one. Most current browsers accept an SVG favicon, but not every browser, app and link preview does, and many tools still ask for /favicon.ico on their own. A common setup lists the SVG icon first and keeps a small favicon.ico at the root as the fallback, both made from the same logo.