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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#COLOR1"/>
      <stop offset="100%" stop-color="#COLOR2"/>
    </linearGradient>
  </defs>
  <rect x="100" y="100" width="824" height="824" rx="185" ry="185" fill="url(#bg)"/>
  <!-- Icon content here, centered around cx=512 cy=512 -->
</svg>

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, [email protected]	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