Favicon Checker

A favicon is the small icon that represents your website in browser tabs, bookmark lists, history entries, and increasingly in search engine results. The name is short for "favorites icon," dating back to Internet Explorer 5 in 1999 when it was introduced as the icon displayed in the browser's favorites bar.

What started as a 16x16 pixel ICO file has grown into a family of icons across multiple sizes, formats, and contexts. Modern websites need favicons for browser tabs (16x16 and 32x32), browser bookmark panels, Android and iOS home screen shortcuts (up to 512x512), Windows taskbar pins, macOS dock icons, and Google's search results. Each context may pull from a different icon file, and each has its own size and format expectations.

Despite its small size, the favicon is one of the most visible elements of your brand's web presence. It appears every time someone has your site open in a tab, every time they scan their bookmarks, and now every time your page shows up in Google's mobile search results. A missing or broken favicon is a missed branding opportunity that makes your site look unfinished.

The checker examines your site's favicon implementation across every context where the icon appears.

• HTML link tag detection. The tool scans your page's HTML for all favicon-related link tags, including <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, and references to a web app manifest. It reports which tags are present, which are missing, and whether the tags are properly formatted with the correct attributes.
• File availability. For each favicon reference found in your HTML, the tool attempts to fetch the actual file and verifies it loads successfully. A link tag pointing to /favicon.ico doesn't help if the file returns a 404. The checker catches broken references, incorrect paths, and files blocked by server configuration.
• Root favicon.ico check. Regardless of what your HTML specifies, browsers and crawlers often request /favicon.ico from your domain root as a fallback. The tool checks whether this file exists and loads correctly. A missing root favicon.ico generates 404 errors in your server logs every time a browser or bot requests it.
• Format and size verification. The tool identifies the format (ICO, PNG, SVG, WebP) and pixel dimensions of each favicon file. It checks whether you have the sizes needed for all major contexts: 16x16 for browser tabs, 32x32 for higher-density tabs, 180x180 for Apple touch icons, and 192x192 and 512x512 for Android and PWA use.
• Web app manifest inspection. If your site includes a web app manifest (manifest.json or site.webmanifest), the tool reads it and checks the icon entries defined there. The manifest is what Android devices and progressive web apps use to determine home screen icons, splash screen graphics, and app-level branding.
• Visual preview. The tool renders your favicon at each detected size in the contexts where it would appear: a simulated browser tab, a bookmark entry, a mobile home screen icon, and a Google search result listing. This visual preview shows you exactly what users see.

Google started displaying favicons next to search results in mobile search in 2019 and has since expanded the feature to desktop results as well. Your favicon appears to the left of your site name and breadcrumb trail, directly above the page title in each listing.

This placement gives favicons a new level of visibility and importance. In the browser tab, your favicon competes with a handful of other open tabs. In search results, it's lined up next to every other result on the page. A polished, recognizable favicon reinforces your brand. A missing favicon shows a default gray globe icon that makes your listing look generic. A blurry or poorly designed favicon can look worse than no favicon at all.

Google has specific requirements for favicons in search results. The icon must be a multiple of 48px (48x48 being the minimum), it must be square, and it must visually represent your site's brand. Google reserves the right to replace your favicon with a default icon if it determines the favicon doesn't meet its guidelines.

The modern favicon landscape requires multiple files to cover every context. Here's what a complete implementation looks like.

• favicon.ico at the root. The classic format. Include 16x16 and 32x32 sizes packed into a single ICO file. This covers legacy browser support and serves as the universal fallback. Every website should have this file at the domain root.
• PNG at 32x32. Referenced with <link rel="icon" type="image/png" sizes="32x32"> in your HTML. This is the primary icon modern browsers use for tabs on standard-density displays.
• PNG at 16x16. The smaller tab icon variant. Some browsers still request this specifically, though most will downscale the 32x32 version if needed.
• Apple touch icon at 180x180. Referenced with <link rel="apple-touch-icon" sizes="180x180">. This is what iOS devices use when someone adds your site to their home screen.
• PNG at 192x192 and 512x512. These go in your web app manifest and are used by Android devices for home screen shortcuts, app switcher icons, and splash screens.
• SVG favicon (optional but growing). Some modern browsers support SVG favicons referenced with <link rel="icon" type="image/svg+xml">. The advantage of SVG is infinite scalability and CSS media query support for light/dark mode switching.

Favicons don't influence rankings. Google has been clear that having or lacking a favicon doesn't change where your page appears in search results. But favicons do affect click-through rates, brand perception, and user trust, all of which have downstream effects on your search performance.

