Agent skill · Security

favicon-generator

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon." For visual system, use brand-visual-generator.

kostja94github.com/kostja94GitHub ↗
cursorMIT
Install
npx skills add kostja94/marketing-skills --skill favicon --agent cursor

Same command for any agent — swap --agent for claude-code, codex, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 5 KB
Bundled scripts: none
Version: 1.0.1
Path: skills/components/branding/favicon/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 848

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Components: Favicon Guides favicon and app icon implementation for brand consistency across browser tabs, bookmarks, mobile home screens, and **Google Search results**. Favicons help users identify sites; missing or incorrect icons hurt trust. **When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for brand and visual identity. Identify: 1. **Tech stack**: Next.js, WordPress, static HTML, etc. 2. **PWA**: Is the site a PWA or planning to be? 3. **Existing assets**: Logo, icon files ## Required Sizes | Size | Use | |------|-----| | **16x16** | Browser tabs, standard displays | | **32x32** | Retina/HiDPI browser tabs | | **180x180** | Apple Touch Icon (iOS home screen); no transparency | | **192x192** | Android Chrome home screen, PWA launcher | | **512x512** | PWA splash screens, adaptive icons | **Optional**: 48x48, 96x96, 120x120, 152x152, 167x167, 256x256 for broade

What's inside
Steps it walks through
  1. Initial Assessment
  2. Required Sizes
  3. Formats
  4. Google Search (SERP Display)
  5. Implementation
  6. HTML Link Tags
  7. Next.js
  8. PWA Manifest
  9. Best Practices
  10. Output Format
  11. Related Skills
More from marketing-skills
All skills →
About this skill
What does the favicon-generator skill do?

When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon." For visual system, use brand-visual-generator.

How do I install it?

Run `npx skills add kostja94/marketing-skills --skill favicon --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From kostja94/marketing-skills, a repository with 848 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going