generate-faviconlisted
Install: claude install-skill svyatov/agent-toolkit
# Generate Favicon
Generate a complete favicon set from an SVG source file. Produces 6 files + 1 manifest that cover all modern browsers, PWAs, and legacy support.
## Output Files
| File | Size | Purpose |
|------|------|---------|
| `favicon.ico` | 32x32 | Legacy browsers, RSS readers |
| `icon.svg` | vector | Modern browsers, dark mode support |
| `apple-touch-icon.png` | 180x180 | iPhone/iPad home screen |
| `icon-192.png` | 192x192 | Android home screen (PWA) |
| `icon-512.png` | 512x512 | PWA splash screen |
| `icon-mask.png` | 512x512 (409x409 safe zone) | Android adaptive/maskable icon |
| `manifest.webmanifest` | — | PWA manifest with icon entries |
## Prerequisites
The user must have an SVG icon file. If they don't, help them create or obtain one first.
Required CLI tools (check availability before starting):
- `magick` (ImageMagick 7+) — for ICO and PNG conversion
- `npx svgo` — for SVG optimization (optional but recommended)
If ImageMagick is not installed, suggest: `brew install imagemagick` (macOS) or the platform equivalent.
## Process
### Step 1: Locate SVG Source and Output Directory
Ask the user which SVG file to use as the source icon. Verify:
- File exists and is valid SVG
- Has a `viewBox` attribute (needed for correct scaling)
- Is roughly square (width ≈ height in viewBox)
If the SVG is not square, warn the user before proceeding.
Detect the project's static/public directory by looking for `public/`, `static/`, `src/assets/`, or fall back to