• Click-through rate in search results. A recognizable favicon next to your listing in Google's results builds trust and brand recognition. Users who've visited your site before may recognize the icon and be more likely to click.
• Brand recall. Favicons are one of the few brand elements that stay visible during the entire browsing session. As long as your tab is open, your favicon is on screen.
• Perceived professionalism. A missing favicon is a small detail, but it's the kind of detail that shapes first impressions. For users evaluating whether to trust a site, every signal matters.
• Server log cleanliness. Every browser and many bots request /favicon.ico on every page load. If the file is missing, each request generates a 404 error in your server logs.

Designing for favicon sizes is a different discipline from designing logos or marketing graphics. The constraints are extreme, and what works at 500px often fails completely at 16px.

• Simplify aggressively. Your full logo with text, taglines, and fine details will be unrecognizable at 16x16 pixels. Most effective favicons are a single letterform, a simple symbol, or an abstract mark.
• Use your brand colors. Color recognition works even when shape details are too small to make out. A distinctive brand color in your favicon connects the icon to your broader visual identity.
• Design at the target size. Don't design at 512px and scale down. Start at 16x16 or 32x32 pixels. Pixel-level decisions matter at these sizes.
• Test on real backgrounds. Browser tabs can be light or dark depending on the OS and browser theme. Your favicon needs to be visible on both. Avoid favicons that are entirely white or entirely dark.
• Provide size-specific versions. The 16x16 version may need to be a slightly different design than the 512x512 version. At 16px, you might use a single letter. At 512px, you can include more detail.

The consequences of a missing favicon range from cosmetic to mildly technical.

• Generic icon in browser tabs. Browsers display a default globe, document, or blank icon when no favicon is found. In a row of tabs, your site becomes the one with no identity.
• Generic icon in search results. Google shows a gray globe next to your listing when it can't find a qualifying favicon. Your competitors with proper favicons look more established by comparison.
• Broken reference errors. If your HTML includes a favicon link tag that points to a file that doesn't exist, browsers log a failed resource request. This shows up as a 404 in your server logs.
• Missed home screen branding. When someone adds your site to their phone's home screen, the device needs an icon. Without an Apple touch icon or manifest-defined icon, the device either uses a screenshot of your page or a generic placeholder.
• 404 log pollution. Browsers request /favicon.ico automatically, even if your HTML doesn't reference it. Without the file at your root, every page view generates a 404 entry.

Implementation depends on your platform, but the core process is the same everywhere: create the icon files, place them on your server, and add the appropriate link tags to your HTML head.

• WordPress. The built-in Site Icon feature under Appearance then Customize then Site Identity handles the basics. Upload a 512x512 image and WordPress generates the smaller sizes automatically.
• Static HTML sites. Place your icon files in the root directory or a dedicated icons folder. Add the link tags directly to the head section of your HTML. At minimum, include a favicon.ico at the root and link tags for the 32x32 PNG and 180x180 Apple touch icon.
• Shopify. Upload your favicon through the theme customizer under Theme Settings. For additional sizes beyond what the customizer supports, edit the theme.liquid file directly.
• Next.js, Gatsby, and other frameworks. Most modern frameworks have a public or static directory where favicon files go, plus a head management system for adding the link tags.
• Web app manifest. Create a manifest.json or site.webmanifest file that defines your icons for Android and PWA contexts. Reference it with <link rel="manifest" href="https://cdn.contentpowered.com/site.webmanifest">. Include entries for at least 192x192 and 512x512 icon sizes.

After implementation, run this checker to verify everything is loading correctly. Then test on actual devices to confirm the icons appear as expected.

• Only providing favicon.ico and nothing else. The ICO file covers legacy browsers and the root fallback, but it doesn't cover Apple touch icons, Android home screen shortcuts, or PWA requirements.
• Using a full logo with text as the favicon. Text is illegible at 16 pixels. Extract the icon element or use the first letter of your brand name as the favicon.
• Forgetting the apple-touch-icon. Without it, iOS devices either use a screenshot thumbnail or a default icon when someone adds your site to their home screen.
• Referencing a favicon that doesn't exist. A link tag pointing to a wrong path creates a silent failure. The browser logs a 404 and falls back to the root favicon.ico if it exists.
• Not testing on dark mode. A favicon designed for light browser themes may vanish on dark themes and vice versa.
• Caching problems after updates. Browsers cache favicons aggressively. After updating your favicon, append a version query string to your link tags (like ?v=2) to force browsers to fetch the new version.