Favicon Generator
Implement correct favicon and touch-icon sizes so tabs, mobile home screens, PWAs, and search snippets show trustworthy branding.
Overview
favicon-generator is an agent skill for the Launch phase that implements, optimizes, and audits favicon and app-icon assets for browsers, mobile, PWAs, and search visibility.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill favicon-generatorWhat is this skill?
- Triggers on favicon, apple-touch-icon, PWA icon, favicon.ico, and site tab icon requests
- Required sizes table: 16×16, 32×32, 180×180 Apple touch, 192×192 and 512×512 PWA
- Initial assessment for stack (Next.js, WordPress, static), PWA plans, and existing logo assets
- Checks project context from .claude/project-context.md or .cursor/project-context.md for brand alignment
- Pairs with brand-visual-generator for broader visual system work
- 5 required icon sizes documented (16, 32, 180, 192, 512)
Adoption & trust: 757 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your site looks amateur in browser tabs and search because favicon, apple-touch-icon, or PWA sizes are missing, wrong, or inconsistent with your brand.
Who is it for?
Indie launches and content sites where you control HTML or framework head metadata and need icons without a dedicated design team.
Skip if: Full brand identity systems—use brand-visual-generator from the same repo when the problem is logos, color, and typography holistically.
When should I use this skill?
User mentions favicon, app icon, browser icon, touch icon, PWA icon, favicon.ico, site icon, tab icon, or wants favicon audit or optimization.
What do I get? / Deliverables
You get a size checklist, stack-aware implementation steps, and an audit path aligned with brand context files when present.
- Size matrix and platform-specific icon requirements
- Stack-specific link and manifest implementation guidance
Recommended Skills
Journey fit
Favicon and app-icon correctness is polish that affects recognition in search results and distribution surfaces right before and after go-live. The skill explicitly ties icons to Google Search visibility and bookmark trust—SEO and discovery metadata—not only raw UI coding.
How it compares
Focused favicon and PWA icon playbook—not a generic image CDN or screenshot MCP tool.
Common Questions / FAQ
Who is favicon-generator for?
Solo builders and small teams shipping web products who want correct tab, bookmark, mobile, and PWA icons without memorizing every platform size.
When should I use favicon-generator?
At Launch when polishing SEO snippets and bookmarks, during Build when adding head tags in Next.js or static sites, or after a rebrand when icons break on iOS home screens.
Is favicon-generator safe to install?
It guides file and markup changes locally; check the Security Audits panel on this Prism page and review any generated asset paths before committing.
SKILL.md
READMESKILL.md - Favicon Generator
# 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. [Google Search Central](https://developers.google.com/search/docs/appearance/favicon-in-search) requirements: | Requirement | Guideline | |-------------|-----------| | **Placement** | Add `<link rel="icon" href="/path/to/favicon.ico">` to **homepage** header | | **One per hostname** | One favicon per hostname; `example.com` and `code.example.com` are separate; `example.com/sub-site` shares the same favicon | | **Crawlability** | Googlebot-Image must crawl favicon; Googlebot must crawl homepage; do not block either in robots.txt | | **Shape** | Square (1:1 aspect ratio); minimum 8x8px; **preferably >48x48px** for quality across platforms | | **Stable URL** | Do not change favicon URL frequently | | **Appropriate** | No inappropriate content (pornography, hate symbols); Google may replace with default icon | | **Timing** | Crawling can take days to weeks; use Search Console URL Inspection to request indexing | **Supported rel values**: `icon`, `shortcut icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`. **href** can be relative (`/favicon.ico`) or absolute; favicon can be hosted on CDN. ## Implementation ### HTML Link Tags ```html <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> ``` ### Next.js Place in `/app`: `favicon.ico`, `icon.png`, `apple-icon.png`. Next.js auto-generates tags. ### PWA Manifest Include `icons` array in `manifest.json` with 192x192 and 512x512 for maskable icons. ## Best Practices - **Simplicity**: At 16x16, complex details are illegible; use simplified logo mark; design for brand recognition in SERPs - **Consistency**: Favicon should m