Favicon Checker
Paste a URL and see how your favicon actually looks in a light and dark browser tab, a Google search result, and on an iPhone home screen. It also reads the real pixel size out of each file, which disagrees with your sizes attribute more often than you would think.
Three ways a favicon quietly fails
None of these throw an error. None appear in a build log or in Search Console. They just make your site look slightly less real than the nine results around it.
yoursite.com
yoursite.comsizes="32x32" on a 16px file. The browser believes the tag, picks it, and upscales.What it checks
- Every icon link in the head —
icon,shortcut icon,apple-touch-icon, and your web app manifest. - Whether each file resolves. A tag pointing at a 404 is the most common favicon failure, and nothing in your build will tell you about it.
- Real dimensions, read from the bytes. Not the declared size, the actual one.
- The implicit
/favicon.icoat your root, which browsers request whether you declare it or not. - Google’s stated rules — 8×8 minimum, larger than 48×48 recommended, square. Not the “multiple of 48” rule, because that one isn’t in Google’s documentation.
Will my favicon show in Google search results?
Only if Google can fetch it and it clears the bar. Google states a hard minimum of 8×8 pixels and recommends anything larger than 48×48, square, in a format it supports. It does not require multiples of 48, which is a rule that gets repeated constantly and appears nowhere in Google’s documentation.
If it can’t use yours, you get a generic globe next to your result. Your ranking is unaffected, you just look less like a real site than the nine results around you. Changes also wait for Google to recrawl your homepage, which takes days to weeks.
Why your favicon disappears in dark mode
Because a dark logo on a dark tab bar is invisible, and most people now browse in dark mode. The preview above shows both tabs side by side for exactly this reason.
The fix almost nobody ships: an SVG favicon can recolour itself, because the media query lives inside the file.
<style>
path { fill: #212121 }
@media (prefers-color-scheme: dark) {
path { fill: #FFF8E1 }
}
</style>One file, correct in both themes. This checker tells you whether your SVG already does it.
What about iPhone and Android?
iPhone uses apple-touch-icon at 180×180 when someone saves your site to the home screen. Miss it and iOS uses a screenshot of the page instead, which looks like nothing at all. iOS also ignores transparency and composites onto black, so a transparent logo becomes a dark smear.
Android reads the icons in your web app manifest, usually 192×192 and 512×512. Only needed if your site should be installable. Skip it otherwise rather than shipping icons for a manifest you don’t have.
Common questions
Ship an SVG, a 32×32 favicon.ico, and a 180×180 apple-touch-icon. That covers browser tabs, bookmarks, Google results and iOS home screens. Google requires a minimum of 8×8 and recommends larger than 48×48. It does not require multiples of 48, despite how often that gets repeated.
Because the sizes attribute is something you wrote, and this tool reads the actual file. They disagree more often than you would expect, usually after someone swaps the image without updating the tag. Browsers choose which icon to load based on the declared value, so a wrong one gets picked for the wrong slot.
Not broken, but limiting. Browsers request /favicon.ico from the root whether or not you declare it, so a root file alone works. You lose the ability to serve an SVG, an Apple touch icon, or different sizes for different surfaces.
Favicons are cached hard and separately from the page. Load the icon URL directly and hard-refresh that, or use a private window. For Google, the icon updates when it next recrawls your homepage, which can take days to weeks.
Need the icons made?
Upload one image and get the whole set back, plus the HTML to paste.
Favicon GeneratorWhy the guides disagree
MDN says 16×16, Google says bigger than 48×48. Both are right. Here’s why.
Favicon size in 2026