Most favicon size charts list a dozen dimensions without saying who uses them. The useful question is narrower: which files does a browser, a phone home screen or Google Search actually request, and at what size? This guide answers it from the specifications (the HTML Standard, Apple’s Safari documentation, the Web App Manifest and Google Search Central) and from a test run on 2026-10-02 in Chromium 152 on macOS with a device pixel ratio of 2, where a local server logged every request each test page caused.
The sizes that have a job
| Size | File | Who uses it | Source |
|---|---|---|---|
| 16×16, 32×32 (and 48×48) | favicon.ico or PNG via <link rel="icon"> | Browser tabs, bookmarks, history | HTML Standard, rel=icon |
| Any, larger than 48×48 recommended | The icon your home page declares | Google Search results | Google Search Central |
| 180×180 | apple-touch-icon.png | iPhone “Add to Home Screen” | Apple: Configuring Web Applications |
| 192×192 and 512×512 | PNGs listed in the web app manifest | Installed web apps on Android and desktop Chrome | web.dev install criteria |
| Scalable | SVG via <link rel="icon" type="image/svg+xml"> | Browsers that support SVG icons | HTML Standard (sizes="any") |
Most other numbers in big charts (57, 72, 114 and 144 from older iOS devices, 150 and 310 from Windows tiles) come from platform conventions that none of these sources require today. Apple’s guide, for example, still lists 152×152 and 167×167 for iPad alongside 180×180 for a Retina iPhone; if you list several, Safari picks the closest size and otherwise “the smallest icon larger than the recommended size”.
What Chromium actually requested
Each test page below was served from its own port, so no cached icon could interfere. The icons were a package made with the ZeroTool generator (letter “Z” on a blue background).
Page <head> | Requests after the HTML |
|---|---|
| No icon links at all | /favicon.ico |
| The generator’s snippet: ICO link, PNG links for 16, 32 and 48, apple-touch-icon, manifest | /site.webmanifest, /favicon.ico |
| Only the three PNG links (16, 32, 48) | /favicon-32.png |
| The three PNG links followed by the ICO link | /favicon.ico |
ICO with sizes="32x32", then an SVG link, then apple-touch-icon | /icon.svg |
| Only a 32×32 PNG link | /favicon-32.png |
Four things follow from this log.
First, /favicon.ico is fetched only when a page declares no icon. That is the HTML Standard’s fallback: in the absence of an icon link, the user agent “may” fetch /favicon.ico from the site root. With a PNG link and no ICO link, Chromium did not request /favicon.ico at all.
Second, when an ICO link was present, Chromium chose the ICO over the PNG links, in either order. A 2× screen needs a 32-pixel image for a 16-point tab, and the ICO already contains one. The 16, 32 and 48 PNG links were never used in that case.
Third, an SVG link won over the ICO. With SVG, one file serves every size.
Fourth, desktop Chromium did not request apple-touch-icon.png, but it did fetch the manifest on page load. The HTML Standard leaves the choice among icon links to the browser, so Firefox and Safari may decide differently; this test covers Chromium only.
What Google Search requires
Google shows a favicon next to each result and reads it from the home page of the host. The rules in Define a favicon to show in search results:
- The icon must be square and at least 8×8 pixels. Google recommends “larger than 48x48px so that it looks good on various surfaces”.
- Supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not in that list, so keep an ICO or PNG icon link next to an SVG one.
- One favicon per hostname:
example.comandnews.example.comcan differ,example.com/newscannot. - Googlebot must be able to crawl the home page and Googlebot-Image the icon file. A
Disallowfor the icon path in robots.txt keeps it out of results. - Keep the icon URL stable, and expect days to weeks before a change appears. Google accepts
icon,shortcut icon,apple-touch-iconandapple-touch-icon-precomposedas therelvalue.
Search Console has no favicon report. To speed up a change, request indexing of the home page with the URL Inspection tool.
apple-touch-icon: 180 pixels and the root fallback
iOS uses apple-touch-icon for the home-screen icon. Apple’s guide documents two ways to provide it: a <link rel="apple-touch-icon" href="..."> in the page, or, if no link is present, a file in the site root whose name starts with apple-touch-icon. The 180×180 size is the one Apple labels for a Retina iPhone (60 points at 3×). Apple’s rule for a missing size covers iPads too: Safari uses the smallest icon larger than the recommended size, so one 180-pixel file also serves an iPad that wants 152 or 167.
iOS adds its own rounded corners, so draw the icon as a full square. Apple’s guide does not say how transparent pixels are rendered, so give this file an opaque background to get the same result on every device.
Manifest icons, maskable and the safe zone
For a site to be installable as an app, Chrome’s install criteria require a manifest with name or short_name, a start_url, a display value of fullscreen, standalone, minimal-ui or window-controls-overlay, and icons that include a 192px and a 512px icon.
Android launchers crop installed icons to their own shapes. An icon with "purpose": "maskable" tells the system it may crop; the visible mark must then fit inside a centered circle whose radius is 40% of the icon width, because the outer 10% can be cut off (web.dev: maskable icons). web.dev also warns against declaring one file as "any maskable": an icon padded for masking looks too small where it is shown unmasked. Ship two entries instead:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Chrome DevTools shows the result under Application → Manifest, with an option to preview only the minimum safe area.
Inside favicon.ico
An ICO file is a 6-byte header, one 16-byte directory entry per image, then the images. Each entry stores width and height in one byte each (0 means 256), the bits per pixel, the image’s byte length and its offset from the start of the file. Since Windows Vista an image may be a complete PNG file instead of a bitmap, and browsers read PNG-based ICO files.
This is the directory of the favicon.ico the generator produced in the test above, read back with Python’s struct module:
| Entry | Width × height | Bits per pixel | Bytes | Offset | Payload |
|---|---|---|---|---|---|
| 1 | 16 × 16 | 32 | 343 | 54 | PNG |
| 2 | 32 × 32 | 32 | 539 | 397 | PNG |
| 3 | 48 × 48 | 32 | 714 | 936 | PNG |
The first image starts at byte 54 (6 + 3 × 16), and the file is 1,650 bytes. Putting 16, 32 and 48 into one ICO covers 1× and 2× tabs and Windows shortcuts. Larger sizes belong in PNG files that the manifest and the apple-touch-icon link point to.
SVG favicons
An SVG icon scales to any tab size and can contain a prefers-color-scheme media query in its own <style> block, so one file can switch colors with the system theme:
<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">This was the fifth test page above, and Chromium requested only icon.svg. The ICO line stays for browsers without SVG icon support and for Google Search, which does not list SVG among its formats. Whether a browser re-renders the tab icon when the theme changes is up to the browser; the test did not check it. An SVG favicon must be self-contained: an icon is drawn as an image, so external fonts, images and scripts inside it do not load.
Generating the set with the ZeroTool favicon generator
The favicon generator draws an emoji, one to four characters, an uploaded image or pasted SVG onto a canvas in your browser and packs eleven files into a ZIP. Nothing is uploaded. These are the files from the test, generated twice: once from the default rocket emoji on a transparent background, once from the letter “Z” on blue.
| File | Pixels | Rocket emoji | Letter “Z” | Used by |
|---|---|---|---|---|
favicon.ico | 16, 32, 48 | 6,029 B | 1,650 B | Tabs (Chromium picked it) |
favicon-16.png | 16 | 855 B | 343 B | Linked, not fetched by Chromium |
favicon-32.png | 32 | 1,770 B | 539 B | Linked, not fetched by Chromium |
favicon-48.png | 48 | 3,350 B | 714 B | Linked, not fetched by Chromium |
favicon-64.png | 64 | 5,382 B | 904 B | Not linked |
favicon-96.png | 96 | 10,278 B | 1,328 B | Not linked |
favicon-128.png | 128 | 16,203 B | 1,852 B | Not linked |
apple-touch-icon.png | 180 | 29,689 B | 2,744 B | iOS home screen |
android-chrome-192.png | 192 | 33,238 B | 3,003 B | Manifest |
android-chrome-512.png | 512 | 98,017 B | 9,286 B | Manifest |
site.webmanifest | — | 438 B | 438 B | Fetched on load |
The tool reported “11 files · 200.4 KB” for the emoji and “11 files · 22.3 KB” for the letter. Color emoji have many gradients, so their PNGs are about ten times larger than a flat letter. The emoji is drawn with the system emoji font, so the same emoji looks different when generated on Windows or Linux; use the Image or SVG input when the result must not depend on the machine.
The tool’s HTML snippet is:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">And its site.webmanifest, here with “Example Site” in the site name field, “Example” in the short name field, the default theme color and a transparent background:
{
"name": "Example Site",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"icons": [
{
"src": "/android-chrome-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/android-chrome-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff"
}This manifest meets the manifest part of Chrome’s install criteria: it has name and short_name, "start_url": "/", "display": "standalone" and the two icon sizes. If you leave the site name field empty, the tool leaves out name and short_name instead of writing empty strings, and warns that Chrome will not offer to install the site. Both icons are declared "any", because the package has no image padded for masking. If you want a maskable icon, generate a separate 512-pixel file whose mark stays inside that central circle: about 10% padding on each side for a round mark, about 22% for a square one, whose corners must fit inside the circle too (the generator’s padding slider goes to 30%) and add it with "purpose": "maskable". If you like, also delete favicon-64.png, favicon-96.png and favicon-128.png, which no tag references, and the 16/32/48 PNG lines, which Chromium did not use when the ICO line was present.
Upload the files to the site root, because the snippet and manifest use root paths. Then check the result in DevTools under Application → Manifest, on an iPhone with Add to Home Screen, and, after Google recrawls the home page, in a search for your site. Related tools: SVG to PNG Converter for making a high-resolution source, and Image to Base64 if you want to inline a small icon.