app-icon-optimization

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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)?

From appeeky/aso-skills, MIT.

More from appeeky/aso-skills