# Favicon Gen

Generate custom favicons from logos, text, or brand colours.

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Mobile
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill favicon-gen -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill favicon-gen -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill favicon-gen -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill favicon-gen -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a favicon, mentions replacing a CMS default favicon, converting a logo into a favicon, creating branded initials icons, or troubleshooting favicon not displaying / iOS black square / missing manifest.

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

# Favicon Generator

Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.

## Workflow

### Step 1: Choose Your Approach

```
Have a logo with an icon element?
 YES -> Extract icon from logo
 NO  -> Have text/initials?
         YES -> Create monogram favicon
         NO  -> Use branded shape
```

### Step 2: Create Source SVG

**Extracted icon**, copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.

**Monogram**, use a template from `assets/`:
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
</svg>
```

**Branded shape**, circle (universal), rounded square (modern), shield (security), hexagon (tech).

SVG templates available in `assets/` directory.

### Step 3: Generate All Formats

Requires ImageMagick (`convert` command). Install if needed: `brew install imagemagick` (macOS) or `apt install imagemagick` (Linux).

```bash
# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

# Apple Touch Icon (180x180, SOLID background, transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png
```

**No ImageMagick?** Use https://favicon.io to convert from the SVG instead.

### Step 4: Create Web Manifest

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/design-assets/skills/favicon-gen/SKILL.md