PluginBench
Skill
Pass
Audit score 90

app-icon-optimization

appeeky/aso-skills

Design, audit, and A/B test app icons to maximize tap-through rate in App Store search and browse.

What is app-icon-optimization?

This skill helps you optimize your app icon—the first visual element users see in search results—to increase tap-through rate and conversions. Use it when designing a new icon, auditing your current one, or running A/B tests across icon variants. The icon is your most impactful asset; a strong one can lift TTR by 20–40%.

  • Design icons with simplicity, contrast, and category differentiation principles
  • Audit existing icons against clarity, color contrast, recognizability, and brand alignment
  • Set up and interpret A/B tests on iOS (App Store Connect) and Android (Play Console)
  • Create icon briefs for designers with mood, brand colors, and competitor differentiation
  • Test one variable at a time (color, mark style, dark vs. light, character vs. abstract)
  • Evaluate icons at actual small sizes (60×60px) to ensure legibility in search results

How to install app-icon-optimization

npx skills add https://github.com/appeeky/aso-skills --skill app-icon-optimization
Prerequisites
  • App Store Connect account (for iOS A/B testing) or Play Console account (for Android)
  • Current app icon in 1024×1024px PNG format (no transparency, no rounded corners)
  • Access to install conversion metrics or tap-through rate data from your app store
Claude Code
Cursor
Windsurf
Cline

How to use app-icon-optimization

  1. 1.Audit your current icon using the provided rubric (clarity, contrast, differentiation, simplicity, brand alignment)
  2. 2.Review your top 10–20 competitor icons in your category to identify visual patterns and gaps
  3. 3.Design or brief 2–3 icon variants, testing one variable at a time (e.g., color, mark style, or dark vs. light)
  4. 4.Create an A/B test in App Store Connect (iOS) or Play Console (Android) with your variants
  5. 5.Run the test for at least 7 days or until you reach 1,000+ impressions per variant
  6. 6.Analyze results using install conversion rate as the primary metric; look for p < 0.05 significance
  7. 7.Deploy the winning variant and monitor TTR lift over the following weeks

Use cases

Good for
  • Redesigning an app icon to stand out in a crowded category like productivity or games
  • Running an A/B test to compare three icon color variants and measure install conversion lift
  • Auditing your current icon against competitor icons to identify differentiation gaps
  • Briefing a designer with specific constraints (brand colors, mood, what to avoid)
  • Testing whether adding text to your icon improves or hurts tap-through rate
Who it's for
  • App developers and product managers launching or updating iOS/Android apps
  • ASO (App Store Optimization) specialists focused on conversion rate improvement
  • Designers creating app icons who need data-driven feedback on variants
  • Growth teams measuring the impact of visual changes on install metrics

app-icon-optimization FAQ

What size should my app icon be?

Submit a single 1024×1024px PNG master file to the App Store or Play Console. Apple and Google apply the mask and scale automatically. Always test your design at 60×60px (iPhone search results) to ensure the mark is recognizable at small sizes.

Can I include text in my app icon?

No. Text becomes illegible at 60×60px in search results, and Apple discourages it. Your icon should be a single, memorable mark recognizable in 3 words (e.g., 'red speech bubble').

How long should I run an A/B test?

Run for a minimum of 7 days or until each variant receives 1,000+ impressions. Larger sample sizes reduce noise. Stop early only if one variant is statistically significant (p < 0.05) with high confidence.

What's the difference between this skill and screenshot-optimization?

Icons drive tap-through rate (impressions → taps). Screenshots drive conversion rate (taps → installs). Optimize both: a strong icon gets users to tap; strong screenshots convince them to install.

Should my icon work on both light and dark backgrounds?

Yes. The App Store shows icons on white (light mode) and dark backgrounds (dark mode). Test your icon on both. Avoid pure white (disappears in light mode) and very dark colors (disappear in dark mode). Add subtle contrast or a border if needed.

Full instructions (SKILL.md)

Source of truth, from appeeky/aso-skills.


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:

CategoryCommon patternsHow to stand out
ProductivityBlue, clean, minimalWarmer colors, bolder marks
Health/FitnessGreen, orange, energeticPremium dark, sophisticated
FinanceBlue, green, conservativeBold, distinctive mark
GamesBright, characters, actionPremium/dark if competitors are loud
SocialRound shapes, soft colorsSharp, distinctive if feed is soft
MeditationPurple, blue, calmUnexpected contrast color
Photo/VideoGradient, cameraSingle 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

PlatformSize
iPhone (App Store)1024×1024px (master)
iPhone (home screen)60×60pt @1x, @2x, @3x
iPad76×76pt @1x, @2x
Watch40×40pt – 44×44pt
Android adaptive icon108×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:

TestVariants
Color schemeSame mark, 3 different background colors
Mark styleFlat vs illustrated vs 3D
Dark vs lightDark background vs light background
Character vs abstractCharacter-based vs geometric/abstract
With vs without textMark 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