Free Favicon Checker & Analyzer
Analyze favicon declarations in HTML head. Check for missing sizes and best practices. Free, fast, and works entirely in your browser with no sign-up required.
Updated
Favicon Checker & Analyzer
Analyze favicon declarations in your HTML head. Find missing sizes and get best-practice recommendations.
Paste HTML Head Section
Copy the <head> section from your webpage source (Ctrl/Cmd+U to view page source), paste it below, and click Analyze.
Favicon Best Practices
A complete favicon setup typically includes:
/favicon.ico— 16×16 + 32×32 combined, for legacy browsersfavicon-16x16.png+favicon-32x32.png— modern browsersapple-touch-icon.pngat 180×180 — iOS home screenandroid-chrome-192x192.png+512x512.png— Android + PWAsite.webmanifest— PWA manifest with icon declarationsmeta name="theme-color"— browser UI color on mobile
Tools like RealFaviconGenerator.net can generate all sizes from a single source image.
Related Tools
Frequently Asked Questions
What is the Favicon Checker & Analyzer?
The Favicon Checker & Analyzer is a free online tool that analyze favicon declarations in html head. check for missing sizes and best practices. It runs entirely in your browser with no installation or sign-up needed.
What favicon sizes should I have?
Recommended: 16x16, 32x32, 180x180 (Apple Touch Icon), and a web manifest with 192x192 and 512x512.
How do I use it?
Paste your HTML <head> section and the tool will extract and analyze all favicon declarations.
Is it free?
Yes, completely free.
Is my data safe with this tool?
Absolutely. The Favicon Checker & Analyzer processes everything client-side in your browser. No data is uploaded to or stored on any server. Your content remains private on your device at all times.
Does the Favicon Checker & Analyzer work on mobile devices?
Yes, the Favicon Checker & Analyzer is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.
Do I need to create an account to use this tool?
No account or registration is needed. Simply open the Favicon Checker & Analyzer in your browser and start using it immediately. There are no sign-up walls or usage restrictions.
Which browsers are supported?
The Favicon Checker & Analyzer works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.
Why does a favicon need so many different files instead of just one?
Because no single file satisfies every platform. Desktop browsers read small PNGs or an .ico for the tab and bookmark bar, iOS uses a separate 180×180 apple-touch-icon when someone saves your site to the home screen, and Android and PWAs pull their launcher icons (192×192 and 512×512) from a web manifest rather than any link tag. A theme-color meta then tints the mobile browser UI. Each surface looks at a different declaration, so a robust setup combines a legacy /favicon.ico fallback, modern 16×16 and 32×32 PNGs, an Apple touch icon, a manifest, and theme-color. Miss one and that surface silently falls back to a blank or cropped image. Paste your head section into the analyzer to see which of these six declarations you actually have and which are missing.
What is the difference between rel="icon" and rel="apple-touch-icon"?
They target different contexts. A link with rel="icon" (or the legacy rel="shortcut icon") supplies the small icon shown in desktop browser tabs, bookmarks, and history, and is usually declared at 16×16 and 32×32 plus an .ico fallback. A link with rel="apple-touch-icon" is read by Safari and iOS when a user adds your page to their home screen; it should be a single 180×180 PNG with no transparency, since iOS adds its own rounded corners. Using one in place of the other leaves a gap: skip the apple-touch-icon and home-screen shortcuts show a cropped screenshot instead of your logo. The analyzer lists every icon link it finds with its rel, href, sizes, and type, and flags both the desktop icons and the Apple touch icon separately so you can confirm each is declared correctly.
How does the analyzer find favicon tags if I only paste part of my HTML?
The tool scans whatever markup you give it for icon-bearing tags, so it works on a full page source or just the head section. It matches every <link> whose rel contains icon, apple-touch-icon, manifest, shortcut, or mask-icon, and every <meta> for theme-color, msapplication-TileImage, or msapplication-TileColor. For each it pulls out the rel or name, the href or content, the sizes, and the type, then lists them in a table. It does not fetch the referenced image files or load a live URL, which is why it happily reads markup from staging sites, password-protected pages, or local HTML. For the most complete result, paste your entire <head>, since that is where favicon declarations live. Drop your markup in and the analyzer reports every icon tag it detects in seconds.
Is a web manifest required just for a favicon to work?
No, a basic favicon works without one. Browsers will display a tab icon from a plain rel="icon" link or a /favicon.ico, and Safari will use an apple-touch-icon, none of which depend on a manifest. The manifest matters when you want Android Chrome and progressive web apps to show a proper launcher icon, since those platforms read their 192×192 and 512×512 icons from the site.webmanifest rather than from link tags. Without it, an Android home-screen shortcut falls back to a generic or letter-based icon. So a manifest is optional for a tab favicon but expected for a complete, install-ready setup, which is why the analyzer marks a missing manifest as a gap rather than a hard error. Run your head section through the tool to see whether your manifest and theme-color are present.
Why is my favicon not showing even though the link tag is in the head?
A correct tag is only half the story. The most common causes are a wrong href path, so the browser requests a file that returns 404; aggressive browser caching, where the old icon or a blank one sticks for a long time after you update the file; or the image itself being a malformed or wrong-format file the browser cannot render. Declaring sizes that do not match the actual image, or pointing rel="icon" at a file that no longer exists, produces the same blank result. This analyzer checks the declarations in your markup, not the files on your server, so it confirms whether the tags and sizes are present and well-formed, then flags what is missing. Paste your head here first to rule out tag problems, then verify each href actually loads and try a hard refresh to clear the cache.
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/favicon-checker" title="Free Favicon Checker & Analyzer — The Toolbox" width="100%" height="280" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/website-tools/favicon-checker?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Favicon Checker & Analyzer</a> by The Toolbox</p>Related Tools
Free Website Speed Test
Analyze website page load time, performance metrics, and optimization opportunities. Free, fast, and works entirely in your browser with no sign-up required.
Free Mobile Friendly Test
Check if your site is optimized for mobile devices. Free, fast, and works entirely in your browser with no sign-up required.
Free Meta Tag Extractor
Extract and review all meta tags from any webpage for SEO and social media analysis. Free, fast, and works entirely in your browser with no sign-up required.
Free Website Screenshot Tool
Capture full-page or viewport screenshots of any webpage for design review and testing. Free, fast, and works entirely in your browser with no sign-up required.
About the Favicon Checker & Analyzer
The Favicon Checker & Analyzer is a free tool for auditing the favicon setup declared in a page's HTML <head>. Paste the head section of any webpage and it extracts every icon-related <link> and <meta> tag, lists exactly what it found, and grades the setup against the sizes and formats modern browsers expect. It is built for front-end developers, SEO specialists, and site owners who want to confirm their favicon shows up cleanly in browser tabs, bookmarks, mobile home screens, and search results — without guessing which tags are missing.
A favicon is the small icon a browser displays in the tab, the bookmark bar, and the history list. A "complete" favicon today is no longer a single file: different platforms read different declarations, so a robust setup spans a legacy .ico, modern PNG sizes, an Apple touch icon, an Android web manifest, and a theme-color hint. This tool makes those gaps visible at a glance.
What the analyzer checks for
After you paste your markup, the tool scans for icon-bearing tags and reports against six best-practice checks, marking each as satisfied, a warning, or missing:
- favicon.ico fallback — a
rel="icon"orshortcut iconpointing at a.icofile, still the safest default for older browsers. - 32×32 icon — the standard high-DPI tab and bookmark size for desktop browsers.
- 16×16 icon — the classic small tab size, declared with
sizes="16x16". - Apple Touch Icon (180×180) —
rel="apple-touch-icon", used when someone adds your site to an iOS home screen. - Web App Manifest —
rel="manifest", which supplies Android and PWA icons (typically 192×192 and 512×512). - Theme color meta —
<meta name="theme-color">, which tints the browser UI on mobile.
It also surfaces related declarations it finds along the way, such as mask-icon links and the msapplication-TileImage and msapplication-TileColor meta tags used by older Windows tiles.
How to use it
Open your page in a browser and view its source with Ctrl+U (or Cmd+U on Mac), copy the <head> section, paste it into the box, and click Analyze. The tool parses the markup and returns three things: a completeness score showing how many of the checks passed, a list of every favicon declaration it detected (tag type, rel, href, sizes, and type), and specific recommendations. Each missing item comes with the exact tag to add — for example, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — so you can copy the fix straight into your template.
Because the analyzer reads markup you paste in rather than fetching a live URL, it works on staging pages, password-protected sites, and local HTML files too. Everything runs in your browser; nothing you paste is uploaded, stored, or sent to any server, and there is no sign-up.
Why a complete favicon setup matters
A missing or malformed favicon is a small but persistent quality signal. Browsers fall back to a blank document icon, which makes your tab harder to spot among many open tabs and looks unfinished next to bookmarked competitors. On mobile, a missing Apple touch icon or manifest means a home-screen shortcut shows a cropped screenshot instead of your brand mark, and Android progressive web apps lose their launcher icon entirely.
A typical production-ready setup includes /favicon.ico (16×16 and 32×32 combined for legacy browsers), separate favicon-16x16.png and favicon-32x32.png files for modern browsers, a 180×180 apple-touch-icon.png, 192×192 and 512×512 PNGs referenced from a site.webmanifest, and a theme-color meta tag. Run your head section through the analyzer after any redesign or framework migration — these tags are easy to drop during a rebuild, and this check catches the gaps before users do.