From kostja94-marketing-skills-5
Guides implementation, optimization, and auditing of favicons and app icons for browsers, PWAs, mobile screens, and Google Search results, including sizes, formats, and SERP guidelines.
npx claudepluginhub joshuarweaver/cascade-data-analytics --plugin kostja94-marketing-skills-5This skill uses the workspace's default tool permissions.
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.
Conducts multi-round deep research on GitHub repos via API and web searches, generating markdown reports with executive summaries, timelines, metrics, and Mermaid diagrams.
Dynamically discovers and combines enabled skills into cohesive, unexpected delightful experiences like interactive HTML or themed artifacts. Activates on 'surprise me', inspiration, or boredom cues.
Generates images from structured JSON prompts via Python script execution. Supports reference images and aspect ratios for characters, scenes, products, visuals.
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.
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for brand and visual identity.
Identify:
| 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.
| 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.
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 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.
<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">
Place in /app: favicon.ico, icon.png, apple-icon.png. Next.js auto-generates tags.
Include icons array in manifest.json with 192x192 and 512x512 for maskable icons.
/favicon.ico?v=2)