Which favicon sizes you actually need

Favicon generators tend to hand back a folder of twenty or more files, most of them for platforms that stopped asking years ago. This is the set that covers current browsers, phones and operating systems.

• favicon.ico at the root of the site, containing 16, 32 and 48 pixel images. Browsers ask for /favicon.ico on their own, even when the page declares nothing.
• apple-touch-icon.png, 180 by 180 pixels. Used when someone adds the site to an iPhone or iPad home screen.
• Two PNGs, 192 and 512 pixels square, listed in a web app manifest. Android uses them for home screen shortcuts and installed web apps, and Chrome has long expected both sizes before it treats a site as installable.
• Optionally, icon.svg. One vector file that stays sharp at every size and can switch colours for dark mode.

An .ico file is a container rather than a single image. It holds several complete images at different sizes, and whatever is displaying the icon picks the one closest to the space it has. 16 pixels is the browser tab on an ordinary screen. 32 pixels is the same tab on a high-density screen, along with bookmarks and the Windows taskbar. 48 pixels is what Windows uses for site shortcuts on the desktop.

Each of those should be drawn for its size rather than shrunk from a large original in one go, because at 16 pixels every pixel is a design decision. Our favicon generator renders all three separately from your source image and packs them into one favicon.ico. It is one of the two tools on this site that use our server, because browsers have no way to write an .ico file themselves; the image is held in memory for the request and never stored.

Safari on iPhone and iPad looks for an apple-touch-icon when a page is saved to the home screen, and 180 by 180 is the size current devices use. Give it a solid background. Transparent areas in an apple-touch-icon are generally filled with black by iOS, so a transparent logo that looks fine in a browser tab can turn into a dark square on a home screen. iOS also rounds the corners itself, so do not round them in the file.

Android takes its home screen icon from the web app manifest, a small JSON file that lists the icons and their sizes. The 192 pixel image is the one shown on most phones; the 512 pixel image is used for splash screens and higher-density displays. If you want an Android icon that fills the whole adaptive shape rather than sitting inside a white circle, add a third, maskable version with generous padding around the logo.

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

Four lines in the head of every page are enough. Keep the sizes attribute on the .ico line: without it, Chrome has been known to pick the .ico over the sharper SVG.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Windows Start-menu tiles, the browserconfig.xml file that configured them, and dozens of intermediate Apple sizes such as 57, 72, 114 and 152 pixels date from older devices. Current iPhones and iPads use the 180 pixel file, and Windows tiles for websites are gone. The mask-icon that Safari introduced for pinned tabs is optional as well. Leaving these out does not break anything; including them just adds files to keep in sync.

Start from a square image at least 512 pixels across, ideally a vector. If your logo is wider than it is tall, use the mark rather than the full wordmark: a name squeezed into 16 pixels is unreadable. Crop it square first with the image cropper set to 1:1, since a rectangular image fed to an icon generator gets squashed. If you are starting from an SVG, the SVG to PNG converter renders it at exactly 512 pixels for the manifest icon.

Finally, check the result in a real tab. Browsers cache favicons stubbornly, so a changed icon can take a hard refresh, or a new private window, before it shows up.