App Icon Generator

App Icon Generator

Generate a production-ready app icon from concept to all required platform formats.

Prerequisites

Before starting, verify required tools are installed. Run this first and only proceed if all checks pass:

which rsvg-convert || echo "⚠ Install required: brew install librsvg"
python3 -c "import PIL" 2>/dev/null || echo "ℹ Optional: pip3 install Pillow (needed for .ico Windows icons)"

• rsvg-convert — required for SVG → PNG rasterization. If missing, ask the user to install brew install librsvg and stop.
• Pillow — optional, only needed if the user wants Windows .ico. Without it the script gracefully skips .ico and still produces .icns + all PNG sizes.
• sips — pre-installed on macOS, no action needed.

Workflow

1. Design the SVG (1024x1024)

Create logo.svg with these specs:

• Canvas: viewBox="0 0 1024 1024" width/height 1024
• Safe area: 824x824 effective area, 100px padding on each side
• Background: Rounded rect at x=100 y=100 width=824 height=824 rx=185 ry=185
• Content: Centered within the 824x824 area
• Use linearGradient for depth, feDropShadow for polish
• Keep shapes simple — icons render at 16x16 too

Example skeleton:

2. Convert to All Formats

Run the bundled conversion script:

bash "${CLAUDE_SKILL_DIR}/scripts/convert_icons.sh" logo.svg ./icons/

This generates all files in one step:

| File | Purpose | |------|---------| | 32x32.png, 128x128.png, 128x128@2x.png | Desktop standard | | icon.png (512x512) | General use | | icon.icns | macOS app bundle | | icon.ico | Windows executable | | Square*Logo.png | Windows UWP/Store | | StoreLogo.png | Windows Store |

3. Dependencies

• rsvg-convert: brew install librsvg
• iconutil: built-in on macOS
• Pillow (for .ico): pip3 install Pillow

If Pillow is missing, .ico is skipped with a warning — all other formats still generate.

4. Framework Integration

Tauri: Save SVG as src-tauri/icons/logo.svg, output to src-tauri/icons/. Config:

"icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"]

Electron: Output to build/icons/. Reference in electron-builder config.

Design Guidelines

• Contrast: Ensure recognizable on both light and dark backgrounds
• Simplicity: Max 2-3 visual elements — must read at 16x16
• No text unless a single letter/symbol (too small at icon sizes)
• Rounded corners (rx=185): macOS/iOS convention; Windows ignores them
• Gradients > flat color: Adds depth and polish

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: lifedever
• Source: lifedever/skills-plugin
• License: MIT

Install and usage instructions live in the source repository linked above.