Guide · Agent skill
How to use the Favicon Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The favicon agent skill is a set of instructions that teaches an AI agent to check and set up the small site icon that appears in browser tabs and Google results. It is useful for front-end developers starting a new site, teams auditing an existing one, and anyone whose icon is missing. This guide explains what the skill does, how to install it, how to trigger it and what to watch for.
Favicon Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the favicon skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill.
- 4Ask in plain language. Describe the task, such as checking a site's favicon or setting up icon files for a new project.
- 5Review the head tags. Let the agent check the link rel='icon' and apple-touch-icon tags against the four checks.
- 6Verify the files. Confirm each icon URL returns 200, is not blocked by robots.txt, is at least 48×48px and uses HTTPS.
What is an agent skill and what does the favicon skill do?
An agent skill is a folder of instructions that an AI agent loads when a request matches the skill's description. The favicon skill is described as useful 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.
Once installed, the agent checks a web page's head section for favicon link tags. It verifies that the icon files exist, load over HTTPS, are not blocked by robots.txt, and are at least 48×48px so Google can use them in search results. It can also walk you through creating the usual icon files (ICO, SVG and Apple touch icon) and adding the matching tags. The skill works from written guidance rather than running a tool of its own.
How do you install the favicon skill?
You can install the skill in one of two ways. For a personal setup, download the ZIP from this page and unzip it into ~/.claude/skills/. To make it available only inside one project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Single project: unzip into .claude/skills/ in the project
- Claude apps: upload under Settings → Capabilities → Skills
How do you trigger the favicon skill with a natural request?
You do not need a special command. Describe what you want in plain language and mention favicons, site icons, or the head tags. The agent matches your request against the skill's description.
- Check whether my homepage has a correctly configured favicon.
- Audit the link rel='icon' tags in the head of this page.
- Set up favicon files for my new Next.js project.
What files and tags does a complete favicon setup use?
The skill's fix steps create three files and place them in the root or /public directory. favicon.ico (16×16 and 32×32) serves as the legacy browser fallback. favicon.svg serves modern browsers. apple-touch-icon.png (180×180) is used for the iOS home screen.
The head then links all three. The ICO fallback is included with sizes set to any, which the skill recommends for broad compatibility.
- favicon.ico: 16×16 and 32×32, legacy fallback
- favicon.svg: scalable, modern browsers
- apple-touch-icon.png: 180×180 PNG, iOS home screen
<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">How do you check a favicon once it is set up?
The skill's check covers four points: the href points to an accessible URL that returns 200, the file is at least 48×48px for Google Search, a PNG or SVG version sits alongside the ICO fallback, and the icon is served over HTTPS. It also says to confirm /robots.txt does not block the favicon path.
To test how Google displays the icon, the skill points to the URL Inspection tool in Search Console.
- Confirm the href returns HTTP 200, not 404
- Confirm robots.txt does not block the favicon path
- Confirm the file is at least 48×48px
- Confirm it is served over HTTPS
- Test display with URL Inspection in Search Console
What does the skill need, and what should you watch for?
The skill lists no required tools or packages. It does not run scripts and does not use the network on its own. The checks it describes (fetching the icon URL, reading robots.txt) are steps the agent or you carry out in your environment.
The skill does not generate or design icon artwork. It covers only tags, file formats and checks, and it is not a full SEO audit.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Not for designing icon artwork
- Not for full SEO audits beyond favicons
What people use it for
- Auditing a homepage to see whether its favicon tags and files are correct
- Setting up the ICO, SVG and Apple touch icon files for a new website
- Diagnosing why a site icon does not appear in browser tabs or Google mobile results
- Reviewing a team's head section during a basic SEO and branding check
Frequently asked questions
How do I install the favicon agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Does the favicon skill require anything else?
The skill lists no required tools or packages. It runs no scripts and does not use the network on its own.
Is the favicon skill free to use?
The skill is published under the MIT licence. Check the licence text in the source repository for the terms that apply to your use.
Can the skill create my favicon image?
No. The skill covers tags, file formats and checks only. It does not generate or design the icon artwork.
Why isn't my favicon showing in Google results?
According to the skill's guidance, common causes are a missing favicon link, a file that is blocked by robots.txt, an icon smaller than 48×48px, or a URL that is not served over HTTPS or does not return 200. Test with URL Inspection in Search Console.
How is this different from a full SEO audit tool?
This skill checks only favicon setup. It is not designed for a full SEO audit, so use a broader tool for other SEO items.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are setting up icons on a new site, auditing favicon tags on an existing one, or chasing a missing icon in tabs or Google results. Pick something else if you need icon artwork designed or a full SEO audit beyond favicons.
Download the skill