# Favicon Gen

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-jezweb-claude-skills-favicon-gen`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jezweb](https://agentstack.voostack.com/s/jezweb)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jezweb](https://github.com/jezweb)
- **Source:** https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/favicon-gen
- **Website:** https://jezweb.com.au

## Install

```sh
agentstack add skill-jezweb-claude-skills-favicon-gen
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

  
  AC

```

**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

Copy and customise `assets/manifest.webmanifest`:
```json
{
  "name": "Your Business Name",
  "short_name": "Business",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}
```

### Step 5: Add HTML Tags

```html

```

Place all files in site root (`/public/` in Vite/React).

---

## Critical Rules

- **Always generate ALL formats** — SVG, ICO, apple-touch-icon, 192, 512, manifest
- **iOS icons MUST have solid backgrounds** — transparent = black square
- **Always use bold font weight** for monogram text (regular disappears at 16x16)
- **Test at 16x16** — if it's not legible, simplify
- **Never launch with CMS defaults** (WordPress "W", etc.)

## Format Quick Reference

| Format | Size | Transparency | Purpose |
|--------|------|-------------|---------|
| `favicon.svg` | Vector | Yes | Modern browsers |
| `favicon.ico` | 16+32 | Yes | Legacy browsers |
| `apple-touch-icon.png` | 180x180 | **No** | iOS home screen |
| `icon-192.png` | 192x192 | Yes | Android |
| `icon-512.png` | 512x512 | Yes | PWA |

## Asset Files

- `assets/favicon-svg-circle.svg` — Circle monogram template
- `assets/favicon-svg-square.svg` — Rounded square template
- `assets/favicon-svg-shield.svg` — Shield template
- `assets/manifest.webmanifest` — Web manifest template

## Reference Files

- `references/format-guide.md` — Complete format specifications
- `references/extraction-methods.md` — Logo icon extraction steps
- `references/monogram-patterns.md` — Advanced monogram design
- `references/shape-templates.md` — Industry-specific shapes with SVG code

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [jezweb](https://github.com/jezweb)
- **Source:** [jezweb/claude-skills](https://github.com/jezweb/claude-skills)
- **License:** MIT
- **Homepage:** https://jezweb.com.au

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jezweb-claude-skills-favicon-gen
- Seller: https://agentstack.voostack.com/s/jezweb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.