| name | ios-app-icon-and-app-store |
| description | iOS app icon + App Store presence applied — the icon design grid (single focal mark, no words, full-bleed, no baked mask), the iOS 26 Icon Composer layered/Liquid Glass system (light/dark/tinted/clear from one 1024 master), current App Store Connect screenshot device sizes + counts, app preview video specs, and product-page metadata character limits (name 30 / subtitle 30 / keywords 100 / promo 170), plus honest ASO. Use when designing an app icon, packaging App Store screenshots/metadata, or planning a product page. |
| tags | ["ios","app-icon","app-store","marketing","aso","hig"] |
iOS app icon & App Store presence — Icon Composer, screenshots, metadata
Source: Apple HIG App icons, Icon Composer (developer.apple.com/icon-composer), App Store Connect screenshot/preview specs + product-page reference, and App Review Guidelines, plus WWDC26 "Design" guide (developer.apple.com/wwdc26/guides/design) + Platforms State of the Union, cross-checked across ≥2 sources per fact (June 2026). iOS 26 (WWDC25 "Create icons with Icon Composer") is the shipping baseline; iOS 27 (WWDC26) is the current cycle — it refines, not replaces, the Liquid Glass icon system. Apple's through-line: one simple full-bleed mark, no embedded text, no baked corner mask; author Default/Dark/Mono once in Icon Composer; the store page is sold by the first 2–3 screenshots.
1. App icon design fundamentals
- One focal concept. A single, instantly-readable silhouette that expresses the app's purpose. Not a screenshot, not a busy scene, not a UI fragment. If you can't describe it in three words, it's too complex.
- No words / no text. Don't put the app name or taglines in the icon — the name sits under it on the Home Screen and in the store. Lettering is the #1 amateur tell. A single letter-as-logomark is acceptable only if it is the brand mark.
- Full-bleed square, no transparency. Provide a 1024×1024 px square, 90° corners, no alpha channel, art filling the entire canvas. Transparent areas or cutouts get the build rejected.
- Never bake in the rounded mask. iOS applies its own corner radius (a continuous "squircle," not a plain rounded rect) that matches the device. Round it yourself and the system rounds again on top — it reads broken next to real apps. Ship a hard square.
- Legible at small sizes. It renders as small as ~40 pt (notifications, Settings, Spotlight) and in Liquid Glass control sizes. Test at 40px and 29px: fine detail, thin strokes, and gradients with low internal contrast disappear. Favor bold shape + flat or simple color.
- Keyline / proportion. Use Apple's icon grid (in Apple Design Resources / Icon Composer templates) so the mark's optical weight and centering match system apps. Don't let the mark touch the edges unless it's a deliberate full-bleed field.
2. The layered icon system + Icon Composer (iOS 26 baseline → iOS 27)
iOS 26 (Liquid Glass) icons are layered, not one flat PNG. The system relights, blurs, and tints your layers live. Icon Composer (free Apple app, ships with Xcode 26) is the authoring tool; it outputs a single .icon file you drop into Xcode.
Workflow — one master → every variant/size:
- Bring artwork in as layers (foreground / background, up to 4 depth groups); Icon Composer applies Liquid Glass and generates all platform sizes from a single 1024px master (1088px for Watch). No more exporting a size grid by hand.
- Per group you tune Liquid Glass: translucency/opacity, blur, blend mode, specular highlights (crisp edge highlights that define each layer), and neutral or chromatic shadow. A vertical top-down light matches the system UI.
- Drop the
.icon into Xcode's navigator; the App Icon field name must match the file name (no extension).
The appearances you author (3 modes) → what users see (4 looks):
| Author mode | Renders as | What it is |
|---|
| Default | Light | Full-color icon on the light Home Screen |
| Dark | Dark | Recolored for dark mode — usually a darker/transparent background, the mark glows |
| Mono | Tinted + Clear | One grayscale/monochrome master the system tints (user's accent) or renders as frosted clear glass |
- Design Mono as a clean single-color shape — it drives both the tinted and clear glass looks. If your icon only works in full color, it dies in tinted/clear.
- Preview all four against light/dark wallpapers in Icon Composer before shipping; the auto-generated dark/mono are starting points, not final — adjust per appearance.
iOS 27 (WWDC26) — dimensional refraction, not a re-author: iOS 27 makes the same layered icons look sharper and more three-dimensional, refining the Liquid Glass foundations (Apple also improved how Liquid Glass diffuses busy content for readability). What's new:
- Refraction layers baked into the artwork — standard icons gain deeper edge refraction so they catch light and read more dimensional as the user tilts the Home Screen. Apps already shipping a Liquid Glass
.icon pick this up automatically on iOS 27 without recompiling; it's an enhancement, not a migration. The Default/Dark/Mono author model and the four/six render looks are unchanged — you do not have to re-author existing icons.
- Icon Composer annotations — you can now selectively annotate layers to add refraction or dial in content effects for extra character (opt-in per layer, not global), rather than taking the system default everywhere.
- Interactive earlier-OS preview — Icon Composer previews how the icon renders on earlier OS releases, so a refraction-tuned iOS 27 icon can be checked against its iOS 26 fallback before shipping.
- Flattened marketing export — Icon Composer exports a flattened version of the icon for marketing/comms (App Store, web, press) — distinct from the App Store icon, which is still derived from the build's
.icon.
- Verify-at-source flag: whether new App Store submissions are required to ship a refraction-annotated
.icon (vs. it being purely opt-in polish) is not yet confirmed in Apple docs — treat refraction as optional character until App Review Guidelines say otherwise.
3. App Store screenshots (the conversion surface)
Required per device family; uploaded in App Store Connect. Min 1, max 10 per device shelf (Apple's hard floor is 1; 3+ is the practical minimum — the first 2–3 are the billboard). Specs are unchanged for 2026 — same pixel sizes, same exact-dimension rejection — just recalibrated around iPhone 17 / iPad Pro M-series hardware.
| Device family | Required size (px, portrait) | Notes |
|---|
| iPhone 6.9" (Pro Max / 17 Pro Max) | 1320 × 2868 | The master iPhone shelf — upload this; ASC scales it down |
| iPhone 6.5" (fallback) | 1242 × 2688 (legacy) / 1260 × 2736 (Air) | Only required if no 6.9" provided |
| iPhone 6.7" (older) | 1290 × 2796 | Accepted; 6.9" preferred |
| iPad 13" (M4) | 2064 × 2752 | Required if the app supports iPad |
- Auto-scale rule: upload one set at the largest size per family (iPhone 6.9", iPad 13") and ASC scales to every smaller shelf. You no longer need a screenshot per device. Submissions even 1 px off-spec are rejected.
- First 2–3 carry the conversion. Only the first screenshots show in search results — they're the billboard. Lead with the single strongest value prop; don't bury it.
- Caption/overlay strategy: benefit-led, not feature labels ("See your day adapt," not "Calendar view"). Bold, high-contrast text, readable at ~300 px thumbnail width, value prop top-left of shot 1. Apple now OCR-indexes screenshot text, so it's also light ASO — keep it honest and real.
- Portrait by default — it occupies more vertical space in listings and shows more shots in search. Landscape only for genuinely landscape apps (games, video).
- Localize screenshots per storefront locale when you localize metadata; English-only overlays on a localized page read cheap.
4. App preview video (optional)
- 15–30 seconds, portrait, captured from a real device (Apple requires actual app footage — no marketing-only motion graphics as the whole video).
- iPhone 6.9"/6.5": 886 × 1920 (or 1080 × 1920) portrait. Format:
.mov / .m4v / .mp4, H.264 (High up to L4.0) or ProRes 422 HQ — HEVC/H.265, VP9, AV1 are rejected. Constant 30 fps (re-encode screen recordings off VFR). ≤ 500 MB.
- Must contain an audio track even if silent (a silent stereo AAC track satisfies it). Pick a strong poster frame — it's the still shown before tap.
5. Product-page metadata (character limits)
Apple counts spaces + punctuation toward every limit.
| Field | Limit | Role |
|---|
| App name | 30 chars | Indexed, highest ASO weight. Name + 1 short descriptor max |
| Subtitle | 30 chars | Indexed, second weight. A real value line, not keyword soup |
| Keywords | 100 chars | Comma-separated single words, no spaces after commas, no plurals/repeats of name+subtitle words. Hidden from users |
| Promotional text | 170 chars | Editable anytime without a build; not indexed. Use for timely news |
| Description | ~4000 chars | First ~3 lines visible before "more" — front-load value; not heavily indexed |
| What's New | ~4000 chars | Per-version release notes |
- Keywords field: maximize coverage — split phrases into atoms (
meal,plan,macro,calorie), never repeat a word already in name/subtitle (wasted), drop "app/free/the".
- Promo text is your only no-resubmit lever — change it for launches/seasonal pushes without shipping a build.
6. ASO fundamentals + honesty (non-negotiable)
- Indexed, ranked roughly: app name > subtitle > keywords field. Screenshot OCR + in-app purchase display names contribute lightly. Description is largely not a ranking factor — write it for humans.
- No fabricated social proof. Don't claim "#1", "best", award badges, or star ratings you didn't earn, and don't fake reviews — App Review rejects it and it's a deceptive pattern. Let the real rating prompt (
SKStoreReviewController, ≤3 prompts/365 days) earn ratings.
- Match the binary. Screenshots/description must show the actual app. Mockups of unbuilt features = rejection under App Review §2.3 (accurate metadata).
- Privacy nutrition labels are mandatory and must match real data collection (drives the "App Privacy" card). They're declared in App Store Connect, separate from this metadata, and must agree with your privacy policy and
PrivacyInfo.xcprivacy. Mismatch = rejection + trust hit.
7. Mistakes that read as cheap / amateur
Text/app-name baked into the icon · a screenshot or full UI crammed into the icon · self-applied rounded corners (double-mask) · transparency/alpha in the icon (auto-reject) · a flat PNG icon with no dark/mono variant on iOS 26/27 (looks dead in tinted/clear, and skips iOS 27's auto refraction) · screenshots that are raw device captures with no caption/story · value prop buried in shot 4 · keyword stuffing the app name ("Greg: Macro Calorie Diet AI Tracker Planner") · fake "#1"/award/rating badges · English overlays on a localized page · landscape phone screenshots for a portrait app · an HEVC preview video (silent rejection).
8. Greg application
Greg = native SwiftUI iOS 26/27 nutrition app; cobalt #2C50F0 + Figtree; loop plan → log → adapt → shop → measure; US-only launch.
- Icon mark (no words): a single cobalt Liquid Glass mark on a cobalt-tinted field — the cleanest read is an adaptive-loop / arc-arrow or a simple plate-ring glyph, not a fork-and-knife cliché. Foreground = the white/light glyph layer with specular highlight; background = the cobalt field. No "Greg" lettering. Author in Icon Composer from one 1024 master.
- Default (light): cobalt field, bright white glyph.
- Dark: near-black/translucent field, glyph glows cobalt.
- Mono: a single clean white glyph silhouette — must hold up as both tinted (system accent) and clear (frosted glass). Simplify until it survives at 40px in one color.
- iOS 27: ship Greg's icon as a real layered
.icon and it gains the dimensional refraction free on iOS 27 — no separate asset. Optionally annotate the cobalt field/glyph in Icon Composer for a touch of refraction, but keep the arc/plate mark legible at 40px first. Export the flattened version for the App Store listing, press, and web.
- 3-screenshot App Store story (portrait, 1320×2868, OCR-honest):
- "Plan a day that fits you" — the plan/Today screen with macro targets. Value prop top-left.
- "Logged off-plan? It adapts." — the adapt step showing a meal swap after a real log. This is the differentiator — make it shot 2.
- "Shop the exact plan" — the generated grocery list. (Optional shot 4: the measure/trend screen.)
- Metadata, honest (no dark patterns — Greg's rule):
- Name (≤30):
Greg — Adaptive Nutrition (24).
- Subtitle (≤30):
Plans that adapt when you do (28) — a real claim, no "#1".
- Keywords (≤100):
macro,calorie,meal,plan,adapt,grocery,nutrition,protein,diet,track,log,barcode — single words, none repeating name/subtitle.
- Promo text: save for a US-launch line; swap without a build.
- No fabricated ratings/badges; let the in-app rating prompt earn reviews; ensure the privacy nutrition label matches real collection before submit.
Pairs with: ios-color-and-materials (cobalt + Liquid Glass material), ios-sf-symbols-and-icons (glyph/weight language), iconography-and-imagery (icon grid, optical sizing, export), ios26-hig-patterns (Liquid Glass system context).
