thedevtoolset
Dev

Favicon Checker — Test & Validate Your Favicon Online (Free)

Free favicon checker: paste your <head> HTML or enter a URL to audit favicon.ico, SVG favicon, apple-touch-icon, the full web app manifest, and theme-color. Get a graded, platform-by-platform report, live previews of how your icons actually render, and cleanup advice for legacy tags. 100% in your browser.

Check existing favicons

Paste your <head> HTML for a full static analysis, or enter any site's URL to fetch its page and icons automatically — your own domain or someone else's.

What this favicon checker actually tests

A “favicon” isn’t one file — it’s a small stack of tags and images that different browsers, operating systems, and search engines each read differently. This checker inspects your site’s <head> (or probes your live URL) and returns a graded report grouped by where the icon actually appears: Browser & desktop, iOS & iPadOS, Android & PWA install, and Google Search. For each surface it checks the declaration and the details most tools skip — whether your SVG favicon is square, whether an .ico without a sizes attribute is quietly overriding it, whether your apple-touch-icon is square and large enough, whether your web app manifest has a name, short_name, both required icon sizes, a maskable icon, valid theme and background colors, and a stable id. Every finding explains why it matters and carries a severity — Error, Warning, or Tip — so you know what to fix first.

Uniquely, it also flags what to delete. Legacy tags like msapplication Windows tiles, apple-touch-icon-precomposed, Safari’s mask-icon, and rel="shortcut icon" are collected into a “Cleanup — safe to remove” group. Most checkers only nag about what’s missing; this one also trims the dead weight modern browsers ignore.

In Probe URL mode it also checks for implicit root icons — /favicon.ico and /apple-touch-icon.png are auto-requested by browsers and iOS even with no <link> declaring them, so a site that relies on these conventions (many do) is correctly marked OK instead of flagged as missing.

Two ways to check: paste HTML or probe a URL

Paste HTML is the most complete mode. Copy everything between your page’s <head> tags and paste it in — the checker parses the raw markup and can see every tag, including theme-color, which never shows up in a file probe. If it detects a <link rel="manifest">, it’ll prompt you to fetch that manifest (or paste it manually) to verify the icon sizes inside it.

Probe URL is faster when you don’t have the markup handy: enter any site’s address and the checker fetches the live page and its manifest, then tests every icon file actually declared in the markup — including icons served from a different CDN hostname. It works for any publicly reachable site, not just your own. The one thing it can’t reach is localhost or other private/internal addresses, since the fetch runs on our servers rather than your machine — use Paste HTML for a site you haven’t deployed yet. On the rare occasion a public page can’t be fetched at all, the checker falls back to testing well-known paths (/favicon.ico, /favicon.svg, /apple-touch-icon.png) directly, so you still get a partial result instead of nothing.

How your favicon appears in Google & Bing search results

A favicon that renders fine in a browser tab can still fail to show up next to your listing in Google or Bing. Search engines apply extra rules on top of “does the file load”:

  • Minimum size and shape. Google requires a square favicon at least 8×8 pixels, but recommends larger than 48×48 so it stays crisp — bigger is better. (The old “must be a multiple of 48” rule is a myth.) A non-square or tiny icon may be dropped from results even if the file itself is valid.
  • Same origin. The favicon must be served from the same domain as the page it represents. Serving it from a separate CDN hostname or subdomain can prevent it from being picked up.
  • Crawlable. The favicon URL can’t be blocked by robots.txt — if a crawler can’t fetch it, it can’t display it, no matter how correctly it’s declared.
  • Standard declaration. Use a conventional <link rel="icon"> (or rel="shortcut icon") tag, or fall back to /favicon.ico at your site root, which crawlers check automatically even without a <link> tag.

This checker verifies the file exists, is reachable, and is correctly declared — the foundation every one of these rules depends on. If your favicon still doesn’t appear in search after passing every check here, work through the size, origin, and robots.txt rules above; those are the most common reasons a technically valid favicon gets skipped by search engines specifically.

See how your icons actually render

In Probe URL mode the checker doesn’t just list problems — it fetches your real icon files and renders them exactly the way each platform would: in a light and dark browser tab, a Google search result row, the iOS home screen with its rounded-square mask, the PWA install prompt, and the Android launcher, splash, and app-switcher with the adaptive-icon shapes (circle and squircle) applied. This is where subtle problems become obvious — a transparent apple-touch-icon that grows dark corners on iOS, or a maskable icon whose artwork gets clipped by Android’s mask, is something you see rather than read about.

