Image Size and Resolution

All images on Apple TV are @1x resolution.

Make sure images are clear at a distance. Remember, your app is across the room on a large screen. Scale images large enough to be seen clearly from far away, and ensure that focus and interaction are easy. This is especially important during gameplay.

Test image quality. An image that looks great on your computer screen may appear pixelated or stretched when displayed on a large TV screen. Always test your app on a TV to confirm that your images look crisp.


Accessibility

Provide alternative text labels for images and icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.


App Icon

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.

Apple TV App Store showing grid of App Icons

Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app. People shouldn’t have to analyze the icon to figure out what it represents.

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. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Instead, take the time to design a beautiful and engaging icon that really pops.

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

Layering

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.

Individual layers of the Apple TV System Preferences App Icon

Effects

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. 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.

For alternate icon sizing guidance, see Sizes. For developer guidance, see the setAlternateIconName method of UIApplication.

Sizes

Important Every app must supply both a small and a large app icon.

App icons must be submitted in two sizes, both with the same aspect ratio.

Small Icon

This size is used on the Apple TV Home screen when your app is installed.

Actual size 400px × 240px
Focused/Safe zone size 370px × 222px
Unfocused size 300px × 180px
Large Icon

This size is used by the App Store.

Size 1280px × 768px

Allow a conservative safe zone in your small app 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.

Mimic your small app icon with your large app icon. Although the large icon is used differently than the small one, it’s still your app icon. It should match the smaller version in appearance.

For downloadable app icon templates that can help you position your content, see Resources.


Top Shelf Images

The top shelf of the Apple TV Home screen is a great opportunity for added visibility when the user has placed your app in the top row of the Home screen. When your app is in focus, you can showcase engaging imagery that encourages people to dive into your app for more.

Static Image

At a minimum, every app must supply a single, static top shelf image that can be displayed when your app is in the top row of the Home screen and in focus.

Example of static top shelf image

Static top shelf image size 2320px × 720px

Provide a visually rich static image. Your app’s static top shelf image is used when dynamic content isn’t provided or is unavailable. Use it as an opportunity to highlight your brand.

Don’t imply interactivity in a static image. The static top shelf image isn’t focusable, so it shouldn't include elements that make it appear interactive.

Dynamic Content

Use dynamic top shelf imagery to highlight and provide quick access to important content in your app. You can supply single-layer or multilayer images for dynamic top shelf imagery. To learn how to create multilayer images, see Layered Images.

Help the user jump right to key content. Top shelf provides a path to content that people care about most. Let users click a focused image to open your app and go immediately to the related content, or let them use the Play button on the remote to immediately start media playback or enter gameplay.

Showcase compelling dynamic content. The imagery you show in the top shelf should draw people in and make them crave more. Although your app can stick with the required static image, consider implementing more captivating, dynamic top shelf imagery, such as the newest or highest rated content, to provide a more engaging experience.

Personalize favorite content. People are familiar with apps they put in the top shelf of the Apple TV Home screen and use them often. You can personalize the experience by showing targeted recommendations in the top shelf, allowing users to resume media playback or jump back into active gameplay.

Don’t show advertisements or prices. When users put your app at the top of the Home screen, you’ve already sold them on it. Don’t bombard them with ads that push them away and encourage your app to get demoted. Showing purchasable content in the top shelf is fine, but focus on new and exciting content, and never display prices.

Dynamic Content Layouts

Dynamic top shelf imagery can appear as a row of focusable content or as scrolling banners. These layout styles provide a range of flexible formatting options for presenting your content. Regardless of layout style, show content that people care about the most and that they can get to quickly.

For downloadable top shelf image templates that can help you position your content, see Resources.

Sectioned Content Row

This layout style shows a single labeled row of sectioned content. It’s commonly used to highlight recently viewed content, new content, or favorites. Content in the row is focusable, letting the user scroll through it at the desired speed. A label appears when an individual piece of content comes into focus, and small movements on the remote’s touch surface bring the focused image to life. A sectioned content row can be configured to show multiple labels, if desired.

Sectioneed Content Row layout on the Apple TV Main Menu

Provide enough content to constitute a complete row. At a minimum, load enough images in a sectioned content row to span the full width of the screen. In addition, include at least one label for greater platform consistency and to provide additional context.

