2013-06-18

iOS App Icons, Listed and Summarized

Apple makes it surprisingly difficult to determine exactly what image files are needed as app icons for an iOS app. They break the necessary documentation across two different documents, bury important details in prose, and fail to provide a simple checklist of needed files.

Below is an excerpt I wrote in a chapter from the spec of my current iOS app project. I dragged myself through multiple readings of Apple's doc plus some googling to delineate the icon files. Hopefully this will save you and your team much confusion and time.

My chapter presented here is aimed at the graphics artists and managers who are responsible for producing the image files. So the programmer must still attend to the documentation for the programming details necessary to complete the work. But hopefully this checklist of files will help the whole team.

The file names listed here were required in early versions of iOS 3. In later versions of iOS 3 and beyond, you may devise your own names as the programmer must specify the files by name. But why not use the same names anyway? Having consistent names across projects must surely be convenient and clear.

App Icons

Need for Icons
Apple requires us to supply images to represent our app as an icon. The icon is used for three purposes:
  • Display on handheld devices
  • Display on tablet devices
  • Display in the App Store (on devices, or web browser, or iTunes app).
For each purpose, pairs of images are needed: one for conventional screens, and a second at double resolution for Retina screens. The second image always has a file name matching the first, but with the three characters @2x inserted before the file extension.

Format
All the icon files must be in PNG format (Portable Network Graphics). Do not use interlacing. Use a solid background, not translucent or transparent (no alpha transparency). Use 24-bit color (8 bits each for red, green, and blue).

Design
All icon images are square. 

The graphics artist may choose to vary the design across the dramatic range of sizes going from 29 pixels square to 1024 pixels square. All the images should carry the same theme, the same color palette and message. But the larger sized images can make use of the additional pixels by adding more detail.

The graphics artist should be aware that Apple reserves the right to make two alterations to the image:
  • In nearly all usages, Apple crops the display with rounded corners. The radius of the rounding may vary. Therefore, the artist should use all the pixels in the corners, filling them with at least the background color. The design should still be sensible and legible whether rounded or not.
  • A glossy shine effect may be applied over the icon, as if a light is shining down on a slightly puffy icon. The shine slightly alters the tone of the colors of about half the icon. While we can request that Apple not apply the shine, keeping the shine is most common in iOS versions prior to iOS 7. In the future iOS 7, the shine feature may be removed. So the design should be sensible and legible with or without the shine effect applied.
More Info
App Icons on iPad and iPhone, Techincal Q&A QA1686, by Apple
App Icons, iOS App Programming Guide, by Apple
Custom Icon and Image Creation Guidelines, iOS Human Interface Guidelines, by Apple

Files
The graphic artist provides many files, with names as listed in these tables. The files are organized in folders, one folder for each table here, named the same.

On handheld devices, the same icon is used for both the Settings view and the Spotlight search results view. On tablets, we can specify different icons for each purpose, if so desired. Also, on tablets the Spotlight view trims a pixel (two on Retina) from each side to make room for a drop shadow (see * in tables).

The two iTunesArtwork files are actually submitted without any extension on the name, no '.png'. Strange but true. To avoid the confusion of having files without file name extensions, I do not bother the team with the peculiarity of Apple. I remove the file name extension at time of submission to Apple.

Handheld

Resolution
File Name
Purpose
29 x 29
Icon-Small.png
Settings & Spotlight views
(conventional screen)
58 x 58
Icon-Small@2x.png
Settings & Spotlight views
(Retina screen)
57 x 57
Icon.png
Device Home view
(conventional screen)
114 x 114
Icon@2x.png
Device Home view
(Retina screen)

Tablet

Resolution
File Name
Purpose
29 x 29
Icon-Small-29.png
Settings view
(conventional screen)
58 x 58
Icon-Small-29@2x.png
Settings view
(Retina screen)
50 x 50
(48 x 48*)
Icon-Small-50.png
Spotlight view
(conventional screen)
100 x 100
(96 x 96*)
Icon-Small-50@2x.png
Spotlight view
(Retina screen)
72 x 72
Icon-72.png
Device Home view
(conventional screen)
144 x 144
Icon-72@2x.png
Device Home view
(Retina screen)

AppStore

Resolution
File Name
Purpose
512 x 512
iTunesArtwork.png
iTunes app or web site
(conventional screen)
1024 x 1024
iTunesArtwork@2x.png
iTunes app or web site
(Retina screen)

No comments:

Post a Comment