logoredraws.com

How to Convert a Favicon to ICO (Including Dark Mode Considerations)

Convert favicon artwork to a multi-size ICO file: prepare the vector logo, export each size, pack the ICO, add a dark mode SVG variant and verify the result.

Published

Contents
  1. What you need before you start
  2. Step 1: Prepare the vector artwork for small sizes
  3. Step 2: Decide how the ICO handles dark mode
  4. Step 3: Export a PNG for each size
  5. Step 4: Pack the PNGs into an ICO file
  6. Step 5: Add an SVG variant for dark mode
  7. How to confirm the result
  8. Gaps to check for your own setup

To convert a favicon to ICO, export your logo as separate square raster images at the sizes you need, then pack those images into one .ico file with an image editor or a command-line tool. An ICO file is a container that holds one or more bitmap images at different pixel dimensions. Browsers and operating systems pick the size that fits the context. Because ICO holds pixels rather than paths, the conversion is always a rasterization step. Start from your vector master, the logo built from mathematically defined paths, so that every size is rendered cleanly instead of being scaled down from a single bitmap.

The dark mode question shapes the artwork more than the conversion itself. An ICO file is static and cannot switch colors when the browser or operating system uses a dark theme. If your mark needs a dark-theme variant, keep the ICO as a fallback that reads acceptably on both light and dark tab backgrounds. Then deliver the adaptive version as an SVG favicon.

What you need before you start

  • A vector master of the logo or a dedicated favicon mark (for example SVG, AI, EPS or PDF), plus confirmation that you are permitted to use it. A file extension alone does not prove the file contains only vector paths, that it is editable, or that you have reuse rights.
  • A simplified, square version of the mark. Full logos with wordmarks rarely survive at tab-icon sizes, so a symbol, monogram or single initial usually works better.
  • A decision on how the icon should look on light and dark backgrounds.
  • A tool that can write ICO files, such as an image editor with ICO export, a command-line utility like ImageMagick, or a converter service. If you use an online converter, remember that you are uploading the artwork to a third party, which matters for unreleased or confidential logos.

Step 1: Prepare the vector artwork for small sizes

  • Place the mark on a square artboard and leave a small, consistent margin so it does not touch the edges.
  • Convert any live text to outlines, meaning shapes rather than editable font characters. This removes the dependency on installed fonts and lets you adjust letterforms directly.
  • Remove fine details, thin strokes and small counters (the enclosed spaces inside letters like o or e) that will fill in at small sizes. Thicken strokes or merge shapes where needed.
  • Convert strokes to filled paths and unite overlapping shapes, so the exported result does not depend on stroke rendering settings.
  • Align key edges to whole-pixel boundaries at your smallest target size. This keeps horizontal and vertical edges crisp instead of blurred across two pixel rows.

Step 2: Decide how the ICO handles dark mode

Since the ICO cannot adapt, test the mark against both a light and a dark background before exporting. A dark mark on a transparent background can disappear on a dark tab bar, and a light mark can disappear on a light one. Two common design approaches keep a single static icon legible in both contexts:

  • Put the mark on a solid filled tile, such as a rounded square in a brand color, so the icon brings its own contrast.
  • Add a thin contrasting keyline or halo around the mark so its edge stays visible on either background.

These are design recommendations, not format requirements. Choose the one that suits the brand, and keep the separate light and dark color versions in your vector file for the SVG variant described below.

Step 3: Export a PNG for each size

Export the prepared artwork as PNG with transparency (32-bit RGBA) at each size you plan to include. Sizes of 16×16, 32×32 and 48×48 pixels are commonly bundled in a favicon ICO. Treat that as convention rather than a fixed rule, and check the requirements of the platforms you target. Render each size from the vector master instead of shrinking the largest PNG. Review the 16-pixel version separately, because it often needs manual tweaks such as heavier strokes or dropped details.

Step 4: Pack the PNGs into an ICO file

Most raster editors that support ICO let you open or layer the size variants and export them as a single icon file. With ImageMagick you can combine the prepared PNGs from the command line. Command names depend on the installed version: ImageMagick 7 uses the magick command, while version 6 uses convert. Confirm the syntax against the documentation for the version you have.

# ImageMagick 7: combine hand-tuned PNGs into one ICO
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

# Alternative: generate sizes automatically from one large PNG
# (faster, but skips per-size hand tuning)
magick favicon-512.png -define icon:auto-resize=16,32,48 favicon.ico

Renaming a PNG file to .ico does not convert it. The file must actually be written in the ICO format by a tool that supports it.

Step 5: Add an SVG variant for dark mode

For an icon that switches with the color scheme, export an SVG favicon and add a CSS media query for prefers-color-scheme inside it. Keep the file simple: plain filled paths with no embedded raster images and no external font references. The root svg element also needs the standard SVG namespace attribute, which most editors write automatically on export. It is shown as a placeholder below.

<svg xmlns="…" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f2f2f2; }
    }
  </style>
  <path class="mark" d="…"/>
</svg>

Reference both files in the page head so browsers that support SVG favicons can use the adaptive version, while others fall back to the ICO. Browser support for SVG favicons and for color-scheme queries inside them varies and changes over time. Check current support for the browsers your audience uses rather than assuming the dark variant will appear everywhere.

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
Format | Holds | Adapts to dark mode | Typical role
ICO | One or more bitmaps at fixed sizes | No | Broad-compatibility fallback
PNG | One bitmap at one size | No | Single-size icons and app icons
SVG | Vector paths, optionally with CSS | Yes, via prefers-color-scheme where supported | Scalable, theme-aware favicon

How to confirm the result

  • Check that the ICO contains every size you packed. With ImageMagick 7, run: magick identify favicon.ico (version 6 uses identify favicon.ico). Each embedded image should appear with its dimensions.
  • Open the ICO in an image viewer or editor and confirm that transparency is preserved and edges are not blurred or haloed.
  • Load the site in a browser and look at the tab icon with the browser or operating system set to light theme, then dark theme. The ICO should stay legible in both, and the SVG should switch colors where it is supported.
  • If an old icon still appears, clear the browser cache or test in a private window. Browsers cache favicons aggressively.
  • Compare the 16-pixel rendering against the logo at full size to confirm the mark is still recognizable.

Gaps to check for your own setup

This guide does not cover a specific design application or version, so menu names and export options in your editor may differ. Check them in that application's documentation. No measured data on legibility, file size or browser support was available. Size recommendations are common conventions, and current SVG favicon support should be verified for your target browsers before you rely on the dark mode variant.