The Complete Guide to tvOS App Icons and Top Shelf Images

On iOS or macOS, an app icon is usually just one flat image exported at a few sizes. tvOS works very differently: Apple TV icons are layered images built for a 3D parallax effect.

When someone focuses your app on the Apple TV home screen with the Siri Remote, the icon responds to the tiniest finger movement with a floating, three-dimensional feel that makes the whole interface feel alive.

This guide walks through the current Apple HIG and Xcode requirements for tvOS icon sizes, layer structure, and the full Xcode setup process.

1. Core Size Specifications

tvOS icon assets fall into four categories: the Home Screen icon (Small), the App Store icon (Large), the Top Shelf image, and the wide Top Shelf banner.

2. How Layered (Parallax) Images Are Structured

Unlike a normal static image, a tvOS 3D icon is made up of two to five separate layers stacked on top of each other:

+------------------------------------+  <- Front Layer (logo / title)
|   +----------------------------+   |
|   |  +----------------------+  |   |  <- Middle Layer (secondary elements)
|   |  |                      |  |   |
|   |  |                      |  |   |  <- Back Layer (background / gradient)
|   |  +----------------------+  |   |
|   +----------------------------+   |
+------------------------------------+

1. Back Layer
   • Must be fully opaque (PNG or JPEG, no transparency).
   • Carries the base color, gradient, or background texture.
2. Middle Layer / Front Layer
   • Needs an alpha channel (PNG-24).
   • The front layer holds your core logo, key artwork, or wordmark.
3. Corners and Masking
   • Export everything as a plain rectangle with hard corners.
   • The system automatically applies the standard tvOS rounded-corner mask and adds live edge highlights and shadows at runtime — you never round the corners yourself.

3. Setting Up tvOS Icons in Xcode

Step 1: Create the Asset Catalog Entry

1. Open your project and select Assets.xcassets.
2. Click the + button at the bottom and choose tvOS > tvOS App Icon & Top Shelf Image.
3. Xcode generates the full set for you: App Icon - Small, App Icon - Large, and Top Shelf Image.

Step 2: Configure the Layers

Expand App Icon - Small, which ships with three default layers — Front, Middle, and Back:

• Only need two layers? Right-click Middle and delete it.
• Need more depth? Add layers from the attributes panel on the right — five is the maximum.

Step 3: Import the Assets at Full Resolution

• Small (Home Screen icon): drag your 800×480 px layers into the Front, Middle, and Back slots in order.
• Large (App Store icon): drag your 1280×768 px layers into the corresponding slots under App Icon - Large.
• Top Shelf: drag your 1920×720 px image into the Top Shelf placeholder.

Step 4: Preview the Parallax Live

Right in Xcode’s asset editor, click and drag over the icon to simulate the 3D drift and highlight effect that happens when the Siri Remote triggers focus.

4. Design Pitfalls and Best Practices

1. Safe Zone As the front layer scales up and shifts on focus, anything too close to the edge can get clipped. Keep your logo and text at least 10–15% inside the edge of the canvas.
2. Where Text Belongs If your icon includes the app name or any wordmark, it has to live on the front layer. Put it in a middle or background layer and the parallax shift will make it look clipped or warped as the layers move relative to each other.
3. Shadows and Lighting Don’t bake in hard shadows or a fixed light source on any layer. Apple TV’s rendering engine adds real-time lighting and shadow based on the remote’s tilt angle — a hand-painted shadow will just look wrong once that kicks in.
4. Testing Tools Use Apple’s official Parallax Previewer (or the Parallax Exporter plugin for Photoshop) to import your layered files and preview them as an .lsr package, so you can dial in exactly how much each layer shifts and how deep the effect reads.