What size should a favicon be? The full icon size guide

A favicon used to mean one thing: a tiny icon in the browser tab. Today browsers, search engines, phones and app-install systems each look for their own size, and a site that only ships the classic small icon ends up with a generic placeholder on an iPhone home screen or a blurry logo on Android. Here’s the full list, and why each size exists.

Favicon sizes at a glance

All of them should come from the same source artwork: a sharp, square image at 512×512 or bigger. Every smaller size is scaled down from that, which keeps edges crisp. Scaling a small logo up to 180 or 512 pixels is what produces blurry, pixelated home-screen icons.

What size favicon does Google show in search results?

Google shows your site’s favicon next to its search results. Its guidelines ask for a square icon and recommend one whose side is a multiple of 48 pixels (48, 96, 144 and so on) so it looks sharp on high-resolution screens, linked from your homepage with a <link rel="icon"> tag. The 48×48 layer inside favicon.ico and the larger PNGs cover this. Google updates favicons when it recrawls your homepage, so a new icon can take a while to appear in results.

favicon.ico vs PNG vs SVG

.ico is an older Windows icon format that can hold several image sizes inside one file, which is why a single favicon.ico can cover 16, 32 and 48 pixels at once. Browsers still request /favicon.ico automatically, so it’s the safest fallback. The newer icons (Apple touch icon, Android icons) are plain PNG files, each referenced explicitly. PNG also supports transparency, which JPG can’t do at all — more on that in our JPG vs PNG guide.

Many modern browsers also accept an SVG favicon, which stays sharp at any size and can even switch colours for dark mode. Support isn’t universal, though, so an SVG is an extra on top of the .ico and PNGs, not a replacement. Altto’s generator produces the .ico and PNG set, not an SVG.

The HTML to add to your page

Icons only work if the page tells browsers where they are. With the files in your site’s root folder, these lines go inside the <head> of every page — this is exactly the snippet Altto’s generator gives you:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">

The paths start with /, so the files need to sit at the top level of your site (next to your homepage), not in a subfolder. If you use a website builder such as WordPress, Squarespace or Wix, look for a “site icon” or “favicon” setting instead — most builders take one square image and handle the sizes and tags for you.

What is the site.webmanifest file?

Android and installed web apps don’t read individual icon tags the way Apple’s touch icon works. Instead they read a small JSON file, usually named site.webmanifest, which lists the available icon sizes along with the site’s name and colours. Without it, an Android “Add to Home screen” shortcut can fall back to a generic icon instead of your logo.

The manifest from Altto’s generator comes with the two Android icons already listed and white theme and background colours. Its name and short_name fields are left blank for you to fill in — open the file in any text editor and type your site’s name between the quotes.

How to make a favicon from your logo

1. Open Altto’s Favicon Generator and add a JPG, PNG or WebP image. Any shape works: it’s centre-cropped to a square automatically, so put the important part in the middle.
2. Check the preview. You’ll see it as a browser-tab icon and a bookmark, plus every size in the set.
3. Download the .zip. It contains a real multi-resolution favicon.ico, the five PNG sizes, the site.webmanifest and the HTML snippet.
4. Unzip the files into your site’s root folder and paste the snippet into your pages’ <head>.

Every size is drawn locally using your browser’s built-in canvas, so your logo is never uploaded anywhere. If you need to resize or tidy the image first, see how to resize an image.

Designing an icon that works at 16 pixels

• Simplify. A full logo with a wordmark turns to mush at 16×16. A single letter, symbol or the most recognisable part of your logo reads far better.
• Use strong contrast. Tabs can be light or dark depending on the visitor’s theme, so check the icon stands out against both.
• Fill the square. Lots of empty padding makes the icon look tiny next to others in the tab bar.
• Watch transparency on iPhone. iOS doesn’t display transparent areas in home-screen icons — they’re filled in, usually with black. If your logo is on a transparent background, a version on a solid colour often looks better as the Apple touch icon. (Need to cut a logo out of its background? See how to remove the background from a photo.)

Why is my favicon not showing?

• The browser has cached the old one. Browsers hold on to favicons stubbornly. Try a private window, or open /favicon.ico directly and refresh it.
• The files aren’t where the tags point. Open each path (for example yoursite.com/apple-touch-icon.png) in the browser; if it 404s, the file is missing or in the wrong folder.
• The tags aren’t on every page. The snippet needs to be in the <head> of each page, or in the shared template they all use.
• It’s Google that’s out of date. Search results update only after Google recrawls your homepage, which can take days or longer.

Common questions

Sources

Where the search-result and iPhone icon details in this guide come from:

• Google Search Central — Define a favicon to show in search results (square icon, size guidance, <link rel="icon"> on the homepage)
• Apple — Configuring Web Applications (apple-touch-icon link tags, including the 180×180 size)