Favicon SEO Validator & Brand Icon Checker

How to use this validator

1. Copy rendered icon link tags from page source, deployed-preview HTML, crawler-exported HTML, or production head output.
2. Paste them into the validator and run the local check.
3. Add a rel=icon declaration if the browser/search favicon is missing.
4. Add an apple-touch-icon declaration if mobile home-screen and bookmark support is missing.
5. After the structural check passes, open the linked files directly on the deployed domain and verify status, dimensions, crop, transparency, and brand contrast.

When to use it

• QA a new marketing site, landing page, SaaS app, ecommerce store, or content site before launch.
• Check Next.js metadata, Astro, WordPress, Shopify, Webflow, or headless CMS templates after icon or brand changes.
• Audit whether a PWA or mobile web app has both manifest icons and HTML head icon fallbacks.
• Review user-submitted or client-provided head snippets without uploading private staging HTML.
• Verify favicon declarations during a search snippet, Open Graph, JSON-LD, and manifest launch QA pass.
• Catch brand regressions after logo refreshes, static asset migrations, CDN moves, or app-directory metadata refactors.

Common errors

• Only shipping /favicon.ico and forgetting apple-touch-icon for mobile devices.
• Pasting React, Next.js, Helmet, or theme component code instead of the rendered <link> tags.
• Declaring icons in manifest.json but not linking browser favicon tags in the HTML head.
• Using relative paths that work in development but point to the wrong asset after a base path, static export, CDN rewrite, or subdirectory deploy.
• Forgetting to deploy the actual icon files after adding the link tags.
• Serving icon URLs that 404, redirect through auth, use the wrong MIME type, or are blocked by robots/CDN rules.
• Using an icon crop that works at 180px but becomes unreadable as a 16px browser tab or search-result favicon.
• Assuming mask-icon is required; it is useful for Safari pinned tabs but optional for most launches.

Limitations

• Structure-only validation; it does not fetch or verify icon files.
• Does not inspect image dimensions, file type, transparency, mask color, safe-area padding, or visual crop quality.
• Does not validate web app manifest icon arrays; use the manifest validator for manifest.json checks.
• Does not guarantee Google, Safari, Chrome, iOS, Android, Slack, or browser caches will immediately choose the expected icon.
• A snippet can pass while production still fails if the linked files 404, redirect unexpectedly, require authentication, or are blocked by the CDN.

Tips

• Provide at least one rel=icon and one apple-touch-icon for a basic cross-device icon setup.
• Use root-relative or absolute HTTPS paths that will resolve from the production domain, especially if the site uses a base path or CDN.
• Keep icon files small, square, high-contrast, and correctly sized, then verify the actual assets separately because this validator only reads link declarations.
• Keep favicon, apple-touch-icon, manifest icons, Open Graph images, and logo schema visually consistent so public brand surfaces do not feel mismatched.
• Use the manifest validator for web app manifest icon arrays, the Open Graph validator for social preview images, and the JSON-LD validator for logo/image schema references.
• After deployment, open the icon URLs directly or check browser DevTools Network to confirm they return 200 responses without auth, redirects, or cache-stale files.

Examples

Deep dive

FAQs

Do you fetch my icon files?

No. This validator only parses the HTML snippet you paste. It counts icon link declarations but does not request the image or SVG files.

Why is apple-touch-icon required?

Apple touch icons are commonly used by iOS and mobile bookmark/home-screen workflows. A normal favicon may cover browser tabs but still leave mobile surfaces incomplete.

Is mask-icon required?

No. Safari mask icons are counted because they can improve pinned-tab support, but missing mask-icon declarations do not fail the structural check.

Can this validate manifest icons?

No. This page checks HTML <link> tags. Use the Web App Manifest Validator to inspect manifest.json icon arrays and related PWA metadata.

Will this prove Google shows my favicon in search?

No. It confirms the HTML declarations exist. Google also depends on crawlability, asset availability, cache timing, image quality, and site signals before showing a favicon.

Should favicon, manifest, Open Graph, and JSON-LD logo assets match?

They should feel like the same brand system. Keep icon crops, colors, logo schema, social preview images, and manifest icons visually aligned while using sizes appropriate for each surface.

Is my head HTML stored?

No. Validation runs locally in your browser. The HTML snippet and icon URLs are not uploaded, logged, stored, or shared.

Related validators