app-icon-generator

What this skill does

# App Icon Generator

Generates app icons in all required sizes for iOS, Android, PWA, and web from a single source image.

## When to Use

- "Generate app icons for iOS"
- "Create Android app icons"
- "Generate all icon sizes"
- "Create favicon"
- "PWA icons"
- "App icon set"

## Instructions

### 1. Verify Source Image

Check for source icon file:

```bash
# Look for icon source
find . -name "*icon*.png" -o -name "*logo*.png"
```

**Source image requirements:**
- Minimum 1024x1024 pixels (recommended)
- Square (1:1 aspect ratio)
- PNG format with transparency (if needed)
- High quality, not compressed
- No text too close to edges (safe area: center 70%)

Present findings and ask for source if not found.

### 2. Check for Image Processing Tools

Verify available tools:

```bash
# Check for ImageMagick
which convert || echo "ImageMagick not found"

# Check for sharp-cli
which sharp || echo "sharp-cli not found"

# Check for sips (macOS)
which sips || echo "sips not found (macOS only)"
```

**Installation guide if needed:**

```bash
# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt-get install imagemagick

# Node.js (cross-platform, recommended)
npm install -g sharp-cli
```

### 3. Generate iOS Icons

**iOS requires multiple sizes:**

```bash
# iOS App Icons (all required sizes)
declare -a ios_sizes=(
  "20"    # iPhone Notification (2x, 3x)
  "29"    # iPhone Settings (2x, 3x)
  "40"    # iPhone Spotlight (2x, 3x)
  "60"    # iPhone App (2x, 3x)
  "76"    # iPad App (1x, 2x)
  "83.5"  # iPad Pro App (2x)
  "1024"  # App Store
)

# Generate using ImageMagick
for size in "${ios_sizes[@]}"; do
  convert icon-source.png -resize ${size}x${size} "ios/icon-${size}.png"

  # Generate 2x
  size2x=$((size * 2))
  convert icon-source.png -resize ${size2x}x${size2x} "ios/icon-${size}@2x.png"

  # Generate 3x (for relevant sizes)
  if [[ $size -eq 20 || $size -eq 29 || $size -eq 40 || $size -eq 60 ]]; then
    size3x=$((size * 3))
    convert icon-source.png -resize ${size3x}x${size3x} "ios/icon-${size}@3x.png"
  fi
done
```

**Or using sharp-cli:**

```bash
# Generate all iOS sizes
sharp -i icon-source.png -o ios/icon-{size}.png \
  resize 20 40 60 58 80 87 120 180 76 152 167 1024
```

**Contents.json for Xcode:**

```json
{
  "images": [
    {
      "size": "20x20",
      "idiom": "iphone",
      "filename": "icon-40.png",
      "scale": "2x"
    },
    {
      "size": "20x20",
      "idiom": "iphone",
      "filename": "icon-60.png",
      "scale": "3x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "icon-58.png",
      "scale": "2x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "icon-87.png",
      "scale": "3x"
    },
    {
      "size": "40x40",
      "idiom": "iphone",
      "filename": "icon-80.png",
      "scale": "2x"
    },
    {
      "size": "40x40",
      "idiom": "iphone",
      "filename": "icon-120.png",
      "scale": "3x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-120.png",
      "scale": "2x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "icon-180.png",
      "scale": "3x"
    },
    {
      "size": "1024x1024",
      "idiom": "ios-marketing",
      "filename": "icon-1024.png",
      "scale": "1x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}
```

### 4. Generate Android Icons

**Android adaptive icons:**

Android uses adaptive icons with separate foreground and background layers.

```bash
# Android icon sizes (in dp)
# mdpi = 1x, hdpi = 1.5x, xhdpi = 2x, xxhdpi = 3x, xxxhdpi = 4x

# mipmap-mdpi (48x48)
convert icon-source.png -resize 48x48 android/mipmap-mdpi/ic_launcher.png

# mipmap-hdpi (72x72)
convert icon-source.png -resize 72x72 android/mipmap-hdpi/ic_launcher.png

# mipmap-xhdpi (96x96)
convert icon-source.png -resize 96x96 android/mipmap-xhdpi/ic_launcher.png

# mipmap-xxhdpi (144x144)
convert icon-source.png -resize 144x144 android/mipmap-xxhdpi/ic_launcher.png

# mipmap-xxxhdpi (192x192)
convert icon-source.png -resize 192x192 android/mipmap-xxxhdpi/ic_launcher.png

# Play Store (512x512)
convert icon-source.png -resize 512x512 android/playstore-icon.png
```

**Adaptive icon XML:**

```xml
<!-- res/mipmap-anydpi-v26/ic_launcher.xml -->
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>
```

**Round icon variant:**

```bash
# Generate round icons (same sizes)
for size in 48 72 96 144 192; do
  density=$(get_density $size)  # mdpi, hdpi, etc.
  convert icon-source.png -resize ${size}x${size} \
    \( +clone -threshold -1 -negate -fill white -draw "circle $((size/2)),$((size/2)) $((size/2)),0" \) \
    -alpha off -compose copy_opacity -composite \
    "android/mipmap-${density}/ic_launcher_round.png"
done
```

### 5. Generate PWA Icons

**Progressive Web App icons:**

```bash
# PWA icon sizes
sharp -i icon-source.png -o pwa/icon-{size}.png \
  resize 72 96 128 144 152 192 384 512

# Also generate maskable icons (with safe area)
# Maskable icons need 40% safe area
sharp -i icon-source.png -o pwa/icon-{size}-maskable.png \
  resize 72 96 128 144 152 192 384 512 \
  --extend top=10 bottom=10 left=10 right=10
```

**manifest.json:**

```json
{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icons/icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
```

### 6. Generate Favicons

**Web favicons (multiple sizes):**

```bash
# Standard sizes
convert icon-source.png -resize 16x16 favicon-16.png
convert icon-source.png -resize 32x32 favicon-32.png
convert icon-source.png -resize 48x48 favicon-48.png

# Create multi-size .ico file
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

# Apple touch icon
convert icon-source.png -resize 180x180 apple-touch-icon.png

# Microsoft tile
convert icon-source.png -resize 144x144 mstile-144.png
```

**HTML head tags:**

```html
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="shortcut icon" href="/favicon.ico">

<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512.png">

<!-- Microsoft -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144.png">
```

### 7. Generate React Native Icons

**For React Native apps:**

```bash
# iOS (place in ios/AppName/Images.xcassets/AppIcon.appiconset/)
# Same as iOS native above

# Android (p