Agent skill · design visual · kostja94
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.
Why this skill is useful
Provides specific guidelines and requirements for favicon implementation that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-06-09. 860 stars on the source repository.
What this skill does
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 broader coverage. Formats Format Use -------- ----- SVG Modern browsers; scalable; supports dark mode via media queries; lightweight PNG High-DPI; explicit sizes; easy to generate; required for Apple Touch Icon ICO Legacy; bundles multiple sizes; fallback for older browsers Recommended: Provide SVG + PNG fallbacks. Never skip Apple Touch Icon (180x180); iOS shows a generic screenshot without it. Google Search (SERP Display) See serp-features for SERP feature types and optimization. Favicons can appear in Google Search results next to your site's listings. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills kostja94/favicon