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
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/favicon-gen
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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
📊 Stats
Stars940
Forks96
LanguagePython
LicenseMIT
📦 Ships with jezweb-skills
</> SKILL.md
favicon-gen.SKILL.md
---name: favicon-gen
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."
compatibility: claude-code-only
---# 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"