You can supply images of varying aspect ratios for a sectioned content row. The following sizes are supported:

Poster (2:3)

Content Layout 2x3 Grid

Actual size 404px × 608px
Focused/Safe zone size 380px × 570px
Unfocused size 333px × 500px
Square (1:1)

Content Layout 1x1 Grid

Actual size 608px × 608px
Focused/Safe zone size 570px × 570px
Unfocused size 500px × 500px
HDTV (16:9)

Content Layout 16x9 Grid

Actual size 908px × 512px
Focused/Safe zone size 852px × 479px
Unfocused size 782px × 440px

Be aware of additional scaling when combining image sizes. If your top shelf design includes a mixture of image sizes, keep in mind that images will automatically scale up to match the height of the tallest image if necessary. For example, an HDTV image scales to 500 pixels high if included in a row with a poster or square image.

Scrolling Inset Banner

This layout shows a series of large images, each of which spans almost the entire width of the screen. Apple TV automatically scrolls through these banners from left to right on a preset timer until one is brought into focus. The sequence circles back to the beginning once the final image is reached.

When a banner is in focus, a small, circular gesture on the remote’s touch surface enacts the system focus effect, animating the item, applying lighting effects, and, if the banner contains multiple layers, producing a 3D effect. Swiping on the touch surface pans to the next or previous banner in the sequence. Use this style to showcase rich, captivating content, such as a popular new movie.

Example of a Scrolling Inset Banner layout

Provide three to eight images. A minimum of three images is recommended for a scrolling banner to feel effective. More than eight images makes it harder to manually navigate to a specific image.

If you need text, add it to your image. This layout style doesn’t show labels under content, so any text must be part of the image itself. In layered images, consider elevating text by placing it on a dedicated layer above the others. Add the text to the accessibility label of the image too, so VoiceOver can read it to the visually impaired. To learn about VoiceOver, see tvOS Accessibility and Accessibility Programming Guide for iOS.

The following size is supported for a scrolling inset banner image:

Extra Wide

Content Layout Extra Wide Grid

Actual size 1940px × 692px
Focused/
Safe zone size
1740px × 620px
Unfocused size 1740px × 560px

Game Center Images

If your app is a game, the Game Center dashboard provides additional opportunities to immerse people in eye-catching imagery.

Achievement Icons

An opaque image is required for each achievement, visually representing a goal that a user has attained during gameplay. The system automatically crops an achievement icon to a circle, so be sure to keep primary content centered. Achievement icons are for display only and aren’t focusable.

Achievement Icon Grid

Visible/Safe zone size 200px × 200px
Actual size 320px × 320px

Dashboard Artwork

This optional image, such as a game logo, appears at the top of your game’s dashboard. Transparency may be used to let the background show through the image. Dashboard artwork is not focusable.

Dashboard Artwork Grid

Maximum size 923px × 150px

Leaderboard Artwork

Provide between one and three single-layer or multilayer images with an aspect ratio of 16:9 for each leaderboard or leaderboard set in your game. The back layer of the art must be opaque. At runtime, a dark gradient may overlay your image from bottom to top, and you can place text above the bottom right corner. These images are focusable. A small, circular gesture on the remote’s touch surface enacts the focus effect.

Leadboard Artwork Grid

Actual size 659px × 371px
Focused/Safe zone size 618px × 348px
Unfocused size 548px × 309px

For information about implementing game center support in an app, see Game Center Programming Guide.

For a downloadable leaderboard artwork template that can help you position your content, see Resources.


Layered Images

Layered images are at the essence of the Apple TV user experience. In conjunction with the parallax effect, they produce a sense of realism and vigor that evokes a personal connection as people interact with content onscreen.

A layered image consists of two to five distinct layers that come together to form a single image. The separation between layers, along with use of transparency, creates a feeling of depth. As someone interacts with an image, layers closer to the surface elevate and scale, overlapping lower layers farther back and producing a 3D effect.

Important Layered images are required for app icons. They’re optional but strongly encouraged for other focusable images in your app, including top shelf images.

Use standard interface elements to display layered images. If you use UIKit views and the focus API, layered images automatically get the parallax treatment whenever they’re brought into focus.

