Favicon

Name: Favicon
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Audits the head for a valid, HTTPS-accessible favicon at least 48x48px so Google can show it beside search results.

About

A frontend-checklist SEO rule for adding an accessible favicon to every page. A developer uses it so Google displays the site's favicon in mobile SERPs.

Provide link rel=icon accessible over HTTPS, at least 48x48px
Include ICO fallback plus SVG/PNG versions

Favicon by the numbers

1 all-time installs (skills.sh)
Ranked #1,710 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill favicon

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/favicon.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/favicon)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Audits the head for a valid, HTTPS-accessible favicon at least 48x48px so Google can show it beside search results.

Files

SKILL.mdMarkdownGitHub ↗

Add a favicon to every page

Google displays favicons next to search results on mobile devices, making your brand immediately recognisable in the SERP. A missing or inaccessible favicon prevents Google from showing it, reducing visual brand presence in search.

Quick Reference

Provide a <link rel="icon"> pointing to a favicon file; Google uses it to identify your site in search results
Serve the favicon via HTTPS, ensure it is publicly accessible (not blocked by robots.txt), and at least 48×48px for Google's use
Include both an ICO fallback and SVG/PNG versions for broad browser and device compatibility

Check

In the page <head>, look for <link rel="icon"> or <link rel="shortcut icon"> elements. Verify: (1) The href points to an accessible URL (returns 200, not blocked by robots.txt). (2) The file is at least 48×48px (for Google Search use). (3) A PNG or SVG version is provided alongside the ICO fallback. (4) The favicon is accessible over HTTPS.

Fix

1. Create favicon files:

favicon.ico (16×16 and 32×32, ICO format) — legacy browser fallback
favicon.svg (scalable, modern browsers)
apple-touch-icon.png (180×180 PNG) — iOS home screen

2. Place them in the root or /public directory. 3. Add to <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">

4. Verify the favicon URL returns a 200 response (not 404). 5. Check that /robots.txt does not block the favicon path. 6. Test Google's display using the URL Inspection tool in Search Console.

Explain

Favicons appear next to your site's name in browser tabs, bookmarks, and Google Search mobile results. Google explicitly states it uses the favicon from <link rel='icon'> for display in search results. A missing, blocked, or too-small favicon means Google cannot show your brand icon, reducing search result click-through rate.

Code Review

Check the <head> for <link rel='icon'> and <link rel='apple-touch-icon'>. Verify the href values are valid relative or absolute paths. Confirm the favicon files exist and return HTTP 200. Flag if only favicon.ico at site root is used without an explicit <link> element (relying on browser default discovery is less reliable).

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/seo/favicon

Add a favicon to every page

Checks for favicon presence and correct link element configuration

Priority: medium · Difficulty: intermediate · Time: 10 min

--- A favicon is the small icon shown in browser tabs, bookmarks, and Google Search results. Google uses the favicon declared in your page's <head> to identify your site across its products.

Code Examples

❌ Avoid — no favicon declared (browser default fallback only)

<head>
  <title>My Site</title>
  <!-- No <link rel="icon"> — relies on browser checking /favicon.ico -->
  <!-- Google may not detect it reliably -->
</head>

❌ Avoid — only ICO format, no modern variants

<head>
  <link rel="shortcut icon" href="/favicon.ico">
  <!-- Works for legacy browsers but no SVG for modern browsers -->
</head>

✅ Correct — full favicon stack

<head>
  <!-- ICO fallback for older browsers -->
  <link rel="icon" href="/favicon.ico" sizes="any">

  <!-- SVG for modern browsers (scales to any size, supports dark mode) -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- iOS and Android home screen icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web app manifest for installable apps -->
  <link rel="manifest" href="/site.webmanifest">
</head>

✅ SVG favicon with dark mode support

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
    }
  </style>
  <circle cx="50" cy="50" r="50" fill="#0070f3"/>
  <text x="50" y="65" text-anchor="middle" font-size="60" fill="white">A</text>
</svg>

Why It Matters

SERP visibility: Google displays favicons next to mobile search results, making your brand recognisable at a glance.
User recognition: Favicons in browser tabs help users identify your site among many open tabs.
Professionalism: A missing favicon is often a sign of an unfinished or unmaintained site.

Google's Requirements

Google has specific rules for favicons displayed in search results:

The favicon must be accessible to Googlebot (not blocked by robots.txt)
The image must be at least 48×48px (Google scales it to 16×16 for display)
The favicon must follow Google's safe search policies
A new favicon may take several weeks to appear in search after deployment

Exceptions

Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.

Support Notes

Search-facing behavior can differ between rendered HTML, crawlers, and browser environments, so verify the final output on live routes and not only in source templates.
Document any platform or browser-specific limitation only when it materially changes the crawl, metadata, or indexing signal.

Verification

Automated Checks

Open your page source and confirm <link rel="icon"> is present.
Use Google Search Console's URL Inspection tool on your homepage to see whether Google can fetch the favicon.