Favicon - MetricSpot docs

Q: Why is my favicon not showing in Google search results?

Three common causes: 1. The URL returns a 404 or 403 — check with curl -I https://yoursite.com/favicon.ico. 2. The icon is too small (under 8×8) — generate a multi-resolution ICO at 16, 32, and 48. 3. Google hasn't recrawled the site since you added it — wait up to a week, or request indexing in Search Console.

Q: What about the dark/light favicon trick?

Modern browsers support media-query SVG icons: `html ` Or embed both in one SVG with a tag using prefers-color-scheme. Either works; the second is one fewer HTTP request.

What this check does

Looks in <head> for a <link rel="icon"> or <link rel="shortcut icon"> (or, as a fallback, a /favicon.ico at the domain root) and verifies the referenced file loads.

Why it matters

Three places use your favicon, all of them user-facing:

Browser tab strips and bookmarks — instant visual identification when a user has 30 tabs open.
Google Search results — Google shows favicons next to the site name on mobile SERPs and increasingly on desktop. Sites without one display a generic globe icon, which looks unfinished next to competitors.
Browser history, downloads, OS app switchers — anywhere the OS or browser caches your site’s identity.

Missing the favicon is the visual equivalent of mailing a letter without a return address. The site still works; it just doesn’t look serious.

How to fix it

Ship two icon files and link them properly:

1. The classic .ico — for legacy browsers and the auto-detect path.

Place it at the domain root:

public/favicon.ico   (16×16, 32×32 multi-resolution ICO)

Most browsers auto-fetch /favicon.ico even without a <link> tag, but explicit is better.

2. An SVG icon — for modern browsers, scales to any size.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

The browser picks whichever it prefers (Chrome and Firefox prefer SVG; Safari falls back to ICO).

3. PWA / large-icon use — pair with apple-touch-icon and the web manifest.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

See the Apple touch icon and web manifest checks.

Complete head block:

<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">
<link rel="manifest" href="/site.webmanifest">

That’s everything most sites need.

Generate the full set from one source:

RealFaviconGenerator takes one source image (ideally SVG or a 512×512 PNG) and outputs the entire icon family plus the HTML to paste. Covers iOS, Android, Windows tiles, and PWA installability.

Astro: drop the files in public/ and link them in your layout’s <head>. Astro already configures the link rel="icon" from astro:assets if you use it.

Next.js (App Router): put favicon.ico and optionally icon.svg directly in app/. The framework auto-injects the <link> tags.

app/
  favicon.ico       # auto-linked
  icon.svg          # optional, auto-linked
  apple-icon.png    # optional, 180×180, auto-linked

WordPress: Appearance → Customize → Site Identity has a “Site Icon” uploader. WordPress generates and links the full set automatically.

Design notes:

Use a square design. Browsers crop to square anyway.
High contrast — favicons display at 16×16 in tab strips, where fine detail disappears.
Test in dark mode. A logo on a transparent background that worked on white can become invisible on dark tab strips.

Google SERP requirements:

Google has additional rules for the SERP favicon — square, at least 8×8, and with a stable URL. Sites that rotate their favicon URL on every deploy can show up as a globe on Google. Use a stable filename and never query-string it.

Frequently asked questions

Do I need `.ico`, or is SVG enough?

Both, for now. SVG is the future, ICO is the present — Safari and some older Chrome versions still prefer ICO for the tab strip. Until 2027 or so, ship both.

Why is my favicon not showing in Google search results?

Three common causes:

The URL returns a 404 or 403 — check with curl -I https://yoursite.com/favicon.ico.
The icon is too small (under 8×8) — generate a multi-resolution ICO at 16, 32, and 48.
Google hasn’t recrawled the site since you added it — wait up to a week, or request indexing in Search Console.

What about the dark/light favicon trick?

Modern browsers support media-query SVG icons:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

Or embed both in one SVG with a <style> tag using prefers-color-scheme. Either works; the second is one fewer HTTP request.