The Ongoing Confusion with iOS App Icons

Whenever Apple introduces an iOS device with a new user interface idiom or screen resolution, developers have to include additional app icons to match the expected dimensions and filenames. For example, before the iPhone 4 or the iPad, there were only a few app icons:

- Icon.png
- Icon-Small.png
- ItunesArtwork

Three icons: one for the home screen, one for Settings.app (and, later, search results), and one for the iTunes App Store. When the iPhone 4 and the iPad were added, the list got longer:

- Icon.png
- Icon-Small.png
- ItunesArtwork
- Icon@2x.png
- Icon-Small@2x.png
- ItunesArtwork@2x
- Icon-72.png
- Icon-Small-50.png

With the introduction of the 3rd generation iPad this year, the list is even longer:

- Icon.png
- Icon-Small.png
- ItunesArtwork
- Icon@2x.png
- Icon-Small@2x.png
- ItunesArtwork@2x
- Icon-72.png
- Icon-Small-50.png
- Icon-72@2x.png
- Icon-Small-50@2x.png

Along the way, much confusion has been created around iOS app icons. Questions that continually plague developers:

  1. Naming: What should each image be called? For apps that must support iOS 3.1.3 or earlier, icon files must adopt the fixed naming scheme listed above. Apple added the soundalike CFBundleIconFiles and CFBundleIcons keys in iOS 3.2 and 5.0 respectively. You use these keys when setting up the “Icon Files” array in the Info.plist for an app. When using the CFBundleIcons key, filenames can be anything you wish, as long as the retina-resolution files have the same root filenames (plus the @2x suffix) as their non-retina counterparts — unless, that is, you include the file extensions in the Info.plist. If you’re easily confused by all these changes and exceptions, you are not alone.

  2. Info.plist Arrays: The Info.plist allows you to add an array of “Icon Files” in which you list the filenames for the included app icons in your app bundle. Apple has a technical document explaining how to set up this array here, but this document hasn’t been updated since July 2011. Since then iOS 5 has been released (along with the CFBundleIcons key), the retina iPad has been on the market for months, and we’re 2 weeks away from the iOS 6 announcement. This technical document has not been updated with instructions for how to deal with the new icons and plist key. Adding to the confusion, Xcode may sometimes add a duplicate Icon Files array called “Icon files (iOS 5)”, as per this StackOverflow question. It’s still not clear whether this duplicate array is an intentional effect and should be preserved for forwards compatibility, or whether it’s a bug in Xcode.

  3. Bundle Location: Apple’s technical documents state that app icons and ItunesArtwork files should be kept at the top level of the bundle directory, but neither Xcode nor iTunesConnect triggers an error if the files are buried in some other sub-directory. I only just discovered this requirement tonight. This may explain why Pillboxie’s iTunes Artwork on the retina iPad App Store is still showing the non-retina 512x512 version, even though I’ve included the 1024x1024 version.

  4. Poor Documentation: Developers have to consult way too many Apple documents just to answer the basic questions about app icons. When a blogger offers more helpful documentation than Apple, you know there’s a problem.

  5. Unexplained App Rejections: A few developers, myself included, have had apps that were built, archived, and submitted to iTunesConnect without any hiccups, only to receive a cryptic email ten or fifteen minutes after submission that states that an app icon file appears to be corrupt. Solutions I’ve found range from disabling PNG compression in the build settings, or making sure that no app icons (or launch images) were exported from Photoshop with Interlacing enabled. See this StackOverflow post for more information.

  6. UPDATED: Inconsistent Border Radii: I forgot to mention the problems that Neven Mrgan has explained better than I ever could about the way iOS, iTunes, and Safari apply app icon border radii. Even if you or your designer submits all app icons without alpha-transparent corners (which Mrgan recommends), it is still very difficult to get edge highlights and shadows to appear exactly the way you wish. The worst offender is iTunes Connect’s app info page. Thankfully, it isn’t customer-facing, but it’s a dramatic illustration of the problem:

itunesConnect

WWDC is coming soon, so hopefully some of this confusion will be addressed this time around. Or maybe things will continue to get worse.

|  2 Jun 2012