# Favicon Generator

When the user wants to implement, optimize, or audit favicon and app icons.

- Repository: https://github.com/kostja94/marketing-skills (1071 stars)
- Category: Marketing
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kostja94/marketing-skills --skill favicon-generator -g -a claude-code -y`
Codex: `npx skills add kostja94/marketing-skills --skill favicon-generator -g -a codex -y`
Cursor: `npx skills add kostja94/marketing-skills --skill favicon-generator -g -a cursor -y`
Gemini CLI: `npx skills add kostja94/marketing-skills --skill favicon-generator -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

**Project context:** Read root `contextus.md` when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.

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.

The rest: https://github.com/kostja94/marketing-skills/blob/HEAD/skills/components/branding/favicon/SKILL.md