Image Converters002

SVG to ICO Converter

Turn an SVG logo into a favicon.ico that holds every size you need, each one drawn sharp from the vector.

Sizes in the ICO

02 — Output (every size in the ICO)

Preview surface

The icon sizes appear here.

Open or drop an SVG file, or paste SVG markup

Processed locally · 0 bytes sent

How to convert SVG to ICO

  1. Drop an .svg file on the input or click it to choose one. You can also copy SVG markup and paste it anywhere on the page.
  2. Tick the sizes the ICO should hold. 16, 32 and 48 px, the classic favicon set, are ticked to start with; add 64, 128 or 256 px for Windows shortcuts and high-density screens.
  3. Check the preview strip, which shows every size the ICO will hold, side by side. Switch it to the dark surface to check a light logo.
  4. Click Download ICO. The file is named after the SVG, so logo.svg downloads as logo.ico; pasted markup downloads as image.ico.

Why use this tool

  • A favicon for a website

    Save the ICO as favicon.ico at the root of the site. One file with 16, 32 and 48 px covers browser tabs, bookmarks and shortcuts, and tools that only look for /favicon.ico find it too.

  • Windows app and shortcut icons

    Windows uses ICO files for program and shortcut icons. Add 128 and 256 px so the icon stays sharp in large icon views and on high-DPI displays.

  • Icons copied from an icon set

    Copied an icon’s markup from an icon library, a design tool or your codebase? Paste it anywhere on the page and download an ICO, without saving an .svg file first.

Private by design

Your files are decoded and converted in this browser tab and never uploaded, so client artwork and unreleased designs stay on your device. No account and no watermark.

Good to know

Each size is drawn from the vector. The SVG is redrawn at every size you tick rather than shrunk from one large image, so even 16 px is as crisp as your browser can draw it. Fine detail can still blur at 16 px; the preview strip shows every size in the file, so you can judge before you download.

Icons are square. The tool reads the SVG's proportions from its viewBox, or from its width and height in pixels, and centres a drawing that is not square in each icon, leaving transparent space at the sides or above and below (unless the SVG sets its own preserveAspectRatio). A notice says when that happens. An SVG with no usable viewBox that does not give both its width and its height in pixels is treated as 512 × 512 px, also with a notice.

What is inside the file. Each size is stored as a 32-bit PNG with transparency inside the ICO. Current browsers, Windows Vista and later, and macOS read ICO files built this way; some very old programs only understand the older bitmap-based ICO entries.

Fonts and linked files. Browsers do not let an SVG drawn as an image load anything from outside the file, so web fonts, linked images and external stylesheets are left out and text uses a font installed on your device. Fonts and images embedded as data: URLs still work. The tool shows a notice when the SVG would load a font, an image or a stylesheet from a web address, and it never fetches those addresses.

Limits. Sizes go from 16 to 256 px; 256 × 256 px is the largest image an ICO entry can describe. Files over 50 MB get a warning. Scripts inside an SVG do not run, and an animated SVG gives a single still image.

Example

In — Sizes ticked

16, 32 and 48 px

Out — ICO header (first 6 bytes)

00 00 01 00 03 00

Frequently asked questions

Which sizes should a favicon.ico contain?

16, 32 and 48 px cover browser tabs, bookmarks and shortcuts, which is why they are ticked when the page opens. Add 64, 128 or 256 px when the same file is used as a Windows program or shortcut icon. Each extra size makes the file a little larger.

Do I still need an ICO if my site has an SVG favicon?

Current browsers accept an SVG favicon declared with a link tag, but some browsers, feed readers and other tools only look for /favicon.ico. Keeping a small ICO beside the SVG covers them, and the PNG to ICO page shows the two link tags to use.

Why is there empty space around my icon?

Your SVG is not square. ICO images are square, so the tool scales the drawing to fit and centres it, leaving transparent space on the shorter sides. Crop the artwork to a square viewBox in your design tool if you want it to fill the icon.

Why does the text in my icon use a different font?

The SVG loads its font from the web. Browsers do not load anything from outside an SVG that is drawn as an image, so the text falls back to a font on your device. Convert the text to outlines, or embed the font in the SVG, before converting.

Is my SVG uploaded anywhere?

No. The file or the markup you paste is read and drawn in this browser tab, and the ICO is built there too. Nothing is sent to a server, and web addresses inside the SVG are not fetched.