TL;DR
- Validation Matters: A broken favicon isn’t just a missing icon; it causes 404 errors in server logs and degrades perceived brand quality.
- Comprehensive Analysis: This tool crawls your site like a browser to verify
favicon.ico, PNG icons, Apple Touch Icons, and Web Manifests. - Actionable Feedback: Get specific reports on file reachability, dimension mismatches, and format validity.
Why validate favicons?
Deploying a favicon seems simple—upload a file, add a tag—but in practice, it is prone to silent failures. Modern browser ecosystems (Desktop, Android, iOS) all have different requirements.
- Browser Caching: Local browsers cache favicons aggressively, often hiding deployment issues that new visitors (and search engines) see.
- Fragmented Standards: You need more than just
favicon.ico. Apple devices look forapple-touch-icon. Android devices and PWAs look for asite.webmanifest. - Server Configuration: Correct file paths in HTML mean nothing if your server returns 403 Forbidden or the wrong MIME type.
This checker acts as a neutral third-party client, bypassing your local cache to show you the true state of your favicon deployment.
What checks are performed
Our analyzer performs a multi-step audit of your target URL:
- HTML Parsing: We scrape the
<head>to find all declared icon links (rel="icon",rel="apple-touch-icon",rel="manifest"). - Manifest Validation: If a Web Manifest is found, we fetch it and parse the
iconsarray to verify declared sizes match actual file dimensions. - Asset Reachability: We attempt to download every referenced icon to verify it returns a
200 OKstatus. - Format & Dimensions: We inspect the binary data of ensuring the file is a valid image (ICO, PNG, SVG) and that its dimensions match what is declared in the HTML/Manifest.
- Implicit Discovery: We check for standard conventions like
/favicon.icoand/apple-touch-icon.pngeven if they aren’t explicitly linked.
Common deployment failures
1. The “Ghost” Icon
You have a <link rel="icon" href="/icon.png"> tag, but the file at that URL returns a 404. Fix: Verify the file path is correct relative to your domain root.
2. Format Mismatch
You declare type="image/png" but serve a JPEG or ICO file. Some strict browsers may reject the icon. Fix: Ensure the Content-Type header from your server matches the actual file format.
3. Dimension Lying
Your HTML says sizes="32x32", but the actual image is 16x16 or 64x64. This forces the browser to resize the image on the fly, often resulting in blurriness. Fix: Use the Favicon Generator to produce exact sizes.
4. Apple Touch Icon Missing
iOS devices do not use the standard favicon. Without an apple-touch-icon, users adding your site to their home screen get a generic screenshot of the page. Fix: Always include a 180x180 PNG specifically for Apple devices.
Best Practices for a “Perfect” Score
To achieve a robust favicon setup:
- Root Fallback: Always have a
favicon.icoat the root (/favicon.ico) for legacy tools and RSS readers. - SVG for Modern: Use an SVG favicon (
type="image/svg+xml") for resolution-independence in modern browsers. - Manifest: distinct icons (src, sizes, type) in a
manifest.jsonfor Android and Chrome. - Cache Busting: If you update your icon, append a query string (e.g.,
?v=2) to force browsers to re-fetch it.
FAQ
Why does the checker say “Missing” when I can see it?
If you can see it, your browser has likely cached an older version. The checker sees what a new visitor sees. Check your file permissions and ensuring the file path is absolute (e.g., /favicon.ico) rather than relative if you have deep URL structures.
Do I really need all these files?
Strictly speaking, favicon.ico is the bare minimum. However, for a professional presence on mobile home screens, taskbars, and high-DPI displays, the full set (ICO + PNGs + Manifest) is standard industry practice.
Can I use a CDN?
Yes. Just ensure your <link> tags point to the absolute URL on the CDN (e.g., https://cdn.mysite.com/favicon.ico) and that CORS headers are configured if necessary (though usually not strict for favicons).