zhukang
1c7abd81d1
- 310 registry:skill items, 1528 files, 7 categories (hub tags) - registry.json generated by @kortix/registry buildRegistry - nested SKILL.md in sn-da-* renamed SUBSKILL.md (no phantom skills) - provenance + licenses: SOURCES.md
120 lines
4.1 KiB
Markdown
120 lines
4.1 KiB
Markdown
---
|
|
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"
|
|
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
|
|
|
|
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
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<meta name="theme-color" content="#0066cc">
|
|
```
|
|
|
|
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
|