Favicon sizes explained: which icon files your site needs

Where favicons appear

The same icon is shown in very different places, at very different sizes: tiny in a browser tab, a little larger in bookmarks and history, larger again in search results on some devices, and big on a phone's home screen when someone saves your site, or in the app switcher when your site is installed as a web app. One small image can't look good in all of these, which is why a favicon is really a small set of files.

favicon.ico: the classic file

favicon.ico is the oldest and most widely supported favicon. An ICO file is a container that can hold several images at different sizes, and the browser picks the one that suits the place it's drawing. The usual sizes inside are:

• 16 × 16 — browser tabs and bookmark lists on standard screens.
• 32 × 32 — tabs on high-resolution screens, and some taskbars.
• 48 × 48 — desktop shortcuts and a few other places in the operating system.

Browsers look for a file called favicon.ico in the root of your site automatically, even when the page doesn't mention it. So placing it at /favicon.ico already covers tabs and bookmarks in practically every browser.

PNG icons for phones and web apps

Bigger surfaces use separate PNG files:

The 192 and 512 px sizes matter if your site has a web app manifest — the small JSON file that lets a site be installed like an app. Even without one, they're useful larger versions to keep.

The HTML that connects them

Add these lines inside the head of your pages (paths assume the files are in your site's root folder):

• <link rel="icon" href="/favicon.ico" sizes="any"> — the ICO file, for tabs and bookmarks.
• <link rel="apple-touch-icon" href="/apple-touch-icon.png"> — the home-screen icon on Apple devices.
• <link rel="manifest" href="/manifest.webmanifest"> — only if you have a web app manifest.

Inside the manifest, list the two larger PNGs in its icons array, one entry each, for example { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" } and the same for icon-512.png with "512x512".

Tip: Browsers cache favicons aggressively. If you replace yours and still see the old one, open the site in a private window or clear the browser cache before assuming something is wrong.

Make the whole set from one image

1. Start with a square logo, ideally at least 512 × 512 pixels so the biggest icon stays sharp.
2. Add it to Favicon Generator. There's nothing to set.
3. Click Create and download the ZIP.

You get exactly four files: favicon.ico with 16, 32 and 48 px images inside, apple-touch-icon.png at 180 px, and icon-192.png and icon-512.png. Non-square images are cropped to a centred square first, so nothing is squashed — but if your logo is wide, make a square version yourself so the important part isn't cut off. The tool doesn't write the HTML or the manifest for you; use the lines above.

Designing an icon that works at 16 pixels

• Simplify. A full logo with a wordmark turns to mush at 16 × 16. Use the symbol, a single letter or a bold shape.
• Use strong contrast so it shows up on both light and dark browser tabs.
• Fill the square. Thin padding wastes the few pixels you have.
• Consider the shape. Some phones mask home-screen icons into circles or rounded squares, so keep important details away from the corners.

For a round icon, Circle Crop Image cuts the largest centred circle from an image and makes the corners transparent; feed the result into the favicon generator. Note that Apple devices fill transparent areas of a touch icon with a background colour, so a solid square often looks better there.

Need one size as an ICO, or an inline icon?

Image Converter can save any image as a single .ico file containing the standard sizes from 16 up to 256 px (as large as the image allows). And for a tiny icon embedded straight into HTML, CSS or an email template, Image to Base64 turns the file into a data URI you can paste where an image URL would go. Base64 is about a third bigger than the file and can't be cached separately, so keep it for very small images.