Reading the findings

Each result is graded and color-coded by how much it matters:

  • Error (red) — something a browser will visibly break on: no favicon declared at all, a declared icon that fails to load, or a missing apple-touch-icon leaving iOS to show a screenshot instead of your icon.
  • Warning (yellow) — a gap that degrades the experience on specific platforms: no SVG favicon (you lose dark-mode support and crisp scaling), a non-square icon, a manifest missing a required size.
  • Tip (grey) — a modern best practice worth adopting: a maskable icon, a stable manifest id, a dark-mode theme-color, or removing a legacy tag.
  • Info (blue) — context the checker can’t verify automatically, like “paste your manifest to confirm icon sizes.”
  • OK (green) — confirmation that a check passed, such as meeting Chrome’s install criteria.

The score at the top is a quick headline (errors weigh most; tips only nudge it). When a finding is an error or warning, a Fix these issues — generate a complete favicon set → button appears, taking you straight to the Favicon Generator.

What this checker can’t see

Being 100% in-browser has two honest limits. It reads your markup and loads your icon files, so it can tell a broken icon from a working one and measure its dimensions — but it does not inspect raw response headers or pixel bytes, so it won’t report exact HTTP status codes, MIME-type mismatches, or embedded .ico sub-sizes (the rendered previews surface the visible effects of these instead). It also reads the HTML as served, so favicons injected by client-side JavaScript on a single-page app may not be detected — paste your rendered <head> in that case.

Using the checker

  1. Pick Paste HTML for a complete audit or a site you haven’t deployed yet, or Probe URL for a quick check of any live public site.
  2. Read each finding’s severity and detail line — they explain the why, not just the what.
  3. If you find gaps, generate every missing file — favicon.ico, SVG favicon, apple-touch-icon, manifest icons, and the markup to declare them — with the Favicon Generator.
  4. Re-run the check after deploying your fix, using a cache-busting version query string if your browser still shows the old icon.

Once your icons are technically correct, make sure the artwork itself holds up: check its foreground-on-background contrast with the color contrast checker, and preview how your title and description will actually read in results with the SERP simulator.

