Favicon sizes: which files your website really needs

A website needs three groups of icon files and nothing more exotic. First, a favicon.ico that holds 16, 32 and 48 pixel images, for browser tabs, bookmarks and the many tools that still ask for that exact file name. Second, an apple-touch-icon.png of 180 by 180 pixels for the iPhone and iPad home screen. Third, a 192 and a 512 pixel PNG listed in a web manifest, for Android and for sites installed as apps. This article explains what each file does, shows the HTML that connects them, and lists the mistakes that make an icon show up blurry, black or not at all.

The files at a glance

You do not need twenty variants. Older guides list a dozen Apple sizes and many Windows tiles; a 180 pixel Apple icon and the two manifest icons cover current devices, and a browser that wants another size scales the nearest one.

Why favicon.ico is still worth having

A browser looks for /favicon.ico on its own, even if your HTML never mentions it. So do feed readers, link previews and some search tools. A site without the file produces a 404 in the server log and shows a blank icon where it could have one.

An ICO file is a container. It starts with a 6 byte header, then one 16 byte directory entry per image, so a file with three images has a 54 byte directory before the first picture. The generator below puts three PNG images inside, at 16, 32 and 48 pixels, which every current browser reads. The browser then picks the size that fits: 16 for a normal tab, 32 for a sharper screen or the taskbar, and 48 where Windows or a list wants a larger one. The whole file is a few kilobytes.

Search engines also show a small icon next to your result. At the time of writing, Google's favicon guidelines ask for a square image and recommend one larger than 48 by 48 pixels; check the current wording before you rely on a specific size. A square source of 512 pixels or more covers this.

The Apple touch icon

When someone adds your page to the iPhone home screen, iOS looks for apple-touch-icon. Use a 180 by 180 pixel PNG. Two details catch people out:

• No transparency. iOS paints transparent areas black, so a logo with a see-through background turns into a logo on a black square. The generator fills this icon with your background colour, or with white if you chose none.
• No rounded corners. iOS rounds the corners itself. If you round them in the picture as well, you get a double rounding with a visible gap. The generator always makes this icon a full square.

The 192 and 512 icons and the manifest

A web manifest is a small JSON file that tells the browser how your site looks when installed. Browsers that offer "install this site" or "add to home screen" read the icons from it, and the sizes they look for are 192 and 512 pixels. The generator writes a manifest like this one:

{
  "name": "Little Bakery Shop Online",
  "short_name": "Little Baker",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ea580c",
  "background_color": "#ea580c",
  "display": "standalone"
}

The tool cuts short_name to the first 12 characters, as in "Little Baker" above. That is rarely the abbreviation you want, so edit it by hand if your name is long. Android may also crop an icon into a circle or a rounded square. Keep the important part of the picture inside the middle 80 percent so nothing meaningful is cut off.

The HTML that connects it all

Copy the lines into the <head> of every page, or into the shared layout of your site. The generator writes exactly this, with your theme colour in the last line:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ea580c">

The first line points at the ICO, and sizes="any" is the usual marker for a file that holds more than one size. The next two offer exact PNGs; browsers choose between the icon lines by the sizes they declare. The Apple line has no sizes because there is only one. The theme-color tints the browser toolbar on some phones. Some modern browsers also accept an SVG favicon; the generator does not make one, and the ICO stays as the fallback either way.

All the paths start with a slash, so they resolve from the root of your site. Upload the files to the root, so that /favicon.ico opens in a browser. If you keep them in a folder, change both the HTML and the manifest.

Making the set with the browser tool

1. Open the favicon generator and drop your logo on the box. PNG, JPG, WebP, GIF and SVG work. A square image of 512 pixels or more is best, and an SVG is drawn again at every size, so it stays sharp.
2. Under "Fit", choose "Whole image" to keep the entire picture or "Fill the square" to crop the long side. If the picture is not square, the tool says so. For a precise crop first, use the image crop tool with a 1:1 ratio.
3. Adjust "Padding" for breathing room, "Rounded corners" for a softer shape, and tick "Fill background" if the logo needs a solid colour behind it. That colour also becomes the theme colour in the manifest.
4. Type the app name, check the previews, then press "Download all (ZIP)". The icons are drawn in your browser and nothing is uploaded.
5. Unzip into the root of your site, paste the HTML from the HTML tab, and compare the manifest on the Manifest tab with what you want.

If your logo exists only as a vector file and you need a PNG for something else too, the SVG converter exports any size. Its companion article, converting SVG to PNG at any size, covers the details.

Designing for 16 pixels

At 16 by 16 there are 256 pixels to work with. A full logo with a tagline turns into noise. A single bold shape, a letter or two, or a simplified mark survives. Test the result at actual size, not zoomed in. Remember that a dark logo on a transparent background disappears on a dark browser theme; a filled background solves that, and so does a light outline.

Mistakes that make icons fail

• The old icon keeps showing. Browsers cache favicons for a long time, separately from the page. After changing the file, open the site in a private window or clear the cache for it to see the new one. Giving the file a new name, or adding a version to its URL such as ?v=2, usually forces a refresh too.
• The file is not at the path you wrote. Open /favicon.ico and /apple-touch-icon.png directly in the address bar. If you see a 404 or an HTML page, the upload went to the wrong folder.
• Renamed instead of converted. A PNG renamed to .ico is not an ICO file. Some software accepts it and some does not. Generate the real thing.
• A path without the leading slash. On a page like /blog/post, href="favicon.ico" looks inside /blog/. Start with /.
• A transparent Apple icon. It turns black on iOS. Give it a background.
• Text too small to read. If you cannot read it at 16 pixels, nobody can.
• Forgetting the manifest paths. The src values in the manifest are as likely to be wrong as the HTML ones.

A short checklist

Make one square source of at least 512 pixels. Generate favicon.ico with 16, 32 and 48 pixel images, an opaque 180 pixel Apple icon, and 192 and 512 pixel icons with a manifest. Upload them to the site root, paste the <link> lines in every page head, open each file's URL directly, and check the result in a private window so the cache does not fool you.