Favicon check
One small picture stands for your site in tabs, bookmarks, phone home screens and search results, and each of those wants a different file. This check downloads every icon you publish and measures it.
One logo, four different requests
The word “favicon” goes back to 1999, when Internet Explorer 5 started looking for a file named favicon.ico to decorate the Favorites menu. That 16-pixel square still gets requested today, but it has company now. Which file is fetched depends on the device in front of the visitor:
| Where it appears | File that is used | Size |
|---|---|---|
| Browser tab, bookmarks, history | favicon.ico, or a PNG or SVG declared with rel="icon" | 16 to 48 px, or vector |
| iPhone and iPad home screen | rel="apple-touch-icon" | 180 × 180 px |
| Android home screen, installed web app | Icons listed in the web manifest | 192 and 512 px |
| Google results on phones | The rel="icon" file | A multiple of 48 px, or vector |
When the right file is missing, each system falls back to something worse. You get a blank page symbol in the tab, a tiny screenshot of your page on iOS, a letter in a gray circle on Android, a globe in Google.
What gets downloaded and measured
The check reads the HTML of the page you give it and collects every <link> whose rel is icon, apple-touch-icon or mask-icon, plus the manifest link and the icons that file lists. Then it adds two addresses that browsers try without being told: /favicon.ico and /apple-touch-icon.png.
Up to 16 files are fetched. We don’t take the declared sizes attribute at its word. An ICO file is opened to list the sizes packed inside it, an SVG is read for its viewBox, and PNG or JPEG files are measured in pixels. For the Apple icon, the corners are sampled for transparency. A file that turns out to be an HTML error page is reported as such, and with /favicon.ico that surprise is a common one.
Reading the checklist
- Classic favicon
- Passes with an ICO file, or a PNG of 16, 32 or 48 px. It fails when nothing of the kind exists, and gets a warning when an SVG is the only icon, since feed readers, older browsers and many tools request
/favicon.icoand nothing else. - SVG icon
- Optional. A vector file stays sharp at any size and can change its colors in dark mode.
- Apple icon
- Fails when absent. Warnings: smaller than 180 px, a transparent background (iOS paints it black), or a file that exists at the default address without a tag in the page.
- Manifest
- A warning when the page links to none. If it links to one that can’t be loaded or isn’t valid JSON, that’s a failure. Inside it, a missing 192 px icon fails, a missing 512 px icon warns, and a missing “maskable” icon is a note.
- Theme color
- Optional.
<meta name="theme-color">tints the browser bar on Android. - Size accepted by Google
- A warning unless one square icon measures a multiple of 48 px (48, 96, 144, 192) or is an SVG.
Any failure gives the verdict “Incomplete”, any warning “Almost”. The mock-ups above the list show the icon each system would pick from what you publish.
A complete set from one drawing
Start from a square version of your logo, simplified until you can still recognize it at 16 pixels. Export these files:
favicon.icowith 16, 32 and 48 px images inside, placed at the root of the site.icon.svg, if your logo exists as a vector.apple-touch-icon.png, 180 × 180, on a solid background with a margin of about 20 px. iOS rounds the corners itself.icon-192.pngandicon-512.pngfor the manifest.icon-maskable-512.png, with the logo inside the central 80% of the square, because Android may cut the picture to a circle.
Then declare them:
<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="/site.webmanifest">The results include this block and a matching site.webmanifest with your site name filled in.
The check tells you that the files exist and have the right dimensions. It can’t tell whether the drawing is legible at 16 px or looks right on a dark tab bar. Look at the mock-ups, then at a real phone.
Questions people ask
What size should a favicon be?
You need several. Provide a favicon.ico holding 16, 32 and 48 px, a 180 px PNG for Apple devices, and 192 and 512 px PNGs in a web manifest. An SVG icon can cover every tab size at once in current browsers.
Why does Google show a globe instead of my favicon?
Google needs a square icon that’s a multiple of 48 px or an SVG, declared with rel="icon" on the home page, and reachable by Googlebot (not blocked in robots.txt). After you fix it, the new icon appears once the home page gets crawled again, which can take days or a few weeks.
Do I still need a favicon.ico file?
Yes. Browsers accept PNG and SVG, but plenty of other programs request /favicon.ico directly: feed readers, link preview services, some password managers and older browsers. Without it your server also logs a 404 for each of those requests.
Why does my icon have a black background on iPhone?
The apple-touch-icon has transparent areas, and iOS fills transparency with black. Export the PNG on an opaque background in your brand color.
I changed my favicon. Why do I still see the old one?
Browsers hang on to favicons in their cache longer than almost any other file. Open the icon address directly and reload it, or add a version to the link, such as href="/favicon.ico?v=2". Search engines update on their own schedule.
What is a maskable icon?
An icon drawn with extra padding so that Android can crop it to a circle, a rounded square or any other shape without cutting into the logo. You declare it in the manifest with "purpose": "maskable". Without one, Android shrinks your normal icon and places it on a white disc.