name: app-icon-generator description: Generates app icons in all required sizes for iOS, Android, and PWA from a single source image. Use when user asks to "generate app icons", "create ios icons", "android app icons", "favicon", or "pwa icons". allowed-tools: [Read, Write, Bash, Glob]

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:

# 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:

# 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:

# 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:

# 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:

# 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:

{
  "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.

# 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:

<!-- 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:

# 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:

# 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:

{
  "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):

# 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:

<!-- 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:

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

# Android (place in android/app/src/main/res/)
# Same as Android native above

Or use react-native-make:

npx react-native set-icon --path icon-source.png

8. Generate Flutter Icons

Using flutter_launcher_icons:

# pubspec.yaml
dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon.png"
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/icon-foreground.png"

# Generate icons
flutter pub get
flutter pub run flutter_launcher_icons

9. Create Automated Script

Complete icon generation script:

#!/bin/bash
# generate-icons.sh

SOURCE_ICON="icon-source.png"
OUTPUT_DIR="generated-icons"

# Check if source exists
if [ ! -f "$SOURCE_ICON" ]; then
  echo "Error: Source icon not found: $SOURCE_ICON"
  exit 1
fi

# Create directories
mkdir -p "$OUTPUT_DIR"/{ios,android,pwa,web}

echo "🎨 Generating app icons..."

# iOS icons
echo "📱 iOS icons..."
for size in 40 60 58 87 80 120 180 76 152 167 1024; do
  convert "$SOURCE_ICON" -resize ${size}x${size} \
    "$OUTPUT_DIR/ios/icon-${size}.png"
  echo "  ✓ ${size}x${size}"
done

# Android icons
echo "🤖 Android icons..."
convert "$SOURCE_ICON" -resize 48x48 "$OUTPUT_DIR/android/mdpi.png"
convert "$SOURCE_ICON" -resize 72x72 "$OUTPUT_DIR/android/hdpi.png"
convert "$SOURCE_ICON" -resize 96x96 "$OUTPUT_DIR/android/xhdpi.png"
convert "$SOURCE_ICON" -resize 144x144 "$OUTPUT_DIR/android/xxhdpi.png"
convert "$SOURCE_ICON" -resize 192x192 "$OUTPUT_DIR/android/xxxhdpi.png"
convert "$SOURCE_ICON" -resize 512x512 "$OUTPUT_DIR/android/playstore.png"
echo "  ✓ All densities generated"

# PWA icons
echo "🌐 PWA icons..."
for size in 72 96 128 144 152 192 384 512; do
  convert "$SOURCE_ICON" -resize ${size}x${size} \
    "$OUTPUT_DIR/pwa/icon-${size}.png"
  echo "  ✓ ${size}x${size}"
done

# Favicons
echo "🔖 Favicons..."
convert "$SOURCE_ICON" -resize 16x16 "$OUTPUT_DIR/web/favicon-16.png"
convert "$SOURCE_ICON" -resize 32x32 "$OUTPUT_DIR/web/favicon-32.png"
convert "$SOURCE_ICON" -resize 48x48 "$OUTPUT_DIR/web/favicon-48.png"
convert "$OUTPUT_DIR/web/favicon-"{16,32,48}.png "$OUTPUT_DIR/web/favicon.ico"
convert "$SOURCE_ICON" -resize 180x180 "$OUTPUT_DIR/web/apple-touch-icon.png"
echo "  ✓ All favicons generated"

echo "✅ Icon generation complete!"
echo "📁 Icons saved to: $OUTPUT_DIR"

10. Provide Integration Instructions

iOS (Xcode):

Open Xcode project
Navigate to Assets.xcassets
Right-click → New App Icon
Drag generated icons to appropriate slots

Android (Android Studio):

Right-click res folder
New → Image Asset
Select generated icons
Configure adaptive icon layers

Web:

Copy icons to public/icons/ folder
Update manifest.json with icon paths
Add favicon links to index.html

React Native:

Copy iOS icons to ios/AppName/Images.xcassets/AppIcon.appiconset/
Copy Android icons to android/app/src/main/res/mipmap-*/
Update Contents.json for iOS

Best Practices

Design Guidelines:

Keep important content in center 80%
Avoid thin lines (minimum 2px)
Test on dark and light backgrounds
Use simple, recognizable shapes
Avoid text (too small on icons)
Use bold colors for visibility

Technical Guidelines:

Source: 1024x1024 minimum
Format: PNG with transparency
Color space: sRGB
No compression on source
Square aspect ratio
Safe area for maskable: 40% padding

Testing:

Test on actual devices
Check all sizes render correctly
Verify transparency works
Test dark mode appearance
Check adaptive icon animations (Android)

Size Reference

iOS:

20pt (40x40, 60x60)
29pt (58x58, 87x87)
40pt (80x80, 120x120)
60pt (120x120, 180x180)
76pt (76x76, 152x152)
83.5pt (167x167)
1024x1024 (App Store)

Android:

mdpi: 48x48
hdpi: 72x72
xhdpi: 96x96
xxhdpi: 144x144
xxxhdpi: 192x192
Play Store: 512x512

PWA:

72x72, 96x96, 128x128
144x144, 152x152, 192x192
384x384, 512x512