Image Tools·4 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.

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