How to Convert PNG to ICO for Favicons

The cleanest way to convert a PNG to an ICO favicon is to feed a square PNG — ideally 512×512 with a transparent background — into a generator that writes a multi-size favicon.ico bundling 16×16, 32×32 and 48×48, then drop that file in your site’s root. The browser picks whichever size each surface needs, so one file stays sharp in a tab, a Retina tab and a Windows shortcut. You don’t hand-export three separate icons, and you don’t open Photoshop.

In one line: convert one square PNG into a single .ico that holds 16/32/48, then put it at /favicon.ico.

If you only take one thing from this page: the file must be multi-size. A .ico containing a single bitmap is the most common conversion mistake, and it’s why some favicons look crisp in one place and blurry in another.

Why keep favicon.ico at all in 2026?

The SVG is the modern primary icon, so it’s fair to ask why .ico survives. Two reasons keep it on every production site:

• Browsers auto-request it. Every browser looks for /favicon.ico in your site root even when your HTML never references it. No file there means a steady trickle of 404s in your access logs and a blank icon on clients that fall back to the convention.
• It’s Google’s SERP fallback. When Google can’t read a better icon, the favicon.ico is what shows next to your listing in search results. That’s why the bundled sizes should include at least 32×32.

So .ico isn’t the star anymore — it’s the safety net. Pair it with a favicon.svg and you’ve covered both legacy and modern. For the full case on whether you still need one, see the favicon.ico generator guide.

What “multi-size ICO” actually means

The .ico extension is a Microsoft icon format, and its defining trick is that a single file can store several square images at once. A proper favicon .ico holds three frames:

Bundled size	Where it’s used
16×16	Standard-resolution browser tabs, address bar
32×32	High-DPI (Retina) tabs, Google’s search-result fallback
48×48	Windows desktop shortcuts, some taskbar contexts

When a browser needs a favicon, it opens the .ico, reads the directory of available sizes, and picks the closest match. A single-size .ico (just 16×16, say) forces the browser to upscale that one frame to 32×32 on a Retina display — which is exactly the soft, fuzzy edge people complain about. Bundling 16/32/48 is the whole point of the format.

Three ways to convert PNG to ICO, compared

You have three realistic methods. They differ mostly in how much of the rest of the favicon set they hand you.

Method	How it works	Trade-offs
Online generator	Upload one square PNG; download a ready package	Fastest. Writes a correct multi-size .ico and the rest of the modern set (SVG, Apple touch, PWA icons, manifest, HTML). No install.
ImageMagick (convert)	One terminal command, scriptable in CI	Precise and repeatable. Gives you only the .ico — you still need to produce the SVG, Apple touch and PWA icons separately.
GIMP / Photoshop export	Open the PNG, scale layers, export as .ico	Full manual control. Slow and error-prone; easy to forget a frame and ship a single-size file. Photoshop needs an ICO plugin.

For most people the online generator wins because the multi-size .ico is the easy part — the fiddly part is the opaque-padded Apple touch icon and the padded maskable PWA icon, and a generator produces those too.

FaviconBuilder takes one upload (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs the multi-size favicon.ico plus the complete modern set — favicon.svg, the 180×180 Apple touch icon, the 192/512 PWA icons, the manifest, and the exact HTML to paste. It’s free, needs no account, and the image never leaves your browser.

The ImageMagick command

If you’d rather script it, ImageMagick converts a PNG to a multi-size .ico in one line:

convert logo.png -define icon:auto-resize=16,32,48 favicon.ico

On ImageMagick 7 use magick in place of convert. The icon:auto-resize values become the bitmap sizes bundled inside the .ico, so this command produces exactly the 16/32/48 set you want. Start from a 512×512 source so each downscaled frame stays sharp.

To confirm the result actually contains multiple sizes:

identify favicon.ico

The output lists one line per embedded frame. If you see only one, the file is single-size — re-run the convert command.

Preserving transparency through the conversion

The .ico format supports an alpha channel, so a transparent PNG converts to a transparent favicon.ico — the rounded or irregular edges of your logo stay clean against any tab colour. Two things protect that transparency:

1. Keep the source PNG transparent and in sRGB. Flatten nothing before converting. If your PNG carries a P3 or Adobe RGB profile, colours can shift when the icon is written; export as sRGB first.
2. Don’t add a background “just in case.” A solid white square behind a transparent logo looks fine on a white tab and wrong everywhere else.

The one icon that must not be transparent is the Apple touch icon — iOS composites it onto the home screen and a transparent background turns black. That’s a separate file, though, not your .ico. Full detail in the transparent favicons guide.

Common mistakes when converting PNG to ICO

Three errors account for almost every bad result:

• Single-size .ico. The file holds one bitmap, so the browser upscales it on Retina tabs and Windows shortcuts. Always bundle 16/32/48. Verify with identify favicon.ico.
• Upscaling a tiny PNG. Converting a 64×64 or 128×128 PNG into 32×32 and 48×48 frames is fine; converting a 32×32 PNG up to fill 48×48 produces mush. Start from 512×512 and only ever downscale.
• A non-square source. A rectangular PNG gets squashed or letterboxed into the square .ico frame. Crop or pad to a square before converting, not after.

A fourth, quieter mistake: leaving complex detail or tiny text in the artwork. At 16×16 it becomes noise. Simplify the logo for icon size first — the favicon design best practices guide covers how.

Where to put the file and how to reference it

Drop favicon.ico in your site’s root so it’s served at /favicon.ico (in Astro, Next.js and most static setups, that means the public/ directory). Then reference it alongside the SVG:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Never use rel="shortcut icon" — it’s not a valid relation and modern browsers ignore the “shortcut” part anyway. The sizes="32x32" hint tells the browser the .ico carries that frame. For the full tag-by-tag breakdown, see the favicon HTML reference.

Summary

Converting a PNG to an ICO favicon comes down to one rule: produce a multi-size .ico, not a single bitmap.

• Start square and large — a 512×512 transparent PNG in sRGB.
• Bundle 16/32/48 — via a generator or convert logo.png -define icon:auto-resize=16,32,48 favicon.ico.
• Verify with identify favicon.ico so you know it’s not single-size.
• Keep transparency in the .ico; only the Apple touch icon must be opaque.
• Drop it at /favicon.ico and reference it with rel="icon", never rel="shortcut icon".

The .ico is one file in a larger set. A generator writes it and the SVG, Apple touch and PWA icons in one pass — which is faster and harder to get wrong than converting by hand.

Continue reading:

• Favicon.ico Generator: Do You Still Need It?
• How to Create Transparent Favicons (PNG & ICO)
• Favicon Sizes & Dimensions: Every Size You Need
• How to Add a Favicon in HTML (Step-by-Step)