← ClaudeAtlas

generate-faviconlisted

Generate a minimal, modern favicon set from an SVG source — ICO, SVG with dark mode, Apple Touch Icon, PWA icons, manifest, and HTML tags. Use when the user asks to create favicons, set up site icons, add a favicon to their project, generate PWA icons, or mentions needing apple-touch-icon, manifest icons, or favicon.ico files.
svyatov/agent-toolkit · ★ 0 · AI & Automation · score 72
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