appeeky/aso-skills

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.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/appeeky/aso-skills --skill app-icon-optimization

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

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

タスクに関連する項目

同じリポジトリから

関連する Skills

すべての Skills
appeeky
コミュニティ

android-aso

When the user wants to optimize their Google Play Store listing — title, short description, full description, keywords, ratings, or Play Store-specific features. Use when the user mentions "Google Play", "Android", "Play Store", "Play Console", "short description", "full description indexed", "Google Play ASO", or wants Google Play-specific keyword, creative, or ratings strategy. For iOS App Store optimization, see aso-audit and metadata-optimization.

導入数
5
GitHub Stars
2197
更新日
10月6日
appeeky
コミュニティ

localization

When the user wants to localize their App Store listing for international markets. Also use when the user mentions "localization", "translate my app", "international markets", "expand to new countries", "localize metadata", or "which countries should I target". For keyword research in specific markets, see keyword-research. For metadata writing, see metadata-optimization.

導入数
4
GitHub Stars
2197
更新日
10月6日
appeeky
コミュニティ

review-management

When the user wants to analyze, respond to, or improve their app reviews and ratings. Also use when the user mentions "reviews", "ratings", "negative reviews", "how to get more reviews", "review response", or "my rating is dropping". For broader ASO audit, see aso-audit. For retention issues causing bad reviews, see retention-optimization.

導入数
4
GitHub Stars
2197
更新日
10月6日
appeeky
コミュニティ

web-to-app-funnel

When the user wants to design or optimize the funnel that takes web visitors into installing and onboarding the app — including smart app banners, web-to-app deep links, deferred deep links, web onboarding (Stripe-paid web flow before app install), QR codes, "open in app" CTAs, and the trade-off between paying on web vs in-app. Use when the user mentions "web to app", "smart app banner", "Stripe before app", "web paywall before install", "Branch web SDK", "web funnel for app", "AppsFlyer OneLink

導入数
4
GitHub Stars
2197
更新日
10月6日