Skip to content
Get packs

Favicon Implementation Checker

Reviews web pages and templates to confirm favicons are correctly set up for all devices

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

A favicon is the small icon shown in browser tabs, bookmarks and phone home screens. When this skill is installed, the agent checks a site's templates, rendered HTML and shared components for the right favicon files, sizes and HTML tags, such as a 32x32 favicon.ico, a 180x180 apple-touch-icon, an SVG icon with dark mode support and PWA manifest icons. It then flags exact elements or routes that break the rule and suggests fixes.

Great for

  • Front-end developers reviewing a website's head markup before launch
  • Teams auditing templates or shared components for missing icon declarations
  • Designers checking that their icon set is wired up correctly in the browser

Skip it if

  • People who only want to design a logo or icon artwork, since the skill focuses on markup and file setup rather than graphics
  • Sites whose icons are already handled by a framework or generator that the reviewer has not inspected, because the skill's advice may duplicate or conflict with that setup

Try asking

  • “Review my base layout template and tell me which favicon tags are missing for iOS and Android.”
  • “Check the rendered HTML of my homepage for favicon and apple-touch-icon declarations.”
  • “Generate a complete favicon set plan and the HTML head tags I need for my site.”
  • “Explain why my site shows a generic icon in browser tabs.”
Step-by-step guide: how to use Favicon Implementation CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    favicons.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip favicons.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip favicons.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at rendered HTML, not only source templates, since framework code can hide the final tags.
  • Ask for a list of exact file paths and elements so you can verify each finding yourself.
  • Keep the reference file (references/rule.md) in place, as the skill relies on it for code examples and framework-specific details.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.