---
title: ICO vs PNG Favicon: Which Format Should You Use?
description: ICO vs PNG favicon compared: colour depth, transparency, file size and browser support, plus the head tags to ship both without conflicts.
canonical: https://favicontools.com/glossary/ico-vs-png-favicon
---

# ICO vs PNG Favicon: Which Format Should You Use?

Use PNG as your primary favicon and keep a favicon.ico at the site root as a fallback. PNG gives you full 24-bit colour and a real alpha channel, it compresses better, and every current browser accepts it from a link tag; ICO's remaining advantage is that it packs several sizes into one file and is what clients request from /favicon.ico when no tag is present. Shipping both costs one extra file and removes the trade-off entirely.

## The two formats

ICO is the Windows icon container, and it became the favicon format by accident: Internet Explorer requested /favicon.ico and everyone shipped one. Its defining property is that a single .ico file holds several bitmaps at different sizes, and the consumer picks one.

PNG is an ordinary web image format with lossless compression and a full alpha channel. It holds exactly one image at one size, so covering several sizes means several files and several link tags, which is what modern browsers expect anyway.

## Which one to reach for

### ICO
Fallback and bare-path requests
- One file carries 16, 32 and 48 pixel bitmaps together
- Requested from /favicon.ico by browsers, crawlers and feed readers with no link tag involved
- Understood by every browser ever shipped, including very old ones
- Native format for Windows desktop shortcuts
- Awkward to author and inspect; most tooling treats it as a build artefact

### PNG (recommended)
Your primary favicon
- 24-bit colour, so gradients and photographic marks survive
- Full alpha channel, so edges anti-alias cleanly against any tab colour
- Smaller than the equivalent ICO at the same quality
- Supported by every current browser via link rel="icon"
- The format Android and PWA manifests expect for install icons

## Technical comparison

| Property | ICO | PNG |
| --- | --- | --- |
| Colour depth | 8-bit palette in classic files; 32-bit in modern ones | 24-bit colour plus 8-bit alpha |
| Transparency | 1-bit mask in classic files; alpha channel in 32-bit entries | Full alpha channel |
| Sizes per file | Several, typically 16, 32 and 48 | One |
| Compression | Uncompressed bitmaps, or PNG-compressed entries | Lossless DEFLATE |
| Requested without a link tag | Yes, at /favicon.ico | No |

## What to put in the head

```html
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">
```

Declaring both is not a conflict. A browser reads every icon link, matches on type and size, and uses the ICO only if it prefers it or the PNGs fail.

> **The ICO does not have to be hand-made:** An .ico is a container around bitmaps, so any generator can build one from your PNGs. Treat it as an export target rather than a file you edit. You keep one master artwork and produce both formats from it.

## ICO vs PNG FAQ

### Can I drop favicon.ico entirely?

You can, and modern browsers will be fine as long as your PNG link tags are present. What breaks is everything that requests /favicon.ico by path without parsing your HTML (crawlers, feed readers, link-preview bots, some analytics), which will log a 404 and show nothing.

### Which format wins if I declare both?

The browser decides, using the type and sizes attributes on each link. In practice current browsers take the PNG that best matches the size they need, and fall back to the ICO if nothing else matches.

### Is ICO worse quality than PNG?

Not inherently. A 32-bit ICO entry carries the same colour and alpha as a PNG, and many ICO files literally embed PNG data. The quality complaints come from old 8-bit palette ICOs with 1-bit transparency, which produce hard jagged edges.
