FreePublished on GitHubEnglish overview

favicon

Audit and set up favicons, the small site icons used in browser tabs and search results. Check HTML links, image formats and dimensions, HTTPS access, and crawler restrictions, with guidance for ICO, SVG, and iOS icons.

OriginalShow the original description

Use when checking whether a site has a correctly configured favicon, auditing `<link rel='icon'>` tags in the `<head>`, or setting up favicon infrastructure for a new project.

thedaviddias/Front-End-Checklist

AI rating90/ 100 See how to install

Good for

Checking a site's existing favicon configuration
Setting up favicons for a new project
Investigating missing icons in search results
Adding an iOS home screen icon

Overview

What it does

Checks the favicon settings used for browser tabs, bookmarks, and search results, and helps add or fix them. It reviews <link rel="icon"> elements in the page’s <head>, the files they reference, and image dimensions and formats. It also checks whether image URLs return HTTP 200, work over HTTPS, and allow access under robots.txt.

When it helps

Use it to prepare icons for a new website or investigate why an existing icon does not appear. It helps review the files and HTML declarations needed for different uses, including an ICO fallback, SVG or PNG images, and an iOS home screen icon.

Example requests

“Check the favicon declarations and image URLs on every page, and tell me which settings are missing.”
“Add favicon.ico, favicon.svg, and apple-touch-icon.png, then insert the required tags.”

Notes

The material specifies images of at least 48×48px for Google Search and 180×180px for iOS. Its Google verification steps include using the URL Inspection tool in Search Console.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?: AGoodIt identifies existing-site audits and new setup as use cases, with checks for icon declarations and access conditions.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?: AGoodIt specifies three files, their placement, sample HTML, and steps to verify HTTP 200 responses.
SafetyAre sending data, deleting files, and running commands disclosed?: AGoodIt defines the files and tags to add and requires checking responses and access restrictions.
Easy setupDoes it need few tools or API keys, and are they documented?: BPartly lackingVerification includes Search Console, but setup and access preparation are not documented.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Files included (2)

SKILL.md2.9 KB
references/rule.md3.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

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
Place them in the root or /public directory.

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">

Verify the favicon URL returns a 200 response (not 404).
Check that /robots.txt does not block the favicon path.
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/rules/seo/favicon

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

404-page

FreeSummaryAI rating 100

Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.

Creating a helpful custom 404 page
Adding search and navigation for broken links
Checking missing pages that return HTTP 200