Favicon Checker

A favicon is the small icon a browser shows next to your page title in tabs, bookmarks, history lists, and home-screen shortcuts. The name is short for "favorite icon," coined by Microsoft in 1999 when IE 5 introduced /favicon.ico at the site root. Today the favicon is six files, not one. Desktop browsers use a 32x32 PNG or SVG. iOS uses a 180x180 PNG via apple-touch-icon. Android pulls 192x192 and 512x512 PNGs from manifest.json. Safari pinned tabs use a monochrome SVG via mask-icon. The legacy /favicon.ico is the fallback when nothing else is declared. A complete setup gives every device the right size and format, keeps your brand sharp at every scale, and avoids the generic globe placeholder mobile platforms render when icons are missing or sized wrong.

A favicon checker fetches the HTML of any URL, parses every favicon-family link tag, and reports which icons are declared, their sizes, formats, and whether the URLs resolve. It walks the head for <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon">, and <link rel="manifest">, then probes /favicon.ico at the domain root as a fallback. It groups results by device target so you see what desktop Chrome, iOS Safari, Android Chrome, and Safari pinned tabs each render. Run this favicon test before every deploy to catch missing variants, broken URLs, and wrong sizes in under three seconds. The output also flags whether the manifest.json itself returns 200 and whether the icons array inside it points to real files, which is where most Android-specific bugs hide.

The modern set is 16x16, 32x32, 180x180, 192x192, and 512x512. The 16x16 and 32x32 PNGs handle desktop browser tabs and the address bar. Browsers pick the closest match to the rendered size, so shipping both prevents upscaling. The 180x180 PNG is the apple-touch-icon used by iOS for home-screen tiles. Smaller sizes get upscaled and look blurry on Retina displays. The 192x192 and 512x512 PNGs sit in manifest.json for Android home screens and PWA splash screens. Older guides recommend ten or more sizes (57x57, 72x72, 114x114, 144x144). Modern browsers ignore most of those. Five files cover every real-world device, and the favicon validator flags any size that does not match the spec so you can drop the legacy bloat.

Use all three for full coverage. ICO is the legacy format, required for /favicon.ico at the root because some older browsers and crawlers only check there. A 16x16 plus 32x32 multi-resolution ICO file is the safest fallback. PNG is the modern desktop and mobile format. Use it for <link rel="icon" sizes="32x32">, apple-touch-icon, and the manifest icons. PNG handles transparency cleanly and renders sharp at the declared size. SVG is the future. Use it for <link rel="icon" type="image/svg+xml"> and Safari's mask-icon. SVG scales to any DPI without blurring, weighs 1-3 KB, and supports dark-mode variants via media queries. Around 92% of browsers in use today support SVG favicons, with the remaining 8% silently falling back to your declared PNG.

When iOS users tap "Add to Home Screen" from Safari, the OS pulls the apple-touch-icon to render the home-screen tile. If you do not declare one, iOS takes a screenshot of the page and uses that, which looks blurry and unbranded. The expected size is 180x180 PNG with a solid background, declared as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Around 25% of mobile traffic globally comes from iOS, and a missing apple-touch-icon means every one of those users who saves your site sees a placeholder instead of your logo. The apple-touch-icon checker portion of this tool flags whether the file is declared, the size matches 180x180, the URL returns 200, and the background is solid rather than transparent.

manifest.json is the Web App Manifest, a small JSON file that tells Android (and Chrome desktop) how your site behaves when installed as a Progressive Web App. It declares the app name, theme color, background color, display mode, and most importantly the icons array. Android pulls 192x192 and 512x512 PNGs from the manifest to render the home-screen tile, splash screen, and app drawer entry. Without a manifest declared via <link rel="manifest" href="/manifest.json">, Android falls back to a screenshot of your page or a generic globe icon. Around 70% of mobile traffic worldwide runs on Android, so a missing manifest is a missing brand impression every time a user installs your site or pins it to the home screen.

mask-icon is a Safari-specific declaration for pinned-tab icons in macOS Safari. When a user pins your tab, Safari renders a monochrome silhouette using the SVG you declare via <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">. The SVG must be a single-color vector. Safari ignores any color in the file and applies the color attribute from the link tag instead. Around 8% of desktop traffic globally uses Safari, and pinned tabs are a power-user feature, but skipping mask-icon means your brand renders as a generic placeholder dot for those users. The icon should be simple, recognizable at 16x16, and use bold shapes that read clearly in monochrome with no thin lines or fine detail.

