Every app needs a beautiful and memorable icon that attracts attention in the App Store and that stands out on the Apple TV Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose.
Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.
Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it represents. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose.
Keep the background simple. Don’t clutter your icon with too much background noise. Give it a simple background so higher layers stand out and it doesn’t overpower other app icons nearby. Remember, you don’t need to fill the entire icon with content.
Use words only when they’re essential or part of a logo. An app’s name appears below its icon when the icon is in focus. Don’t include nonessential words that repeat the name or tell people what to do with your app, like "Watch" or "Play." If your design includes any text, emphasize words that relate to the actual content your app offers.
Don’t include screenshots or interface elements. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.
Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.
Keep icon corners square. The system applies a mask that rounds icon corners automatically.
App icons must have between two and five layers to create a sense of depth and vitality as your icon comes into focus.
Important Layered images are required for app icons. For guidance, see Layered Images.
Use appropriate layer separation. If your icon includes a logo, separate the logo from the background. If your icon includes text, bring the text to the front so it’s not hidden by other layers when the parallax effect occurs.
Use gradients and shadows cautiously. Background gradients and vignettes can clash with the parallax effect. For gradients, top-to-bottom, light-to-dark styles are recommended.
In app icons, shadows usually look best as sharp, hard-edged tints that are baked into the background layer and aren’t visible when the app icon is stationary.
Leverage varying opacity levels to increase the sense of depth and liveliness. Creative use of opacity can make your icon stand out. For example, the Photos icon separates its centerpiece into multiple layers that contain translucent pieces, bringing greater liveliness to the design.
User-Selectable App Icons
For some apps, customization is a feature that evokes a personal connection and enhances the user experience. If it provides value in your app, you can let people select an alternate app icon from a set of predefined icons that are embedded within your app. For example, a sports app might offer icons for different teams or an app with light and dark modes might offer corresponding light and dark icons. Note that your app icon can only be changed at the user’s request and the system always provides the user with confirmation of such a change.
App Icon Attributes
All app icons should adhere to the following specifications.
|Color space||sRGB (HD/4K), P3 (4K). See Color Management.|
|Layers||Flattened with no transparency|
|Resolution||@1x and @2x for the Home screen icon. @1x for the App Store icon. See Image Size and Resolution|
|Shape||Square with no rounded corners|
App Icon Sizes
App icons must be submitted in two sizes, both with the same aspect ratio.
Tip For downloadable app icon templates that can help you position your content, see Resources.
|Aspect||Icon size (@1x)||Icon size (@2x)|
|Actual size||400px × 240px (400pt × 240pt @1x)||800px × 480px (400pt × 240pt @2x)|
|Focused/Safe zone size||370px × 222px (370pt × 222pt @1x)||740px × 444px (370pt × 222pt @2x)|
|Unfocused size||300px × 180px (300pt × 180pt @1x)||600px × 360px (300pt × 180pt @2x)|
Allow a conservative safe zone in your Home screen icon. During focus and parallax, content around the edges of your app icon may be cropped as the icon scales and moves. To ensure your icon’s content isn’t cropped too tightly, consider allowing some additional breathing room.
|Icon size (@1x)|
|1280px × 768px (1280pt × 768pt @1x)|
Mimic your Home screen icon with your App Store icon. Although the App Store icon is used differently than the Home screen one, it’s still your app icon. It should generally match the Home screen version in appearance.