How to Convert PNG to ICO (Favicon Guide)

A favicon is the tiny icon next to your site's title in the browser tab — and the ICO format has been the standard way to deliver it since Internet Explorer 5. If you have a PNG logo and need to convert PNG to ICO, the process takes under a minute once you know the right sizes and tools.

The tricky part is that ICO files are actually containers. A single .ico file can hold multiple images at different resolutions (16x16, 32x32, 48x48, 256x256), and browsers pick the one they need. Most online converters produce a single-size ICO, which works but leaves quality on the table for high-DPI displays and OS icon views.

This guide covers three methods — a browser-based tool, command-line conversion with ImageMagick, and GIMP — then explains the modern favicon setup that pairs ICO with SVG and Apple Touch Icons for full coverage across every browser and device.

What Is an ICO File?

ICO (Windows Icon) is a container format that bundles multiple bitmap images at different resolutions into a single file. Unlike PNG, which stores exactly one image, an ICO file can hold 2, 4, or even 8 variants of the same icon.

When a browser requests favicon.ico, it reads the directory inside the file and selects the resolution that best matches the display context:

• 16x16 — browser tabs, bookmark bars
• 32x32 — Windows taskbar shortcuts, browser tab on Retina/HiDPI
• 48x48 — Windows desktop shortcuts
• 256x256 — Windows Explorer large icon view, high-resolution contexts

Modern ICO files store their embedded images as PNG-compressed data (supported since Windows Vista). This means a multi-size ICO file is surprisingly small — typically 10-30 KB for four sizes, since each embedded image uses PNG compression internally.

One important distinction: ICO is a delivery format, not an editing format. Keep your source artwork as a high-resolution PNG or SVG and generate the ICO from that source whenever you need to update it.

Required ICO Sizes

Not every size is mandatory, but including all four standard sizes ensures your favicon looks sharp everywhere — from a 16px browser tab to a 256px Windows Explorer thumbnail.

Start from a 512x512 or 1024x1024 source PNG. Downscaling preserves detail better than upscaling a 32x32 image. If your source image is not square, resize it to a square aspect ratio before converting.

Method 1 — Pixotter Online Converter

The fastest path: upload your PNG, pick ICO as the output format, and download. No software to install, no account required, and the conversion runs entirely in your browser — your image never leaves your machine.

Steps:

1. Open the Pixotter converter.
2. Drop your PNG file onto the upload area (or click to browse).
3. Select ICO as the output format.
4. Download the converted file.

This works well for single-size favicon creation. For multi-size ICO files containing 16x16, 32x32, 48x48, and 256x256 in one container, use ImageMagick (Method 2) or GIMP (Method 3).

Method 2 — ImageMagick CLI

ImageMagick (Apache 2.0 license) is the standard command-line image processing toolkit. Version 7.1 introduced the magick command that replaces the older convert command.

Install ImageMagick 7.1

macOS (Homebrew):

brew install imagemagick
magick --version
# ImageMagick 7.1.x ...

Ubuntu / Debian:

sudo apt install imagemagick
magick --version

Windows (Chocolatey):

choco install imagemagick
magick --version

Single-Size ICO

Convert a PNG to a single 32x32 ICO:

magick logo.png -resize 32x32 favicon.ico

Multi-Size ICO (Recommended)

Bundle four sizes into one ICO file — this is what you want for production favicons:

magick logo.png \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  \( -clone 0 -resize 256x256 \) \
  -delete 0 \
  -alpha on \
  favicon.ico

This command clones the source image four times, resizes each clone to a different dimension, removes the original full-size image (-delete 0), preserves transparency (-alpha on), and writes all four into a single ICO container.

Verify the ICO contents

Confirm your ICO actually contains the expected sizes:

magick identify favicon.ico

Output should list four entries:

favicon.ico[0] ICO 16x16 ...
favicon.ico[1] ICO 32x32 ...
favicon.ico[2] ICO 48x48 ...
favicon.ico[3] ICO 256x256 ...

If you see only one entry, the multi-size creation did not work — double-check the parentheses escaping in your shell.

Method 3 — GIMP

GIMP 2.10 (GPL-3.0 license) can export ICO files with multiple sizes through its graphical interface. This is a good option if you want visual control over how each size looks before saving.

Steps:

1. Open your PNG source in GIMP 2.10 (File → Open).
2. Scale the image to 256x256: Image → Scale Image → 256 × 256 px → Scale.
3. Create sized layers. You need one layer per icon size:
   • Image → Canvas Size → 256 × 256 (should already be set).
   • Duplicate the layer three times (Layer → Duplicate Layer).
   • Scale each duplicate layer to a target size: select the layer, then Layer → Scale Layer:
     • Layer 1: 16x16
     • Layer 2: 32x32
     • Layer 3: 48x48
     • Layer 4: 256x256 (the original)