Frequently asked questions

  • What is a favicon checker?

    A favicon checker reads your page's <head> markup or fetches your live URL to confirm every icon browsers, phones, and search engines look for is actually present, correctly formatted, and properly linked. Instead of checking one file, it audits the whole stack at once — favicon.ico, SVG favicon, apple-touch-icon, and the web app manifest — giving an overall grade and grouping the findings by platform (browser, iOS, Android/PWA, Google Search) so you know exactly where something is broken.

  • What files does a favicon checker look for?

    A root favicon.ico for legacy browsers and automatic root-path probes, one or more PNG or SVG favicons for modern browsers, an apple-touch-icon for iOS home-screen and Safari tabs, and a web app manifest (commonly site.webmanifest) listing the icons Android and installable PWAs need. This checker verifies each one is declared in your markup — and, in Probe URL mode, that the file actually loads — not just that a <link> tag exists.

  • What size should my favicon be?

    There's no single correct size — a complete set spans 16×16 up through 512×512, plus a 180×180 apple-touch-icon and 192/512 px manifest icons. For Google Search specifically, the real requirement is simpler than people think: the icon must be square and at least 8×8 pixels, with anything larger than 48×48 recommended for crispness — the popular claim that it must be an exact multiple of 48 is a myth. This checker measures your actual icons and flags anything too small or non-square.

  • Why does my favicon checker say the favicon is missing when I can see it in the tab?

    Browsers cache favicons aggressively, sometimes for days, so your tab can show a stale icon that no longer matches your live <head> markup. This checker reads the actual HTML or fetches the file directly, bypassing your browser's cache. If it reports missing, hard-refresh the page and re-check — and if it still shows in the tab, add a version query string like favicon.ico?v=2 to force browsers to fetch the new file.

  • Why doesn't my favicon show up in Google search results?

    Google requires your favicon to be square (1:1) and at least 8×8 CSS pixels — but it recommends larger than 48×48 so the icon stays crisp in results. The old advice that it must be an exact multiple of 48 is a myth; any square icon works, bigger is better. It also has to be served from the same origin as the page, crawlable (not blocked by robots.txt), and declared with a standard <link rel="icon"> tag. A favicon that's technically present but tiny, non-square, or cross-origin can still fail to appear in the SERP even though it loads fine in a browser tab. In Probe URL mode this checker measures the actual dimensions of your favicon and flags it if it isn't square or is under 48×48.

  • What's the difference between favicon.ico and an SVG favicon?

    favicon.ico is the original format every browser supports as a fallback — this checker verifies it's present and reachable. An SVG favicon, declared with <link rel="icon" type="image/svg+xml">, is a modern addition: it scales perfectly at any size and can switch artwork automatically in dark mode via a CSS media query. Ship both — the SVG for modern browsers, the .ico as a universal fallback — and this checker flags it if either is missing.

  • Is there a favicon checker Chrome extension?

    No install needed. This is a web-based checker that runs in any browser tab — paste your HTML or enter a URL and it runs the same checks an extension would, without adding anything to your browser.

  • Why does Probe URL mode show fewer results than Paste HTML mode?

    Probe URL fetches your page's HTML and manifest through our server, so it works for any publicly reachable site — yours or someone else's. It can't reach localhost or other private/internal addresses, since the fetch happens on our servers rather than your machine, and it's deliberately blocked from probing internal networks for security. In the rare case a page can't be fetched at all, the checker falls back to testing well-known file paths only (/favicon.ico, /favicon.svg, /apple-touch-icon.png) and can't see tags like theme-color that live only in markup. Paste HTML mode always gives the complete picture, and it's the only option for a site you haven't deployed yet.

  • Do I need a favicon for a Progressive Web App (PWA)?

    You need more than a favicon — PWAs require a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank" rel="noopener" aria-label="MDN reference for the web app manifest (opens in new tab)">web app manifest</a> with at least a 192×192 and a 512×512 icon, referenced via <link rel="manifest">, for Chrome and Android to allow home-screen installation. This checker verifies the manifest is linked and, when you supply the manifest JSON or use Probe URL, confirms both required sizes are present with at least one non-maskable icon.

  • What does a favicon 404 error mean?

    It means the path in your <link rel="icon"> tag — or the /favicon.ico browsers request automatically even with no tag at all — points to a file that isn't actually on your server: never uploaded, in the wrong folder, or referenced with the wrong href. Confirm the file exists at the exact URL the markup points to; a missing favicon also quietly fills your server logs with 404s from every browser that tries the default path.

  • How do I fix a 'missing web app manifest' warning?

    Create a site.webmanifest file with your app's name and an icons array covering at least 192×192 and 512×512 px, upload it to your site's root, and link it with <link rel="manifest" href="/site.webmanifest">. That's what lets Chrome and Android offer the install-to-home-screen prompt. This checker confirms the tag is present and, if you supply the manifest JSON, checks that both required sizes are actually inside it.

  • Can I use a transparent background on my favicon?

    Yes for PNG and SVG favicons — transparency lets the same icon look right in both light and dark browser tabs. The one exception is the apple-touch-icon: iOS doesn't support transparency there, so see-through areas render as black corners on the home screen instead of blending in. Give your apple-touch-icon a solid background and use this checker's rendered previews to confirm it looks right before you ship it.

  • What's the correct HTML to pass a favicon check?

    A modern minimal set covers a favicon.ico fallback, an SVG favicon for crisp scaling and dark mode, an apple-touch-icon for iOS, and a manifest link for PWA install: <link rel="icon" href="/favicon.ico" sizes="any">, <link rel="icon" type="image/svg+xml" href="/favicon.svg">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, and <link rel="manifest" href="/site.webmanifest">. Paste this into Paste HTML mode and the checker confirms each tag is declared; run Probe URL against the live site and it also confirms every file actually loads. Or generate the full set and matching markup with the <a href="/tools/favicon-generator">Favicon Generator</a>.

  • Can a CMS or theme update break my favicon?

    Yes — WordPress, Shopify, Webflow, and similar platforms inject favicon tags automatically, but a theme update, a new caching or SEO plugin, or custom head code can silently change or remove those paths, turning a working favicon into a 404. It's easy to miss because your own browser tab may still show a cached copy of the old icon. Re-run this checker with Probe URL after any theme, plugin, or template change to catch it early.

Related tools