MCPInstall

app-icon-optimization

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.

Installs
2.7K
Last 24h
+19
Trending rank
#6100
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/appeeky/aso-skills --skill app-icon-optimization
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads app-icon-optimization automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the app-icon-optimization skill do?

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.

How do I install app-icon-optimization?

Run npx skills add https://github.com/appeeky/aso-skills --skill app-icon-optimization in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/app-icon-optimization/ (personal) or .claude/skills/app-icon-optimization/ (project).

Which AI agents can use app-icon-optimization?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is app-icon-optimization safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains app-icon-optimization?

It is published by appeeky in appeeky/aso-skills. It has 2,732 recorded installs.

More from appeeky/aso-skills

View all →

aso-audit

appeeky/aso-skills

When the user wants a full ASO health audit, review their App Store listing quality, or diagnose why their app isn't ranking. Also use when the user mentions "ASO audit", "ASO score", "why am I not ranking", "listing review", or "optimize my app store page". For keyword-specific research, see keyword-research. For metadata writing, see metadata-optimization.

Security4.5K installs

keyword-research

appeeky/aso-skills

When the user wants to discover, evaluate, or prioritize App Store keywords. Also use when the user mentions "keyword research", "find keywords", "search volume", "keyword difficulty", "keyword ideas", or "what keywords should I target". For implementing keywords into metadata, see metadata-optimization. For auditing current keyword performance, see aso-audit.

monetization-strategy

appeeky/aso-skills

When the user wants to design or optimize their app's monetization — pricing, paywalls, subscriptions, or in-app purchases. Also use when the user mentions "pricing", "paywall", "subscription", "IAP", "how to monetize", "revenue optimization", "free trial", or "conversion to paid". For retention impact, see retention-optimization. For competitive pricing, see competitor-analysis.

Business & Finance3.7K installs

metadata-optimization

appeeky/aso-skills

When the user wants to optimize App Store metadata — title, subtitle, keyword field, or description. Also use when the user mentions "optimize my title", "ASO metadata", "keyword field", "character limits", "app description", or "write my subtitle". For keyword discovery, see keyword-research. For full ASO audits, see aso-audit.

Security3.6K installs

competitor-analysis

appeeky/aso-skills

When the user wants to analyze competitors' App Store strategy, find keyword gaps, or understand competitive positioning. Also use when the user mentions "competitor analysis", "competitive research", "keyword gap", "what are my competitors doing", or "compare my app to". For keyword-specific research, see keyword-research. For metadata writing, see metadata-optimization.

screenshot-optimization

appeeky/aso-skills

When the user wants to design, optimize, or evaluate App Store screenshots and preview videos. Also use when the user mentions "screenshots", "app preview", "product page design", "screenshot design", "creative assets", or "what should my screenshots show". For A/B testing screenshots, see ab-test-store-listing. For full ASO audit, see aso-audit.

Testing & QA3.5K installs

Popular testing & qa skills

View category →

tdd

mattpocock/skills

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

Testing & QA1.2M installs

grilling

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Testing & QA996.2K installs

migrate-to-shoehorn

mattpocock/skills

Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.

Testing & QA484.1K installs

run-train

lllllllama/rigorpilot-skills

Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs