Favicon sizes explained: the files your website actually needs

A favicon looks like one tiny picture, but a modern website hands out several: a small icon for browser tabs, a bigger one for iPhone home screens, two or three more for installed web apps, and one that Google shows next to your search results. The good news is that the list is short and stable. Here is what each file is for, which sizes the official documentation actually asks for, and the five lines of HTML that tie them together.

What browsers ask for by default

Before any of the clever stuff, there is one old convention. The HTML Standard says that when a page declares no icon with <link rel="icon">, a browser may instead request /favicon.ico from the root of the site and use whatever comes back as the page's icon. That is why server logs fill up with requests for a file nobody linked to, and why a missing one shows up as a steady trickle of 404 errors.

Once you do declare icons, the browser chooses among them. The standard tells it to pick the most appropriate icon using each link's type, media and sizes attributes, and if several are equally good, to use the last one in the page. If the chosen icon turns out to be unusable (an unsupported format, say), the browser moves on to the next-best candidate. In practice that means you can safely list a modern format and a fallback side by side.

One more detail explains a lot of frustration: the standard does not require browsers to update icons when the list changes, it only encourages them to. Combined with caching, that is why a new favicon can take a while to appear even on your own screen.

ICO vs PNG vs SVG favicons

Three formats do nearly all the work today.

• ICO is a container that can hold several images at different sizes in a single file. It is the format the /favicon.ico convention grew up with. The ICO our generator writes holds three images, 16, 32 and 48 pixels square, each stored as compressed PNG data inside the container.
• PNG is the everyday choice for every icon larger than a tab icon: the Apple touch icon, the manifest icons and any stand-alone sizes you want to link directly. It is lossless and supports transparency.
• SVG is a vector format, so one file stays sharp at any size. Chromium-based browsers and Firefox support SVG favicons, and WebKit announced that Safari 26 supports SVG “for icons everyplace there are icons in the interface, including favicons.” SVG also lets the icon react to dark mode, covered below.

SVG is not a full replacement yet. Google Search lists the formats it supports for favicons as BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, with no SVG, and home-screen icons for phones are bitmap files. So the practical pattern is an ICO (or PNG) for compatibility plus an SVG for browsers that can use it.

The sizes attribute on link rel="icon"

The sizes attribute tells the browser which pixel dimensions a linked icon contains, so it can pick the right file without downloading all of them. Values are written as width “x” height, such as sizes="32x32", and you can list several separated by spaces when one file (like an ICO) holds several sizes. The special keyword any means the file is scalable, “e.g. as provided by an SVG image,” in the HTML Standard's words.

Two rules are easy to miss. First, the sizes are in raw image pixels, not CSS pixels: the standard's own example is an icon shown 50 CSS pixels wide on a screen with two device pixels per CSS pixel, which needs a 100-pixel image. That is why a 32-pixel file exists alongside the 16-pixel one. Second, the sizes you declare must actually be present in the file. Declaring sizes a file does not contain is an error, not a hint.

The Apple touch icon (180 × 180)

When someone adds your site to the Home Screen on an iPhone or iPad, Safari does not use your rel="icon" files. It looks for an Apple touch icon, declared with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Apple's Safari Web Content Guide lists 180 × 180 pixels for Retina iPhones, alongside 167 × 167 for Retina iPads and 152 × 152 for iPads.

You do not need all of them. Apple's guide explains that when there is no exact match for a device, Safari uses the smallest icon larger than the size it wants, and if none is larger, the largest one available. A single 180 × 180 icon therefore covers the common cases. If you leave out the link entirely, Safari searches the site root for files that start with apple-touch-icon, including plain apple-touch-icon.png, so using that exact file name is a cheap safety net.

Our generator makes this icon fully opaque, filling any transparent areas with the background color you choose, so the tile on the Home Screen looks the way you intended rather than depending on how a device treats transparency.

Web app manifest icons and maskable icons

The web app manifest is a small JSON file, linked with <link rel="manifest">, that describes your site when it is installed like an app. The W3C specification notes that its registered extension is .webmanifest, though other extensions such as .json work too. Its icons list is where Android home-screen and install icons come from, and web.dev states that Chromium requires at least a 192 × 192 icon and a 512 × 512 icon. Chrome also builds its launch splash screen from the manifest's name, background color and icons.

