SVG to ICO Converter — Make a Favicon from an SVG
Drop a square SVG below and pick ICOas the output format. You get a 32 × 32 favicon.ico with transparency intact — free, private, and entirely in your browser with no upload required.
Drop images here or click to browse
Supports HEIC, WEBP, AVIF, BMP, TIFF, SVG, GIF, ICO, PDF, JPG, PNG
100% Private — Your files never leave your device
All conversion happens directly in your browser using JavaScript. Nothing is uploaded to any server. Your images stay on your computer the entire time.
How to Create a Favicon from an SVG
Two of these five steps happen before you touch the converter, and they are the two that decide whether the favicon looks good.
- Make the SVG square. Give the root element a square
viewBoxand equalwidthandheight, padding the artwork with transparent space if the logo itself is wider than it is tall. A non-square SVG is squeezed into the square icon box, not letterboxed. - Declare a large size. Set
widthandheightto 256 or more. The SVG is rasterized at whatever size it declares and only then resized to 32 × 32, so a big canvas downsamples sharply while a small one is upscaled into mush. - Drag the SVG into the drop zone, or click to browse and select it.
- Choose ICO from the Output Format menu. There is no quality slider — the resized icon is stored as a lossless PNG.
- Download the file, rename it
favicon.ico, and upload it to your site's root directory.
For most sites that is genuinely the end of it. Browsers request /favicon.ico on their own even when the HTML says nothing about it, so a file sitting at yourdomain.com/favicon.ico is picked up without any markup. Add a tag only when you want to serve the icon from another path:
<link rel="icon" href="/favicon.ico" sizes="any">If you also want the SVG itself served to browsers that accept one, ship both and let each browser choose. The sizes="any" on the ICO is what stops modern browsers downloading it as well as the SVG:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Nothing is uploaded — the browser rasterizes the SVG and assembles the ICO on your own machine. Drop several SVGs at once and take them away together as a ZIP.
ICO File Size Requirements for Windows and the Web
An ICO is a container. It holds one or more images at different sizes, each stored either as an uncompressed bitmap or, since Windows Vista, as a PNG. Every dimension is written as a single byte in the directory header, which sets the ceiling: an icon can be anywhere from 1 × 1 up to 256 × 256, and a stored zero is read as 256. There is no size below or above that the format will accept.
Which sizes are worth including depends on where the icon shows up:
| Size | Where it is used |
|---|---|
| 16 × 16 | Browser tab and address bar on a standard-density display; Windows title bars and the taskbar |
| 32 × 32 | Browser tab on a 2× display; the Windows desktop at its default icon size |
| 48 × 48 | Windows Explorer at medium icons |
| 256 × 256 | Windows Explorer at extra large icons; the largest the format allows |
This converter writes a single 32 × 32 entry, and for a website that is the right one number to pick. A browser tab is 16 CSS pixels wide, so a 2× display needs 32 device pixels to draw it without softness, and a 1× display downscales the same image to 16 without trouble. The old advice to bundle a hand-drawn 16 × 16 earned its keep when most screens were 1× and every pixel was placed by hand; build that in a desktop icon editor if your icon needs it.
Google's own requirement for showing a favicon in search results is looser than people assume: the icon must be square and at least 8 × 8 pixels, and Google recommends going larger than 48 × 48 so it holds up across surfaces. Any valid favicon format is accepted — ICO is not privileged.
Byte size is not constrained by the spec, and it barely needs to be here. The file this tool produces is a 22-byte header followed by a single PNG of a 32-pixel square, so it lands in the low kilobytes. That is worth caring about only because the favicon is fetched on essentially every page load.
SVG vs ICO for Favicons
The honest answer is that this is not a choice — you ship both, and each covers the other's weakness. But it is worth understanding what you gain and give up, because the two formats fail in opposite directions.
SVG wins on fidelity.It is resolution independent, so it is sharp on a 3× phone and in a browser that decides to render the icon at 64 pixels, from one small file. It can also do something ICO cannot: a prefers-color-scheme media query inside the SVG lets the icon recolour itself for dark mode, so a black logo can turn white when the browser chrome does. A raster icon is stuck with the colours it was drawn in.
ICO wins on reach. Per caniuse.com, SVG favicons sit at roughly 89% of global browser traffic — Chrome and Edge since version 80, Firefox since 41, but desktop Safari only since version 26, and Safari on iOS is still listed as not supporting them at all. A browser that does not understand an SVG favicon shows no icon rather than a fallback one, unless you have given it a fallback to find. ICO is understood by every browser ever shipped, and it is the file that a bare request to /favicon.ico expects. It is also the format Windows itself uses for shortcuts and application icons, which an SVG cannot serve at all.
There is a second reason ICO earns its place. An SVG rendered at 16 or 32 pixels is rendered by a general-purpose vector rasterizer that knows nothing about your artwork, and fine strokes blur or disappear. Converting to a raster icon fixes the appearance at the size that actually matters, and lets you check it looks right before you ship it. Vector scalability is a promise about arbitrary sizes; a favicon is drawn at one or two.
So: keep the SVG as the master, link it for the browsers that take it, and generate the ICO here for everything else. If you need other raster sizes from the same file — an Apple touch icon, an Open Graph image — use SVG to PNG, which is lossless and keeps the alpha channel, or SVG to JPG where transparency is not wanted. To choose a format by where the image is going rather than by habit, the image format by use case guide walks through each one.
What This Converter Actually Does
Three steps, and knowing them explains every surprise on this page. The browser rasterizesthe SVG onto a canvas at the width and height declared on its root element, falling back to 1024 × 1024 when the file declares no intrinsic size. That happens in the browser's restricted image mode, which blocks scripts and external references — local fonts render, a webfont loaded by URL does not.
Those pixels are then resized to 32 × 32, stretched rather than letterboxed if the source was not square, and encoded as a 32-bit RGBA PNG so the alpha channel survives.
Finally the PNG is wrapped in an ICO container— a 22-byte header naming one 32 × 32 image at 32 bits per pixel, followed by the PNG itself. PNG-compressed icons have been readable since Windows Vista and are read by every current browser. Going the other way, ICO to PNG unwraps an existing icon.
Frequently Asked Questions
How do I create a favicon from an SVG?
Make the SVG square first, then drop it above and choose ICO as the output format. Download the file, rename it favicon.ico, and put it in your site's root directory so it sits at yourdomain.com/favicon.ico. Browsers request that path on their own even with no HTML at all, so for most sites renaming and uploading is the entire job. Add a link rel="icon" tag if you want to serve the icon from a different path or pair it with an SVG favicon.
What size ICO does this converter produce?
A single 32×32 image, every time, regardless of how large the SVG is. Thirty-two pixels is the working size for a browser tab: a tab is 16 CSS pixels wide, so a 2× display needs 32 device pixels to draw it sharply, and a 1× display downscales the same image to 16 cleanly. The icon is stored as a 32-bit RGBA PNG inside the ICO container, preceded by a 22-byte header.
Can an ICO file hold more than one size, and can this tool make one?
The format holds as many images as you like — that is the whole point of ICO, and a classic favicon.ico bundles 16×16, 32×32 and 48×48 so each context can pick what it needs. This converter writes one 32×32 entry and does not build multi-size files. In practice that is enough for browser tabs, because they downscale 32 to 16 perfectly well. Build a multi-size ICO in a desktop icon editor when you want to hand-tune the 16×16 art pixel by pixel, or when the icon has to look right as a Windows desktop shortcut at several view sizes.
Why does my icon come out squashed or stretched?
Because the source SVG is not square. The converter fits whatever you give it into a 32×32 box without preserving the aspect ratio, so an 800×600 SVG is squeezed horizontally rather than letterboxed. Fix it in the SVG, not afterwards: give the root element a square viewBox and equal width and height, padding the artwork with transparent space if the logo itself is not square. Icons are square in every format and every operating system, so this is worth getting right at the source.
Why is my favicon blurry or soft?
Usually because the SVG declares a size smaller than 32 pixels. The converter rasterizes the SVG at the width and height on its root element and only then resizes to 32×32, so an SVG that opens with width="16" is drawn at 16×16 and then upscaled — and upscaling invents detail that was never there. Set the root width and height to 256 or larger before converting. An SVG with a viewBox and no intrinsic size at all is rasterized at 1024×1024, which downsamples beautifully. The other cause is simply detail: a wordmark or a thin hairline will not survive 32 pixels no matter how it is rendered. Redraw the icon as a bold, simple shape.
Is transparency preserved when converting SVG to ICO?
Yes. The image inside the ICO is a 32-bit RGBA PNG, so a logo on a transparent background keeps that background and sits cleanly on a light or dark browser tab. This is a real advantage over SVG to JPG, where JPEG has no alpha channel and transparent areas are flattened onto a solid colour.
Will fonts and external images inside my SVG render?
Fonts installed on your computer will render; a webfont the SVG links to by URL will not. Browsers load SVGs inside an image element in a restricted mode that blocks external references and scripts, and this converter uses that path, so a linked stylesheet, a remote bitmap, or an @font-face pointing at a font server is ignored and text falls back to a system font. Convert text to outlines in your editor before exporting. At 32 pixels this rarely matters — text is illegible at favicon size anyway.
Should I use an SVG favicon instead of an ICO?
Use both. An SVG favicon stays sharp at any size and can even respond to dark mode, but per caniuse.com SVG favicons sit at roughly 89% global support: desktop Safari only gained them in version 26, and Safari on iOS is still listed as not supporting them. ICO is understood by everything ever shipped. Link the SVG for browsers that take it and keep favicon.ico as the fallback — the two lines of markup are shown above.
Will this ICO work on older Windows versions?
It works on Windows Vista and anything newer. The image inside the file is PNG-compressed, and support for PNG frames inside ICO arrived in Vista; software older than that expects an uncompressed bitmap and will not read the icon. Every browser in current use reads PNG-compressed ICO files without complaint.
Are my files uploaded to a server?
No. The browser rasterizes the SVG on a canvas and the ICO is assembled byte by byte in memory on your machine. Nothing is uploaded, which matters when the artwork is an unreleased logo or a client's. The converter is free, with no sign-up, watermarks, or file limits.