원클릭으로
favicon-generator
// 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.
// 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.
Create or update Pi skills (SKILL.md plus optional scripts, references, or assets). Use when someone asks to design a new Pi skill, refine an existing one, or structure skills for Pi discovery or packaging.
Guide for extending Pi — decide between skills, extensions, prompt templates, themes, context files, or custom models, then create and package them. Use when someone wants to extend Pi, add capabilities, create a skill, build an extension, or make a Pi package.
Long-running iterative development loops with pacing control and verifiable progress. Use when tasks require multiple iterations, many discrete steps, or periodic reflection with clear checkpoints; avoid for simple one-shot tasks or quick fixes.
Cheat sheet + workflow for launching interactive coding-agent CLIs (Claude Code, Gemini CLI, Codex CLI, Cursor CLI, and pi itself) via the interactive_shell overlay or headless dispatch. Use for TUI agents and long-running processes that need supervision, fire-and-forget delegation, or headless background execution. Regular bash commands should use the bash tool instead.
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
Web search and content extraction via Brave Search API. Use for searching documentation, facts, or any web content. Lightweight, no browser required.
| 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. |
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.
uvmagick (ImageMagick)GEMINI_API_KEY setUse 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: <subject>. Bold geometric shapes, solid fills, no gradients, no shadows. Centered, fills 75–85% of frame. Do not use magenta in the icon.
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/skills/nano-banana-pro/scripts/generate_image.py~/.claude/skills/nano-banana-pro/scripts/generate_image.py~/.pi/agent/skills/nano-banana-pro/scripts/generate_image.pyuv run <nanoBananaDir>/scripts/generate_image.py \
--prompt "<your 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.
Run the script from this skill:
bash {baseDir}/scripts/faviconize.sh <input-png> <output-base>
Outputs:
<output-base>-transparent.png<output-base>-16.png, -32.png, -48.png<output-base>.ico<output-base>-apple-touch-icon.png (180×180)<output-base>-192.png, <output-base>-512.png<output-base>.webp (512×512)Set a different key color or fuzz if needed:
FAVICON_KEY_COLOR="#FF00FF" FAVICON_FUZZ="30%" bash {baseDir}/scripts/faviconize.sh input.png favicon
Add or update links in your HTML layout:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/favicon-apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
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"}
]
}
#FF00FF background.