4. Export as ICO: File → Export As → filename.ico.
5. In the ICO export dialog, GIMP displays each layer with compression options. For the 256x256 layer, select PNG compression (saves significant file size). For smaller layers, BMP or PNG both work.
6. Click Export.

Tip: If your icon has fine details that degrade at 16x16, manually pixel-edit that layer in GIMP rather than relying on automatic downscaling. A hand-tuned 16x16 favicon almost always looks better than an algorithmically scaled one.

Modern Favicon Setup — ICO, SVG, and Apple Touch Icon

The ICO file handles legacy browsers and Windows. But a complete 2026 favicon setup uses three files to cover every platform:

The HTML

Add these lines inside your <head> tag:

<!-- ICO fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- SVG icon for modern browsers (supports dark mode) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Optional: web app manifest for Android -->
<link rel="manifest" href="/site.webmanifest">

Why SVG matters

An SVG favicon scales to any size without pixelation, and it supports CSS media queries — including prefers-color-scheme. That means your favicon can automatically switch between light and dark variants:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #e0e0e0; }
    }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

If you have an SVG source, you can convert SVG to PNG to generate the Apple Touch Icon and the ICO source image.

The web manifest

For Android and PWA support, create a site.webmanifest file:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Quick checklist

Here is the complete set of files for full favicon coverage:

1. favicon.ico — multi-size ICO (16, 32, 48). Place in your site root.
2. icon.svg — SVG version with optional dark mode support.
3. apple-touch-icon.png — 180x180 PNG. No transparency (iOS fills transparent areas with black).
4. icon-192.png and icon-512.png — for the web manifest (Android, PWAs).

That is five files total. Generate all the PNG variants from your high-resolution source using the Pixotter resize tool, then convert the appropriately sized PNG to ICO using any method above.

FAQ

How do I convert PNG to ICO without losing quality?

Start with a source PNG that is at least 256x256 (512x512 or larger is better). Since ICO stores images at fixed sizes (16x16 through 256x256), the conversion always involves downscaling — and downscaling from a high-resolution source preserves detail better than upscaling a small image. For the 256x256 layer, use PNG compression inside the ICO container (not BMP) to keep the file lossless.

What is the best size for a favicon ICO?

A production favicon should include at least 16x16 and 32x32. Adding 48x48 and 256x256 covers Windows desktop shortcuts and Explorer thumbnails. The multi-size ImageMagick command in Method 2 bundles all four into a single file under 30 KB.

Can I use a PNG directly as a favicon instead of ICO?

Yes. Modern browsers support PNG favicons via <link rel="icon" type="image/png" href="/favicon.png">. However, some older browsers and certain Windows shortcut behaviors still expect favicon.ico in the site root. The safest approach is to serve both: an ICO file at /favicon.ico for legacy support and an SVG or PNG via the <link> tag for modern browsers.

Do I need a 256x256 image in my ICO file?

For websites, 16x16 and 32x32 are sufficient. The 256x256 size matters primarily for Windows desktop applications and when users pin your site as a shortcut in Windows Explorer. If your audience is primarily mobile or macOS, you can skip 256x256 and save a few KB of file size.

Why does my favicon look blurry in Chrome?

Two common causes: (1) your ICO contains only a 16x16 image, and Chrome on a HiDPI display needs 32x32 — it upscales the 16x16 and the result looks soft. Fix: include a 32x32 variant in your ICO file. (2) Your source image has too much detail for 16x16 pixels. At that size, anything more complex than a simple shape or letter becomes mud. Simplify the icon design for small sizes, or hand-edit the 16x16 layer in GIMP 2.10.

What is the maximum file size for a favicon?

There is no hard technical limit, but keep your multi-size ICO under 100 KB. Most well-optimized multi-size favicons (four sizes with PNG compression) land between 10-30 KB. Browsers cache favicons aggressively, so the download cost is paid once, but bloated favicons still slow down the first page load.

How do I test my favicon across browsers?

After deploying your favicon, hard-refresh each browser (Ctrl+Shift+R or Cmd+Shift+R) because browsers cache favicons aggressively. Check the browser tab, bookmarks bar (add a bookmark), and — on Windows — pin the site to the taskbar. For the Apple Touch Icon, add the site to your iOS home screen. The image size reference guide covers required dimensions for each platform.

Summary

To convert PNG to ICO for a production favicon:

1. Start with a high-resolution square PNG (512x512 or larger).
2. Generate a multi-size ICO containing 16x16, 32x32, 48x48, and 256x256 using ImageMagick 7.1, GIMP 2.10, or an online converter.
3. Pair the ICO with an SVG favicon for modern browsers and a 180x180 Apple Touch Icon for iOS.
4. Add the three <link> tags to your HTML <head>.

That setup covers every browser, every OS, and every display density — from a 16px tab icon on a 1080p monitor to a 512px PWA splash screen on a flagship phone.