Five mistakes account for most broken favicon setups. First, declaring only /favicon.ico and skipping the other five variants, which leaves iOS and Android with placeholders. Second, shipping the wrong apple-touch-icon size (152x152 instead of 180x180), which iOS upscales into blur. Third, forgetting to link manifest.json from the HTML head, which makes Android ignore the manifest icons entirely. Fourth, using transparent backgrounds on apple-touch-icons, which iOS renders as a black square instead of honoring transparency. Fifth, aggressive browser caching that shows the old favicon for weeks after an update. Fix the cache issue by appending a version query string (favicon.ico?v=2) or using hashed filenames in your build pipeline.

Yes, if you care about how your brand looks in dark-mode tabs. Around 60% of users now run their OS in dark mode by default, and a dark-on-dark favicon (a black logo on a dark gray tab bar) disappears visually. The fix is an SVG favicon with a media query: <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> paired with a light-mode default. Inside the SVG you can use CSS to swap fill colors based on the same media query. This requires the SVG format because PNG does not support media queries. Browsers that do not understand the syntax fall back to the default <link rel="icon">, so you keep full coverage with no extra HTML overhead.

Browsers cache favicons aggressively, often for one to four weeks, sometimes longer. Chrome stores favicons in its Favicon database with no explicit expiry. Safari caches them per session and across restarts. Firefox caches based on standard HTTP cache headers. If you update your favicon and users still see the old one a week later, the cache is the cause. Three fixes work reliably. First, append a version query string to the favicon URL (href="/favicon.ico?v=2026"), which browsers treat as a different resource. Second, change the filename entirely (favicon-v2.ico) and update the link tag. Third, set explicit Cache-Control headers on the favicon response with a short max-age. Whichever route you pick, run a favicon test after deploy to confirm the new file is being served from origin.

A favicon does not directly affect Google rankings, but it affects click-through rate from search results, which Google uses as an indirect quality signal. Google Search shows favicons next to organic results on mobile (since 2019) and desktop (since 2020). Pages with a clear, branded favicon get measurably higher CTR than pages with a missing or default favicon. A 2023 SEO study of 100,000 SERPs found a 4-8% CTR lift for results with branded favicons compared to those without. Beyond CTR, a missing or broken favicon signals a low-quality or abandoned site to users, which hurts trust and engagement. Google requires the favicon to be at least 8x8 pixels, multiple of 8, and crawlable from a stable URL to display it in search results.

Yes. This favicon checker accepts any public URL and fetches the HTML server-side, so you can audit your own site, a competitor, or any reference design. Paste the URL with the protocol included (https://example.com), hit Check favicons, and the tool returns every declared icon within two to three seconds. The check works on any page, not just the homepage. If a site uses different favicons on subdomains or sections, test the specific URL you care about. The tool handles redirects, follows the final URL, and reports any 404s on icon files. Use it to benchmark how leading sites in your industry set up their favicons before designing your own, then copy the patterns that hold up across desktop and mobile.

/favicon.ico is the legacy fallback path. Browsers automatically request it from the domain root if no other icon is declared in the HTML. The format is ICO, a Windows container that holds multiple resolutions in one file. <link rel="icon"> is the modern HTML declaration. It points to any icon file (PNG, SVG, or ICO) at any URL with optional sizes and type attributes. Browsers prefer <link rel="icon"> when present and only fall back to /favicon.ico if it is missing or returns 404. The best practice is to ship both. Declare modern PNG and SVG icons via <link rel="icon"> for tabs, and keep a multi-resolution ICO at /favicon.ico for old browsers, RSS readers, and crawlers that only check the root path.

Three checks confirm a working favicon. First, run a favicon checker on the page URL to verify every declaration is present, sized correctly, and returns 200. Second, hard-refresh the page in your browser (Cmd+Shift+R or Ctrl+Shift+F5) to bypass cache, then look at the tab. Third, save the page to your iOS home screen and Android home screen on a real device to confirm those icons render correctly. Browser dev tools also help. Open the Network tab, filter by "favicon," and reload to see which icon files the browser actually requested. If you see 404s, fix the paths and redeploy. Use the favicon test on every deploy to catch regressions before users do, especially after framework upgrades that change static asset paths.

The best favicon checker is the one that audits all six declarations, not just /favicon.ico. It should fetch the page server-side, parse every link tag, validate that each icon URL returns 200, report the actual file size and dimensions, group results by device target (desktop, iOS, Android, Safari pinned), and flag missing variants. It should also check the manifest.json contents, not just whether the manifest is linked. This favicon checker covers all six checks in a single pass and returns results in under three seconds. Browser dev tools work for spot checks but require manual inspection of each link tag. Online validators that only check /favicon.ico miss the modern variants entirely. Run a full audit before launch and after every static asset migration to keep the icon set clean.