Favicon Inspector
Check a page’s favicons, apple-touch-icons, and web app manifest icons — and see whether it qualifies as an installable PWA.
What is the Favicon Inspector?
The Favicon Inspector shows every icon a page declares and how each one really looks to a browser. It reads the page’s <head> for the full icon family — classic favicons, the apple-touch-icon used by iOS home screens, SVG mask icons, and the web app manifest icons that power PWA installs — and always probes /favicon.ico as a fallback.
Because different pages under one domain can declare different icons and manifests, this is a URL-level check: enter the exact page you want to inspect. For each icon we fetch just enough bytes to identify the real image format and, for .ico files, list every embedded size. The result is an A–F grade plus a clear list of what to add or fix.
How to Use the Inspector
- Enter a page URL and click Inspect Favicons.
- Read the Summary tab for the icon count, PWA eligibility, and grade.
- Open the Icons tab to see each icon with its declared and detected format and size.
- Use the Manifest tab to review the web app manifest icon set and maskable coverage.
- Check Findings for prioritized fixes, then export from Raw.
How the Inspector Works
When you submit a URL, we fetch the page and parse its <head> for every icon-related <link> — icon, shortcut icon, apple-touch-icon, mask-icon, and more — plus the msapplication-TileImage meta tag. We always add /favicon.ico as a fallback candidate so even sites with no declarations are covered.
Each candidate icon is probed with a small ranged request so we can read its magic bytes and identify the true format — PNG, ICO, SVG, GIF, WebP, or JPEG — without downloading large files. For .ico containers we parse the directory to enumerate every embedded sub-image and its dimensions, which is how a single favicon.ico can carry 16, 32, and 48-pixel versions.
If the page links a web app manifest, we fetch and parse its icons array, note which entries are maskable, and evaluate PWA install eligibility (a 192×192, a 512×512, and a maskable icon). Missing icons, legacy-only ICO, SVG-only sets, and declared-vs-detected size mismatches each produce a finding, and the combined result maps to an A–F grade.
Key Features
- Full icon discovery — Favicons, apple-touch-icons, mask icons, tile image, and manifest icons in one pass.
- Real format detection — Magic-byte probing identifies the true image type, not just the extension.
- ICO sub-image parsing — Every size embedded inside a .ico file, listed individually.
- PWA eligibility — Checks for 192×192, 512×512, and maskable icons required to install.
- Graded findings — An A–F score with missing icons and mismatches called out.
- Raw JSON — The complete response for scripting and monitoring.
Common Use Cases
- Web developers — Verify a new favicon and icon set renders correctly across browsers and devices.
- PWA builders — Confirm your manifest icons meet install requirements before shipping.
- Design and brand teams — Ensure a consistent, high-resolution icon everywhere your site appears.
- SEO and QA — Catch missing apple-touch-icons and broken icon URLs during audits.
Frequently Asked Questions
What is a favicon?
A favicon is the small icon a browser shows next to a page in tabs, bookmarks, and history. Historically it was a single /favicon.ico file at the site root, but modern sites declare a whole family of icons through <link> tags in the page head — including PNG favicons at several sizes, an apple-touch-icon for iOS home screens, an SVG mask icon, and icons referenced from a web app manifest. This inspector finds all of them for the URL you enter.
What is the difference between a favicon and an apple-touch-icon?
A favicon is used by desktop and mobile browsers in tabs and bookmarks and is usually small (16–48px). An apple-touch-icon is a larger PNG (typically 180×180) that iOS and iPadOS use when someone adds your site to their home screen. If you omit it, Apple devices fall back to a screenshot of the page, which usually looks poor. The inspector checks for both and flags a missing apple-touch-icon.
What makes a site installable as a PWA?
For a Progressive Web App to be installable, the page must link a web app manifest that declares icons including at least one 192×192 and one 512×512 image, and — for a polished result on Android — a maskable icon (an icon with purpose "maskable" whose artwork fills the safe zone so the OS can crop it into any shape). This tool reads your manifest, checks those exact requirements, and tells you whether the page currently qualifies.
Why does the inspector show a format different from the file extension?
Because it probes the actual bytes of each icon rather than trusting the URL or the declared type. It reads the file’s magic bytes to identify PNG, ICO, SVG, GIF, WebP, or JPEG, and for .ico files it parses the container to list every embedded sub-image and its size. If a file is served with the wrong extension or a declared size that doesn’t match the real image, the inspector detects and reports the mismatch.
Is a single favicon.ico still enough?
For a basic browser tab, yes — but it is increasingly limited. A lone legacy ICO gives you no high-resolution icon for retina displays, no apple-touch-icon for iOS home screens, and no manifest icons for PWA install or Android. Publishing a small set of PNG favicons plus an apple-touch-icon and manifest icons is inexpensive and noticeably improves how your brand appears across devices. The inspector highlights exactly which of these you are missing.