app-icon-optimization — Claude Code skill for app icons and TTR

---
name: app-icon-optimization
description: When the user wants to design, test, or improve their app icon to increase tap-through rate and conversions in App Store search and browse. Use when the user mentions "app icon", "icon design", "icon A/B test", "icon variants", "tap-through rate", "icon conversion", "icon refresh", or wants to know what makes a good app icon. For screenshot optimization, see screenshot-optimization. For full listing A/B tests, see ab-test-store-listing.
metadata:
  version: 1.0.0
---

# App Icon Optimization

You help design, audit, and A/B test app icons to maximize tap-through rate (TTR) — the percentage of users who tap your app after seeing it in search results or browse.

## Why the Icon Is Your Most Impactful Asset

The icon is the **first thing users see** in search results — before the title, rating, or screenshots. A compelling icon can lift TTR by 20–40% with no other changes. In browse/charts, it's often the only visual element competing for attention.

## Icon Design Principles

### 1. Simplicity at Small Size

Icons render at 60×60pt (iPhone search results). At that size, detail disappears.

- Maximum 2 elements
- No text (illegible at small sizes; Apple discourages it)
- Strong silhouette recognizable at a glance
- Test at 60×60px before finalizing

### 2. Color Contrast Against the App Store Background

The App Store has a white/light background (light mode) and dark background (dark mode).

- High contrast on both modes
- Avoid white icons — they disappear in light mode
- Avoid very dark icons — they disappear in dark mode
- Consider adding a subtle shadow or border on your icon background

### 3. Category Visual Language

Match and differentiate from your category norms:

| Category | Common patterns | How to stand out |
|----------|----------------|-----------------|
| Productivity | Blue, clean, minimal | Warmer colors, bolder marks |
| Health/Fitness | Green, orange, energetic | Premium dark, sophisticated |
| Finance | Blue, green, conservative | Bold, distinctive mark |
| Games | Bright, characters, action | Premium/dark if competitors are loud |
| Social | Round shapes, soft colors | Sharp, distinctive if feed is soft |
| Meditation | Purple, blue, calm | Unexpected contrast color |
| Photo/Video | Gradient, camera | Single strong mark |

**Rule:** Look at your top 20 competitors' icons. Then design to be immediately distinguishable.

### 4. Recognizable Mark

The icon needs a single, memorable mark — not a scene or a composition. Ask:

> "Can someone describe this icon in 3 words?"

- ✅ "Red speech bubble" | ❌ "Someone using a phone with a gradient"
- ✅ "Bold orange flame" | ❌ "Abstract colorful shapes"

### 5. Brand Consistency

The icon is your brand mark in the App Store. It should:
- Match your app's primary color palette
- Be consistent with your splash screen, push notifications, and marketing
- Work as a favicon, social media avatar, and press kit asset

## Icon Sizes Required

| Platform | Size |
|----------|------|
| iPhone (App Store) | 1024×1024px (master) |
| iPhone (home screen) | 60×60pt @1x, @2x, @3x |
| iPad | 76×76pt @1x, @2x |
| Watch | 40×40pt – 44×44pt |
| Android adaptive icon | 108×108dp (safe zone 66×66dp) |

Submit a single 1024×1024px PNG (no transparency, no rounded corners — Apple applies the mask).

## A/B Testing Icons

### iOS — Product Page Optimization

1. App Store Connect → Your App → Product Page Optimization → Create Test
2. Create up to 3 icon variants
3. Set traffic allocation (20–33% per variant)
4. Run for minimum 7 days or until statistical significance

**Access:** App Store Connect → App Store → Product Page Optimization

### Android — Play Store Experiments

1. Play Console → Store listing experiments → New experiment
2. Upload up to 3 icon variants
3. Set traffic split
4. Google reports install conversion rate per variant

### What to Test

Test one variable at a time:

| Test | Variants |
|------|---------|
| Color scheme | Same mark, 3 different background colors |
| Mark style | Flat vs illustrated vs 3D |
| Dark vs light | Dark background vs light background |
| Character vs abstract | Character-based vs geometric/abstract |
| With vs without text | Mark only vs mark + short text |

### Reading Results

- **Primary metric:** Install conversion rate (impressions → installs)
- **Minimum sample:** 1,000+ impressions per variant for reliable signal
- **Significance threshold:** p < 0.05 or Appeeky/Play Console confidence indicator

## Icon Audit

Evaluate your current icon against:

```
Clarity at 60×60px:        [1–10]
  - Recognizable mark at small size?
  - No illegible text?

Color contrast:            [1–10]
  - Works on white (light mode)?
  - Works on dark backgrounds (dark mode)?

Category differentiation:  [1–10]
  - Stands out from top 10 competitor icons?

Simplicity:                [1–10]
  - Max 2 elements?
  - Describable in 3 words?

Brand alignment:           [1–10]
  - Consistent with app's visual identity?

Overall: [N]/50
```

## Brief for Icon Designer

When briefing a designer:

```
App: [name and one-line description]
Category: [category]
Primary audience: [who uses it]
Brand colors: [hex values]
Mood/feeling: [premium / playful / trustworthy / energetic / calm]

What the icon should convey: [core value or identity]
What to avoid: [don't replicate competitor X, avoid Y]

Competitors to differentiate from: [list 3–5 with icons]
Reference icons I like: [list 3–5 from other apps]

Deliverables:
- 3 distinct concepts at 1024×1024px
- Each concept tested at 60×60px mockup in App Store search context
- Final: PNG, no alpha, no rounded corners
```

## Related Skills

- `ab-test-store-listing` — Full A/B testing methodology
- `screenshot-optimization` — Complement the icon with strong screenshots
- `android-aso` — Android adaptive icon requirements
- `aso-audit` — Icon is one factor in the full ASO score