Favicon Test

What is it?

A favicon is the small icon associated with your site, displayed in browser tabs, bookmark lists, browser history, and increasingly in search engine result snippets next to your URL. It is one of the smallest assets on a site and one of the most visible, because it appears every time a user looks at a tab or scans a list of search results.

Why favicons still matter in 2026

Brand recognition starts with visual cues, and the favicon is one of the earliest and most repeated visual touchpoints a user has with your site. A polished favicon makes your site look professional in every tab and bookmark; a missing or default favicon makes it look amateurish, even when the rest of the site is well-built. The asset is small to produce, but it appears in every browser tab, bookmark, and history entry, which makes it one of the highest-frequency brand impressions on the site.

Search engines also display favicons in mobile search results, where they appear next to the page title. A recognizable favicon in a list of results helps users spot your listing among a dozen competing links, contributing to click-through rate even when the snippet text is similar across results. The same icon also appears in browser tabs of returning visitors, reinforcing the brand on every visit.

Modern favicon best practices

SVG favicon: a single SVG scales crisply at any size and supports light or dark scheme variants.
Apple touch icon: a 180 by 180 pixel PNG named apple-touch-icon.png at the site root makes the site look correct when added to an iOS home screen.
High-resolution PNG variants (192 by 192 for Android, 512 by 512 for installable PWAs).
Classic favicon.ico at the root as a universal fallback for older browsers.

This test verifies that your site declares a favicon and that the file is reachable. The fix guide below covers the standard set of icon files to publish, the link tags to declare in the page head, and where to upload favicons in the major content management systems.

Pass rate:

Top 100 websites: 100%
This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
All websites: 83%
This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.

Pass rates of Top 100 US websites
2021	100%
2022	100%
2023	100%
2024	100%

100

How do I fix it?

A favicon is the small icon associated with the site, shown in browser tabs, bookmarks, history listings, and increasingly in search engine results. Fixing this issue means publishing a favicon at the conventional location and declaring it in the page <head> so browsers and search engines can find and display it.

Example

<head>
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Where to make the change

Raw HTML: upload favicon.ico to the site root and add the <link rel="icon"> tags in the <head>.
WordPress: upload the icon under Appearance, Customize, Site Identity, Site Icon. WordPress will emit the correct link tags.
Shopify: upload the icon under Online Store, Themes, Customize, Theme settings, Favicon.
Wix or Squarespace: both expose a favicon upload field in the site or design settings.
Headless or framework sites: place the favicon files in the public or static directory so they ship at the root paths.

Common causes and how to resolve them

No favicon at the root: add at least /favicon.ico. Most browsers fall back to fetching this path even when no link tag is present.
Wrong MIME type: if the favicon is served as text/html instead of image/x-icon or image/svg+xml, browsers will not render it. Check the response in the network tab.
Cached old icon after replacement: browsers cache favicons aggressively. Append a query string (?v=2) to bust the cache.
Missing high-resolution variants: modern devices need 180 x 180 (Apple), 192 x 192 (Android), and 512 x 512 (PWA) sizes for crisp rendering.

Best practices

Provide an SVG version: SVG favicons scale crisply at any size and support light or dark scheme variants.
Include an Apple touch icon: a 180 x 180 PNG named apple-touch-icon.png at the root makes the site look correct when added to an iOS home screen.
Use a consistent visual identity: the favicon should match the brand mark so users recognize the site at a glance in tabs and bookmarks.
Test in both light and dark mode: some browsers render the tab background differently. Make sure the icon stays legible in both.