How to make a favicon

The little icon in a browser tab is a favicon, and getting one onto your site is fiddlier than it looks. Most guides tell you to drop a favicon.ico at the root and stop there. That still works, and on its own it produces a blurry icon on half the devices that see it.

Here is what browsers ask for, and what to give them.

A favicon is several pictures in one file

An .ico is a container. Inside it the same artwork sits at several sizes, and whatever draws the icon takes the closest fit: a browser tab wants 16 pixels, a Windows shortcut 48, a large desktop icon 256.

Give it one size and everything else is scaled from it. A 256 squeezed down to 16 turns fine detail into mush, which is what then sits blurred in the tab.

PNG to ICO builds 16, 32, 48 and 256 from one square PNG, each drawn fresh from the original.

Start with something that survives 16 pixels

This is the part most people get wrong, and no tool can fix it afterwards. At 16 pixels you have about the footprint of one letter on this page. A detailed logo becomes a smudge.

• One shape or one letter. A wordmark or a strapline will not survive the size.
• Strong contrast, since the icon sits on light and dark tab strips alike.
• Square artwork. A rectangle gets letterboxed, which wastes the little space you have.
• Test it small. Shrink your design to 16 pixels and look at it before you go any further.

Where the files go

The historical rule still holds: a file called favicon.ico at the root of your site gets requested by browsers without you telling them about it. That alone covers older browsers and Windows.

Modern browsers will also take a PNG through a link tag, and a lone 32-pixel PNG is a far smaller download than the whole .ico:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The apple-touch-icon is a 180-pixel PNG used when someone adds your site to an iPhone home screen. Without it, iOS screenshots your page and uses that instead, which never looks like your brand.

Transparency and dark mode

Keep the background transparent so the icon sits cleanly on whatever colour the browser is using. If your artwork is dark and thin, it will vanish against a dark tab strip - a light outline or a filled shape solves it, and there is no way to serve a different icon per theme in an .ico.

Taking an existing favicon apart

If you are rebuilding a site and want the old icon as a starting point, ICO to PNG unpacks the .ico and saves the largest picture inside as an ordinary PNG.

The short version

Draw one bold shape, square, on transparency. Export a 256-pixel PNG. Convert it to an .ico for the root, add a PNG and an apple-touch-icon in link tags, then look at the result in a real tab before calling it done.