--- name: favicon-generator description: Generate flat favicons from image prompts, then key out a magenta background and build PNG\/ICO\/WebP outputs with ImageMagick. Use when you need a reliable favicon workflow. compatibility: Requires ImageMagick (magick), uv, and GEMINI_API_KEY for image generation. --- # Favicon Generator (magenta key workflow) Create clean, flat favicons with a transparent background. Generate a base PNG on a solid magenta background, remove the magenta with ImageMagick, then export favicon.ico, PNG sizes, Apple touch icon, and WebP. ## Prereqs - `uv` - `magick` (ImageMagick) - `GEMINI_API_KEY` set ## Prompt template Use a solid magenta background so it can be keyed out later. Keep the icon flat and simple so it reads at 16×16. ``` Favicon icon, 1:1 square, solid magenta #FF00FF background. Simple flat vector icon of: . Bold geometric shapes, solid fills, no gradients, no shadows. Centered, fills 75–85% of frame. Do not use magenta in the icon. ``` ## Generate the base image Use the Nano Banana Pro skill to generate the PNG. Run from your project directory so outputs land where you need them. Example (update the path for your agent): - Codex: `~\/.codex\/skills\/nano-banana-pro\/scripts\/generate_image.py` - Claude: `~\/.claude\/skills\/nano-banana-pro\/scripts\/generate_image.py` - Pi: `~\/.pi\/agent\/skills\/nano-banana-pro\/scripts\/generate_image.py` ``` uv run \/scripts\/generate_image.py \ --prompt "" \ --filename "yyyy-mm-dd-hh-mm-ss-favicon.png" \ --resolution 1K ``` Iterate at 1K, then re-run at 2K\/4K only when the prompt is locked. ## Convert to favicon outputs Run the script from this skill: ``` bash {baseDir}\/scripts\/faviconize.sh

``` Outputs: - `-transparent.png` - `-16.png`, `-32.png`, `-48.png` - `.ico` - `-apple-touch-icon.png` (180×180) - `-192.png`, `-512.png` - `.webp` (512×512) ### Optional tuning Set a different key color or fuzz if needed: ``` FAVICON_KEY_COLOR="#FF00FF" FAVICON_FUZZ="30%" bash {baseDir}\/scripts\/faviconize.sh input.png favicon ``` ## Update HTML + manifest Add or update links in your HTML layout: ``` ``` Update `site.webmanifest`: ``` { "icons": [ {"src": "\/favicon-192.png", "sizes": "192x192", "type": "image\/png"}, {"src": "\/favicon-512.png", "sizes": "512x512", "type": "image\/png"}, {"src": "\/favicon.webp", "sizes": "512x512", "type": "image\/webp"} ] } ``` ## Common pitfalls - Magenta bleeding into edges means the generator used background gradients. Regenerate with a flat `#FF00FF` background. - Avoid magenta accents in the icon or they will be keyed out. - If the icon is too small in the tab, increase its size in the prompt and rerun the conversion.