How to set up App Icons for tvOS Apps in Xcode

Question

Just got the new Apple TV and I am trying to setup App Icons for a new app. It is asking for Front, Middle and Back images for both "App Icon - Large" and for "App Icon Small". I have tried putting a 512x512 image in for Middle and get the following error:

The last image stack layer with content, "Middle", must exactly fill the image stack. Its current frame is {{384, 128}, {512, 512}} while the image stack's size is {1280, 768}.

Does a 1280x768 image need to be used? More importantly, what exactly is needed in terms of image assets for tvOS Apps?

Doolie

You need at a minimum 2 images layered like this tutorial on youtube youtube.com/watch?v=l1B1Ukp3RMg. One will go on "front" and the other will go in "back". Middle is optional – Alyworth

For 2022: https://mcmap.net/q/1773938/-strange-problem-with-appletv-icon-icon-shrinks-when-selected-on-4k-models – Tanberg

Answer 1

You need at least 2 images for both the App Icon - Large & App Icon - Small (So total of 4 images - I used at first just the front & back, then I used all three layers for a total of 6 images)

The large icon is 1280x768, and the small one is 400 x 240

Apple's document:

https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/

Doesn't seems to specify that you only need one image for the 1280x768. But I wasn't able to submit my App with just one image. I rendered my icons in the full 1280x768 size and then scaled to 400 x 240.

In addition, you need to add the Top Shelf image which is 1920 x 720.

(Top Shelf Wide seems to be 2320 x 720.)

Phaih

So how do we use an LSR file that has the layers baked in? – Publicness

This is weird. According to the tvOS human interface guidelines, there is no focus zone and no safe zone. Also when you download the templates you will see that the large app icon template only has one layer. The template for the small app icon has several layers and a safe zone. So in theory 1 image should suffice. However, if you create a new tvOS project in Xcode, the default .xcassets file shows 3 layers for the large app icon. Not consistent at all. :-( – Privatdocent

@Eliran.. can you please let me know the name you have used for the icons? – Vulcanize

@Phaih what are the front, back, middle images? Did you make them all the same or did you you three different images that seems like they are layered on top of each other? – Alyworth

I used 3 different images . You can check the effect using Apple's parallax previewer or directly in Xcode – Phaih

And in addition to all of this, in Xcode 8+ you must also add "Top Shelf Image Wide" - 2320px by 720px - developer.apple.com/tvos/human-interface-guidelines/… – Dupery

What is the requirement of Top Shelf Image Wide? – Cloraclorinda

This answer seems a bit outdated. Dropping an LSR file in there just does not work out of the box. – Tedford

Is front/middle/back layers required? Is using any other layer structure bad, like 5 layers with other names? – Tedford

As of 2022, LSR files simply do not work, and that's it. You just have to drop in the three separate files. – Tanberg

@SamB for anyone coming to this older question. The simplest way to handle the parallax images: make the "back" one nothing more than a plain black image (ie entirely black). make the "front" one your logo centered on a clear background (leave a LARGE margin around the logo). Do not bother with the middle one. (Two is fine.) – Tanberg

Answer 2

https://developer.apple.com/forums/thread/20689

Yes, you have add mismatched icons, that's why getting the error

Once you check all the sizes is correct

Ferdinana

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Retrospect