Favicon sizes: which files you actually need and how to make them

Older favicon generators hand back twenty-odd files. Most of them are for Windows tile images and older Apple sizes that nothing current reads. The set that still matters is small, and the harder question is not which sizes to export but whether your mark survives the smallest one.

Two definitions

A favicon is the small icon a browser shows in a tab, a bookmark and a home screen. It is unusual among brand assets in being drawn at 512 pixels and seen, almost every time, at 16.

A PNG-in-ICO is an .ico file whose images are stored as PNG data rather than as bitmaps. That has been valid since Windows Vista, and it keeps the file small.

The files, and what reads each one

This is the set the tool produces, with the name each file has in the download:

File	Size in pixels	What uses it
favicon.ico	16, 32 and 48, inside one file	Requested at the site root by default, and by assorted crawlers and feed readers
icon-16.png	16	The browser tab, the size almost everyone actually sees
icon-32.png	32	A tab on a high-density display, and the Windows taskbar
icon-48.png	48	Windows site shortcuts
apple-touch-icon.png	180	A bookmark on the iOS home screen
icon-192.png	192	The Android home screen, through the web manifest
icon-512.png	512	The splash screen and install prompt, through the web manifest
site.webmanifest	None	Lists the 192 and 512 icons with your site’s name
head.html	None	The four lines for your page’s head

The ICO is worth shipping even though modern browsers will use a PNG declared in a link tag. A favicon.ico at the root is still requested by default, so leaving it out produces a steady stream of 404s.

Keep the small sizes as PNG. Converting a 16-pixel icon to WebP made it bigger, not smaller, in our measurements: 332 bytes as PNG, 718 bytes as WebP, an increase of 116.3%, because WebP’s fixed container cost has no room to pay for itself on 256 pixels. The details are in how much PNG to WebP saves, measured.

The head snippet

These are the four lines the tool writes, exactly:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Every path starts with a slash, so the files go at the root of your site, next to your home page. The 16, 32 and 48 pixel PNGs are not listed: their images are what the ICO contains, and they are in the download as separate files in case you need them.

The manifest the tool writes, with the default site name, is this:

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Make the set with the tool

1. Open the Favicon generator and drop your mark onto the box, or click it to choose a file. It takes PNG, JPEG or SVG, 512 pixels or larger, ideally square. A source that is not square is fitted inside the square, not cropped.
2. Read the check before anything else. It gives three figures: Detail kept at 16px, On a light tab and On a dark tab. Underneath, the 16-pixel icon is shown at actual size on a light tab colour and on a dark one.
3. Read any warnings in red under the figures. If there are none, the panel says the icon holds up at 16 pixels and reads against both tab strips.
4. Look down the list of sizes. Each row shows the icon, its size, what it is for, and the file size.
5. Type your site’s name into Site name, for the manifest.
6. Press Download everything as .zip for all nine files, and Copy the markup for the head snippet.

What 16 pixels does to a logo

The arithmetic is unforgiving. A 16-pixel icon is 16 × 16 = 256 pixels in total. A 512-pixel source is 512 × 512 = 262,144. Every pixel in the tab stands in for 262,144 ÷ 256 = 1,024 pixels of your artwork. A three-letter wordmark gets roughly 85 pixels per letter once the gaps between letters are counted, which is not enough to draw a letter.

The detail figure measures how much of that survives. The tool draws your mark at 128 pixels and at 16, counts how many distinct brightness levels appear in each (ignoring transparent pixels), and reports the 16-pixel count as a percentage of the 128-pixel one. Below 45%, it warns that the icon will read as a coloured shape rather than your mark. Do not judge this from the preview alone: at 16 pixels your eye fills in what it knows is there.

If the figure collapses, change the mark rather than the export. A single letter, a cropped fragment of the logo, or a simplified silhouette all survive where the full logo does not. No export setting recovers detail from 256 pixels.

There is one more warning to watch for. If your source is smaller than 512 pixels, the 512-pixel file is upscaled from it and will look soft. Supply at least 512 pixels, or an SVG.

The dark tab trap

A mark that reads perfectly in a light browser can disappear in dark mode. The tool takes the average colour of your mark’s visible pixels and measures it against a light tab strip (#F2F2F2) and a dark one (#202124), and warns if either falls below 1.6:1.

A black mark shows the problem in full. Black has a relative luminance of 0; the light strip’s is 0.8879 and the dark strip’s 0.0152. Against the light strip, that is (0.8879 + 0.05) ÷ (0 + 0.05) = 18.76:1, as clear as it gets. Against the dark strip, it is (0.0152 + 0.05) ÷ 0.05 = 1.30:1, below the warning line, and the icon all but vanishes.

Seeing both figures side by side is what makes the problem visible before it ships. Giving the mark a solid background square of its own is one way to stop it depending on the tab colour; change the source and drop it in again to see the figures move.

Other ways to do it

There is no built-in favicon generator in macOS or Windows. On a Mac, Preview’s Tools → Adjust Size resizes an image, so you can make each PNG size from a copy of your source one at a time. That leaves the ICO, the manifest and the head markup to another tool, and gives you no check at 16 pixels.

Checking nothing was uploaded

Every size is drawn on a canvas in your browser, and the zip is assembled there. The zip-building code is fetched the first time you press the download button, which shows in the developer tools Network panel as a script coming in; nothing goes out with your image. You can also load the page, disconnect, and drop your mark in: the check and the previews still appear.

Next

Drop your mark into the Favicon generator and read the detail figure before the preview. If your source is an SVG straight out of a design tool, run it through the SVG optimiser first.