Skip to content
Initurn

Convert SVG to ICO

Files never leave your device. All processing happens in your browser.

How to convert SVG to ICO

  1. 1

    Drop in your SVG logo or icon.

  2. 2

    Six sizes are rendered from the vector and packed into one file.

  3. 3

    Download favicon.ico and put it at the root of your site.

Starting from an SVG is the best possible way to make a favicon, and it is worth understanding why. An ICO holds the same icon at several sizes. When the source is a bitmap, the small sizes are made by shrinking a large one. When the source is a vector, each size can be drawn from scratch at exactly the resolution it needs — no downscaling, no softening.

Rendered, not resampled

That distinction shows up most at 16 pixels, which is the size in a browser tab and therefore the one nearly everyone actually sees. A 16-pixel icon squeezed down from a 512-pixel PNG has soft, muddy edges because every original edge lands between pixels. The same icon drawn directly at 16 pixels puts its strokes on the pixel grid and stays crisp. This tool renders all six sizes from your vector independently for exactly that reason.

What you get

One .ico containing 16, 32, 48, 64, 128 and 256 pixel versions, each stored as PNG data with transparency intact. 256 is the ceiling the format allows. Put it at the root of your site as favicon.ico — browsers request that path on their own even with no markup pointing at it.

Design for the smallest size

  • Simplify hard. A 16-pixel square is 256 pixels in total; fine detail, gradients and thin strokes all disappear.
  • Most effective favicons are one letter or a single bold shape, often a cropped fragment of the full logo rather than the whole thing.
  • Use a square viewBox. A wide logo gets fitted inside the square and centred, leaving empty space above and below.
  • Check contrast against both light and dark browser chrome, since transparency means the tab colour shows through.

Make the SVG self-contained first

External references will not resolve. If the file links to a web font, an external stylesheet, or a bitmap sitting on a server, none of it loads — no network requests are made during conversion, by design. Text set in a linked font is the usual casualty. Convert text to outlines in your vector editor before exporting, which is good practice for logos anyway.

Serve the SVG too

Current browsers accept an SVG favicon directly, and it stays perfectly sharp at any size on any display. The sensible arrangement is to declare the SVG for browsers that take it and keep this ICO alongside for the automatic /favicon.ico request, older browsers, and Windows pinned shortcuts. An SVG favicon can also respond to the browser’s dark mode using a media query inside the file, which no ICO can do.

Rendering uses your browser’s own SVG engine and the container is written byte by byte in this tab. Nothing is uploaded, so an unreleased brand mark stays on your machine.

Questions about SVG to ICO

Why is an SVG a better source than a PNG for a favicon?

Because each size can be drawn directly from the vector at its exact resolution instead of being shrunk from a larger bitmap. The difference is clearest at 16 pixels, where downscaled artwork goes soft and a fresh render stays crisp.

What sizes are included?

16, 32, 48, 64, 128 and 256 pixels square, each rendered independently from your SVG and stored with transparency. 256 is the largest size the ICO format can describe.

Where does the file go?

At the root of your site as favicon.ico. Browsers fetch that path automatically, so it works even if your HTML has no icon link tag.

My logo is wide, not square. What happens?

It is fitted inside the square and centred, so you get transparent space above and below. For a favicon it is usually better to design a square mark — often just the first letter or a fragment of the full logo.

The text in my SVG vanished. Why?

It relies on a font that is not embedded in the file, and external resources cannot be fetched during conversion. Convert text to outlines in your editor before exporting and it will render exactly as designed.

Should I also serve an SVG favicon?

Yes, modern browsers support one and it stays sharp at any size. Keep the ICO as well for the automatic /favicon.ico request, older browsers and Windows pinned shortcuts.

Related converters