Which favicon sizes do you actually need?

Old guides list twenty or more favicon sizes. Most of those were for browsers and devices nobody uses anymore. Today, five files cover almost every case.

The files

1. favicon.ico with 16, 32 and 48 pixel images inside. Browsers look for /favicon.ico even when no HTML points to it.
2. favicon-32x32.png and favicon-16x16.png for browser tabs.
3. apple-touch-icon.png at 180 by 180 pixels for iPhones and iPads.
4. android-chrome-192x192.png and android-chrome-512x512.png, listed in a web manifest, for Android.

The HTML

Put the files in the root folder of your site and add this inside <head>:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Design tips for 16 pixels

• Use one strong shape or one to three letters. Fine detail disappears.
• Check it on a dark browser tab as well as a light one.
• A solid background makes thin logos readable.

The converter and the text favicon generator produce all of these files in one zip.