# App icon optimization Human Guide

## What This Is For
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. It gives the agent a clearer input/output frame for app icon optimization: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the App icon optimization agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for app icon optimization.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the App icon optimization guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- No text (illegible at small sizes; Apple discourages it)
- Strong silhouette recognizable at a glance
- Test at 60×60px before finalizing
- 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
- ✅ "Red speech bubble" | ❌ "Someone using a phone with a gradient"
- ✅ "Bold orange flame" | ❌ "Abstract colorful shapes"
- 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
- App Store Connect → Your App → Product Page Optimization → Create Test

## Decision Points And Nuance
The original skill emphasizes: Why the Icon Is Your Most Impactful Asset, Icon Design Principles, Simplicity at Small Size, Color Contrast Against the App Store Background, Category Visual Language, Recognizable Mark, Brand Consistency, Icon Sizes Required, A/B Testing Icons, iOS — Product Page Optimization.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- Avoid white icons — they disappear in light mode
- Avoid very dark icons — they disappear in dark mode
- What to avoid: [don't replicate competitor X, avoid Y]

## Copy-And-Paste Prompt
```text
Use the App icon optimization human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the eronred/aso-skills skill entry for `app-icon-optimization`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# 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