---

name: app-icon-generator description: Generate appealing, high-quality iOS and Android app icons following each platform's design guidelines. Handles specifications, safe zones, export formats, and platform-specific requirements. license: MIT metadata: version: 1.0.0 model: claude-opus-4-5-20251101

App Icon Generator

Generate appealing, high-quality iOS and Android app icons following each platform's design guidelines.

Quick Start

CopyYou: "Create app icons for my fitness app called FitPulse"
You: "Design an icon for my weather app with a sun and cloud"
You: "Generate iOS and Android icons for my banking app"
You: "I need app icons for a photography app"

The skill will gather requirements, design the icon, and provide export-ready specifications for both platforms.

Triggers

Quick Reference

How It Works

Copy┌─────────────────────────────────────────────────────────────┐
│                    GATHER REQUIREMENTS                      │
│  • App name and purpose                                      │
│  • Brand colors and style                                    │
│  • Key visual elements (symbol, text, abstract)             │
│  • Platform targets (iOS, Android, or both)                  │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                    DESIGN ICON CONCEPT                       │
│  • Choose base design approach                               │
│  • Apply platform-specific guidelines                        │
│  • Ensure safe zone compliance                               │
│  • Optimize for smallest display size                        │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                    GENERATE SPECIFICATIONS                    │
│  • iOS: 1024×1024px master, all required sizes               │
│  • Android: Foreground + background layers, keyline shapes   │
│  • Export formats and color space requirements               │
└─────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                    PROVIDE IMPLEMENTATION GUIDE              │
│  • Export instructions for all sizes                         │
│  • Xcode / Android Studio setup                              │
│  • Validation checklist                                      │
└─────────────────────────────────────────────────────────────┘

Commands

---

iOS Icon Guidelines

Shape and Geometry

• Superellipse (squircle) shape - DO NOT create rounded corners yourself
• System automatically applies corner masking
• Submit square icons only

Size Requirements

Safe Zone

• Critical content: Center 60-66% of icon
• Minimum margin: 90 pixels from edges (for 1024px)
• Outer 33-40% may be masked or cropped

Technical Requirements

• Color space: sRGB (required)
• Format: PNG, 32-bit preferred
• Transparency: NOT allowed (fully opaque only)
• File size: Under 1MB for App Store
• Corners: DO NOT pre-round - system handles this

iOS 18+ Variants

Sources:

• Apple HIG - App Icons
• iOS vs Android Icon Guidelines

---

Android Icon Guidelines

Adaptive Icon Structure

Android uses a two-layer system:

Keyline Shapes

Devices may apply different mask shapes:

Safe Zone

• Critical content: 66×66dp (some sources say 72×72dp)
• Keep essential visual elements within this area
• Edges may be cropped by device masks

Size Requirements

Technical Requirements

• Color space: sRGB
• Format: PNG or XML drawable (vector)
• Background: Must be fully opaque
• No text in icon design
• No badges or overlays

Sources:

• Android Adaptive Icons Documentation
• Designing Adaptive Icons - Google Design

---

Design Principles

Both Platforms

Common Mistakes to Avoid

---

Implementation Guide

iOS Export Checklist

Copy□ Master: 1024×1024px PNG, sRGB
□ All required sizes generated
□ No transparency
□ No pre-rounded corners
□ Under 1MB file size
□ Test at smallest size (29×29px)
□ Verify in light and dark mode

Android Export Checklist

Copy□ Foreground: 108×108dp PNG/XML
□ Background: 108×108dp PNG/XML (opaque)
□ Play Store: 512×512px PNG
□ Safe zone compliance (66×66dp)
□ Test with different mask shapes
□ No text in design

---

Validation

After generating icon specifications, verify:

• Safe zone compliance for both platforms
• Color space is sRGB
• Smallest size is legible (iOS: 29×29px, Android: 48×48dp)
• File formats are correct
• No transparency in iOS icons
• Android background is opaque
• Critical content is centered

---

The iOS Squircle

iOS uses a mathematical superellipse, not a simple rounded rectangle:

• Formula: Superellipse with n≈5
• Corner radius: ~22% of icon size (roughly size/6.4)
• Variable radius: Curve gets larger approaching straight edges

Why Designers Should Use Apple's Template

1. Mathematical precision: Cannot recreate manually with standard tools
2. System consistency: Apple's template ensures perfect alignment
3. Automatic masking: System applies shape, submit square only

Grid System

Apple provides a grid template with:

• 10×10 base grid
• Inner zone for critical content
• Outer zone that may be masked

Use Apple's official template from Xcode or HIG resources.

What Are Keylines?

Keylines are shape templates that device manufacturers apply to adaptive icons:

Designing for All Keylines

Since you can't predict which shape a device will use:

1. Keep critical content in safe zone (66×66dp)
2. Design foreground to work independently of background
3. Test with multiple masks during development
4. Ensure foreground and background have visual cohesion

Visual Effects

Android supports optional visual effects:

• Parallax: Slight movement when launcher is swiped
• Zoom: Slight scale on app launch

Account for these by adding padding to the foreground layer.

Why sRGB?

Export Workflow

iOS:

CopyDesign (1024×1024)
  ↓
Export to PNG (sRGB profile)
  ↓
Validate opacity (no transparency)
  ↓
Run through Xcode asset catalog
  ↓
System generates all sizes

Android:

CopyDesign foreground (108×108dp)
Design background (108×108dp)
  ↓
Export to PNG or XML
  ↓
Configure in res/mipmap-anydpi-v26/
  ↓
Provide legacy icons for pre-8.0

Color Tips

• Use gradients sparingly (may band at small sizes)
• Ensure contrast ratio ≥ 3:1 for accessibility
• Test in both light and dark contexts
• Avoid neon colors that may oversaturate

iOS Testing

Copy# Add all sizes to Xcode asset catalog
# Test on physical devices:
- iPhone (various screen sizes)
- iPad (various screen sizes)
- Test in Settings, Spotlight, Home Screen

# Verify:
- Visibility at 29×29px (Settings)
- Appearance in light/dark mode
- No artifacts from scaling

Android Testing

Copy# Test on devices with different launchers:
- Pixel Launcher (circle mask)
- One UI (squircle mask)
- Nova Launcher (various masks)
- Stock Android (squircle/circle)

# Verify:
- Safe zone compliance
- Foreground/background cohesion
- Appearance with different masks

Common Issues Found in Testing