Favicon Checker
Check a site's favicon, icons and web manifest declarations.
Favicon Checker inspects the icon and web manifest declarations in a site's HTML head and checks whether the default /favicon.ico exists at the root — all in one pass. For tab, bookmark and home-screen icons to render correctly, you need proper <link rel="icon">, apple-touch-icon and manifest declarations.
Just enter a URL and the server safely fetches the page, extracts the icon links from the head, and separately verifies that /favicon.ico returns 200. You can quickly tell whether a missing favicon is caused by an absent declaration or a missing file at the default path.
Icon declarations and their roles
- rel="icon" / shortcut icon: the primary favicon for tabs and bookmarks (PNG, SVG or ICO).
- apple-touch-icon: the icon used when adding to the iOS home screen (180×180 PNG recommended).
- mask-icon: a monochrome SVG icon for Safari pinned tabs.
- rel="manifest": the PWA manifest defining the Android home-screen icon, name and theme color.
How to debug a missing favicon
First confirm an icon link is declared in the head, then check whether /favicon.ico actually exists. Even with a declaration, the href may point to a wrong path (404), or a cached old icon may delay the update. Browsers cache favicons aggressively, so after a change a hard refresh or a new filename often helps. To inspect the other head meta tags too (title, description, canonical and more), use the SEO meta tag checker.
Recommended sizes and a complete declaration set
Modern browsers no longer need a dozen icon sizes — they downscale a single high-resolution source well. A pragmatic, well-covered set is below. Note that the sizes attribute is only a hint; for SVG icons use sizes="any" so the browser knows it scales to all sizes.
| Declaration | Recommended size / format | Used by |
|---|---|---|
/favicon.ico (no link needed) | 16, 32, 48 in one .ico | Legacy fallback, all browsers |
rel="icon" (SVG) | SVG, sizes="any" | Chrome, Firefox, Edge (sharp at any zoom) |
rel="icon" (PNG) | 32×32 PNG | Browsers without SVG-icon support |
apple-touch-icon | 180×180 PNG, opaque, no transparency | iOS / iPadOS home screen |
manifest → icons[] | 192×192 and 512×512 PNG | Android / PWA install |
Worked example: reading the result
Suppose you check https://example.com and the tool reports: rel="icon" → /favicon.svg (found), apple-touch-icon → missing, manifest → /site.webmanifest (found), and /favicon.ico→ 404. The reading is: desktop tabs render fine from the SVG, and Android install icons come from the manifest, but iOS "Add to Home Screen" will fall back to a screenshot because there is no apple-touch-icon, and very old browsers that ignore the SVG and blindly request /favicon.ico get a 404. The fix is to add one 180×180 apple-touch-icon and a multi-resolution /favicon.ico at the root.
Common pitfall
- Treating a
/favicon.ico404 as "broken" when a validrel="icon"is declared — the declared icon wins, so it is not actually broken (only the legacy fallback is gone). - Putting a transparent PNG into
apple-touch-icon: iOS fills transparency with black, so use a fully opaque image with your background baked in. - Using a root-relative path under a subpath deployment —
href="/icon.png"resolves to the domain root, not your subfolder, which silently 404s.