Identify logical foreground, middle, and background elements. In foreground layers, display prominent elements such as a character in a game, or text on an album cover or movie poster. Middle layers are perfect for secondary content and effects like shadows. Background layers are opaque backdrops that showcase the layers above without upstaging them.

Generally, keep text in the foreground. Unless you want to obscure text, bring it to the forefront in a layered image for clarity.

Keep the background layer opaque. Using varying levels of opacity to let content shine through higher layers is fine, but your background layer must be opaque—you’ll get an error if it’s not. This ensures your artwork looks great with parallax, drop shadows, and system backgrounds.

Keep layering simple and subtle. Parallax is designed to be almost unnoticeable. Excessive 3D effects can appear unrealistic and jarring. Keep depth simple to bring your content to life and add delight.

Leave a safe zone around your content. During focus and parallax, content around the edges of some layers may be cropped or difficult to see clearly as the image scales and moves. To ensure that your primary content is always visible, don’t put it too close to the edges. The safe zone varies, depending on the image size, layer depth, and motion. Foreground layers are cropped more than background layers.

Icon with safe zone guides

Always preview layered images. The best way to design layered images that look great on Apple TV is to preview them throughout your design process using Xcode, the Parallax Previewer app for macOS, or the Parallax Exporter Photoshop plug-in. Pay special attention as scaling and clipping occur, and readjust your imagery to keep important content safe if necessary. Once your layered images are final, make sure you preview them on an actual TV for the most accurate representation of what people will see. Parallax Previewer and Parallax Exporter are available for download in Resources.

Sizing Layered Images

To determine the appropriate size for a layered image, take both the unfocused and focused states into account. During the parallax effect, background layers may be cropped slightly, so keep essential content within a safe zone and include some additional breathing room to make sure your content always looks great.

Sizing Diagram for Layered Images

The following formulas are recommended for calculating sizing for a layered image based on the size of the image when it’s not in focus.

Focused/Safe zone size Actual size
Longest side:
Length of longest unfocused side + 70px
Shortest side:
Proportional based on longest side
Longest side:
Length of longest focused side × 106%
Shortest side:
Proportional based on longest side

Creating Layered Images

Layered images can be embedded in your app or retrieved from a content server at runtime.

For developer guidelines on implementing layered images in your app project in Xcode, see App Programming Guide for tvOS.

Embedded Layered Images

Use the Parallax Previewer app for macOS, the Parallax Exporter Adobe Photoshop plug-in, or Xcode to create layered images for inclusion in your app, and make sure they appear as expected during the parallax effect. Download Parallax Previewer and Parallax Exporter in Resources.

  • Parallax Previewer app for macOS. Parallax Previewer can import .png images to serve as individual layers, layered images (.lsr) created with the Parallax Exporter plug-in, and layered Photoshop images (.psd). Parallax Previewer can export layered images (.lsr)  that you can import directly into an Xcode project.
  • Parallax Exporter Adobe Photoshop plug-in. Use this plug-in to test your layered images in Photoshop and export them as layered images (.lsr) that you can import directly into an Xcode project.
  • Xcode. Drag standard .png files into your app’s asset catalog to serve as individual layers of an image stack in Xcode. Image stacks can be exported as layered images (.lsr). Xcode can also import .lsr images.
Runtime Layered Images

If your app retrieves layered images from a content server at runtime, you must provide those images in runtime layered image (.lcr) format. You don’t create runtime layered images directly; you generate them from .lsr or Photoshop files using the layerutil command-line tool that’s installed with Xcode. Runtime layered images are intended to be downloaded and should not be embedded within your app itself.


Launch Image

A launch image displays when your app starts up. It appears instantly and is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive. A launch image isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use. Launch images are static, and don’t include layers.

Important Every app must supply a launch image.

Launch image size 1920px × 1080px

Design a launch image that’s nearly identical to the first screen of your app. If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch image and the first screen of the app.

Don't include text in your launch image. Because launch images are static, any displayed text won’t be localized.

Downplay launch. People are likely to switch apps frequently, so design a launch image that doesn’t draw attention to the app launching experience.

Don’t advertise. The launch image isn’t a branding opportunity. Don’t design an entry experience that looks like a splash screen or an "About" window. Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.