Image Tools·5 min read

ICO Format Explained: Favicons and Multi Size ICO

A favicon looks like the simplest asset on a website, one tiny image, until you learn it usually isn't one image at all. Here's the ico format explained properly: .ico is a container holding several resolutions of the same icon, and the operating system or browser picks whichever fits the moment. Get the container right and your icon stays sharp everywhere from a cramped browser tab to a Windows desktop shortcut. Get it wrong and it looks smeared exactly where people see it most.

Open the tool All insights

ICO format explained: a directory of icons in one file

Structure first, pixels second.

An .ico file starts with a six byte header, followed by a directory: one sixteen byte entry per embedded image recording its width, height, bit depth, byte size, and offset. After the directory come the actual image payloads, which in modern ICO files are PNG compressed with a full 32 bit alpha channel.

That directory is what separates ICO from every ordinary image format. A consumer reads the entries, compares them against the size it needs to draw, and decodes only the best match. Nothing gets scaled unless no exact match exists, which is precisely why a well built ICO looks crisp at every size while a single scaled bitmap doesn't.

Why favicons still ship as ICO files

Thirty years of inertia, some of it justified.

Browsers have supported PNG favicons through link tags for years, so why does the old container survive? Because /favicon.ico is the universal fallback. When no icon markup exists, or a feed reader, bookmark service, or corporate proxy wants an icon, they request that exact path by convention and expect the real format.

Windows keeps the format alive too. Pinned sites, desktop shortcuts, and older application integrations resolve icons through code paths that predate PNG favicons entirely. Shipping a proper ICO at the site root costs a few kilobytes and closes every one of those gaps at once, which is why essentially every major site still does it.

From logo.png to favicon.ico: a worked ICO build

Three checkboxes and one button.

Start with logo.png, a square 512x512 export of your mark. Upload it to the ICO Converter, then look at the Sizes to include checkboxes. For a lean favicon, keep 16x16, 32x32, and 48x48 checked and untick the rest. The button updates to read Build ICO (3 sizes).

Click it, and each size is rendered from your source with high quality smoothing, packed behind a three entry directory, and downloaded as logo.ico. Rename it favicon.ico, drop it in your site root, and optionally declare it with a link rel icon tag. Browser tabs read the 16 pixel entry, bookmark surfaces take the 32, and Windows shortcuts grab the 48.

Multi size ICO files: choosing what goes inside

More entries isn't automatically better.

The working rule for multi size ico files is to include the sizes a real consumer will request and nothing else. The 16, 32, and 48 pixel trio covers tabs, bookmark bars, and desktop shortcuts, which is the overwhelming majority of favicon traffic. The 64 pixel entry is a cheap addition for larger shortcut views.

The 128 and 256 pixel entries are situational. They fatten the file for every visitor whose browser downloads /favicon.ico, and their main audience is high DPI desktop contexts that many sites serve better with separate PNG icons anyway. Add them for a web app people pin to their desktop; skip them for a content site.

ICO building mistakes that blur your icon

The usual suspects behind fuzzy favicons.

A few errors account for nearly every bad favicon:

Starting from a rectangular source. Every ICO entry is square, so a wide logo gets stretched; crop or pad the artwork to a square first.
Feeding in detailed artwork and hoping. Thin strokes and small lettering vanish at 16x16 no matter how good the scaler is; design a simplified small size mark.
Renaming a PNG to favicon.ico. Some consumers sniff the bytes and cope, others expect a genuine directory and fail, and you won't control which your visitors use.
Only ever checking the icon at full size. The version people see all day is 16 pixels wide, so judge the design there.
Using a JPG source and losing the transparent background, leaving the icon boxed in a white square on dark browser themes.

Tips for ICO icons that stay sharp at 16 pixels

Design for the smallest entry.

First tip: build two versions of your mark, a detailed one and a stripped down glyph, and generate the ICO from the glyph. Brands do this constantly, and nobody notices the simplification at tab size, only the clarity. Second: keep strong contrast between the icon and both light and dark backgrounds, since browser themes will put your icon on each.

Third: after downloading, zoom your OS file preview to inspect each embedded resolution, or just load the site and stare at the tab. Thirty seconds of checking beats shipping a smudge to every visitor's tab bar.

ICO vs PNG favicons, and the tools around this one

When the container wins and when it doesn't.

The honest answer on ico vs png favicons: modern browsers are equally happy with a PNG declared in markup, and PNG files are simpler to produce. ICO wins wherever markup isn't consulted, meaning the automatic /favicon.ico request, legacy clients, and Windows integrations. Serving both costs nothing and covers everything.

If you want the whole favicon set generated in one pass, sizes, PNG variants, and a ready made ZIP, use the Favicon Generator instead of assembling pieces by hand. Need the source artwork squared or scaled before conversion? The Image Resizer takes care of that in the browser too.

How to change PNG to ICO for a desktop shortcut

Custom icons still want ICO.

Custom shortcut and app icons on Windows still want the ICO format, so here's how to change png to ico for one. Upload your PNG, then use the size checkboxes to pick what the icon needs; for a desktop shortcut, 16, 32, 48, and 256 covers small list views up through large icon view.

Press Build ICO and the file downloads with your original name and an .ico extension. Point the shortcut's Change Icon dialog at that file and Windows pulls the right size for each spot automatically. Start from a square PNG so nothing stretches, and keep the artwork simple, because fine detail blurs once it shrinks to the 16-pixel entry.

How to convert PNG to ICO with transparency intact

Alpha is the reason to start from PNG.

Transparent edges are the reason to start from PNG, so here's how to convert png to ico while keeping them. A PNG carries an alpha channel, and this builder writes each ICO entry as 32-bit with PNG data, so that transparency survives into the icon.

Drop the PNG, tick your sizes, and Build ICO. The corners that were see-through stay see-through against a browser tab or a dark taskbar. If you convert from a JPG instead, you lose that alpha and get a solid rectangle behind the mark. For crisp small sizes, check the 16-pixel result specifically, since that's where thin strokes and gaps tend to close up.

How to convert PNG file to ICO for a website favicon

The icon in the browser tab.

For the little icon in a browser tab, here's how to convert png file to ico the way browsers expect. Start with a square logo PNG, ideally 256 pixels or larger, and tick at least 16, 32, and 48 so the tab, the bookmark bar, and Windows shortcuts each get a native size.

Build the ICO, rename it favicon.ico, and drop it in your site's root folder. Browsers request /favicon.ico automatically even without a link tag, which is why the ICO container still earns its place. You can also declare a PNG favicon in HTML for modern browsers and keep the ICO as the fallback, which is the combination most large sites ship.

Try it now

Open ICO Converter

The tool is one click away. No sign up, no upload, no payment.

Open ICO Converter

Write a review