Each manifest icon can carry a purpose. The default, any, means the image is shown as it is. maskable means the icon was designed to be cropped: Android and other platforms can cut it into a circle, a rounded square or another shape to match the rest of the home screen. The W3C spec defines a safe zone for these icons, a circle centered on the icon with a radius of 40% of the icon's size. Anything outside that circle may be masked away.

That is why a maskable icon needs a solid, full-bleed background and generous padding around the logo, while a regular icon wants the opposite. Our generator writes both: android-chrome-512x512.png for general use and a separate maskable-icon-512x512.png with extra padding on an opaque background. Check the preview: if your logo is wide or has important detail near its corners, add more padding until everything sits well inside the central circle.

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#1d4ed8",
  "background_color": "#ffffff",
  "display": "standalone"
}

How Google Search picks up your favicon

Google shows a site's favicon beside its results, and Google Search Central publishes the rules. The main ones:

• Declare it with a <link> in the <head> of your home page. Google supports rel values icon, apple-touch-icon and apple-touch-icon-precomposed, plus shortcut icon for historical reasons.
• The icon must be square (1:1) and at least 8 × 8 pixels. Google recommends going larger than 48 × 48 so it looks good on various surfaces.
• Googlebot-Image must be able to crawl the icon file and Googlebot must be able to crawl the home page; neither can be blocked.
• The favicon URL should be stable: don't change it frequently.
• Google supports one favicon per site, where a site means a hostname, and the icon should visually represent your brand.

Because Google accepts apple-touch-icon, the 180 × 180 file in a standard set already gives it a large, square option alongside the ICO. After a change, Google's documentation says recrawling can take from several days to several weeks; you can ask for your home page to be recrawled with the URL Inspection tool in Search Console.

Theme color and dark-mode SVG favicons

<meta name="theme-color"> is not an icon, but it travels with them. MDN describes it as a suggested color that browsers can use to tint the page's surrounding interface, such as the toolbar. It accepts a media attribute, so you can supply one color for (prefers-color-scheme: light) and another for (prefers-color-scheme: dark). MDN marks the feature as having limited availability, so treat it as a finishing touch rather than something your design depends on. The manifest has its own theme_color and background_color fields for installed apps.

An SVG favicon can go further and change its own colors. Because it is a real SVG document, it can contain a <style> block with a prefers-color-scheme media query. web.dev's adaptive favicon guide uses exactly this technique and notes that it works in Firefox and Chromium-based browsers. A dark logo that disappears on a dark tab bar is the classic reason to do it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111827; }
    @media (prefers-color-scheme: dark) { path { fill: #f9fafb; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Keep the bitmap fallback in the ordinary light-mode colors, and test the SVG in each browser your visitors use: web.dev documents the color switching for Firefox and Chromium-based browsers, so check Safari yourself if it matters to you.

Every file our generator produces, and what uses it

This is the complete set the PixWrench favicon generator puts in its zip. You can upload all of it to your site root as is.

If you need an extra size for some other system, such as a 96 × 96 PNG for a plugin or app store listing, take the 512 × 512 file and make an exact copy with the image resizer. Scaling down from the largest file keeps edges crisp; scaling a 16-pixel icon up never will.

The HTML to paste

The generator gives you this snippet, tailored to your files. Put it inside <head> on every page, or at least in your site template.

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#1d4ed8">

Line by line: the ICO is declared with sizes="48x48", its largest image, and also sits where the default /favicon.ico request will find it. The SVG line appears when you started from an SVG; otherwise the generator links favicon-32x32.png with type="image/png" and sizes="32x32" in its place. Then come the Apple touch icon, the manifest and your theme color. Because the HTML Standard picks the last of several equally suitable icons and skips unsupported formats, browsers that understand SVG use it and the rest fall back to the ICO.

Written and checked by the PixWrench team against the sources listed above. Spotted something out of date? Tell us and we’ll check it and note the fix in the changelog.