Don't look now, but your app actually has multiple versions of its app icon, a Goldilocks ensemble of big, medium, and small. The version your audience sees most is the medium size, the Home-screen icon that they tap to launch the app, but the other two sizes have important roles that deserve attention and, often, their own custom treatment. The App Store uses the large icon as the basis for the big icon you see in an app's detail screen (it gets scaled down), and the small icon appears in the iPhone's spotlight search results and settings screen. To muddy waters a bit more, the iPad uses different sizes for its small and medium icon; if you're creating a single universal app that contains the code to run your app in both iPhone and iPad (and you should), you'll need to add those two additional icon sizes, too. Here's the rundown:
Table 7-1. App Icon Pixel Sizes
Small icon for iPhone | 29 × 29 |
Small icon for iPad | 48 × 48 |
Medium icon for iPhone | 57 × 57 |
Medium icon for iPad | 72 × 72 |
Large icon | 512 × 512 |
That's a big variation in icon size—the large icon is nearly 20 times bigger than the iPhone's small icon—which means that the three sizes accommodate very different levels of detail. When designing the icon graphic, start with the large version and take advantage of its big canvas to fill your icon with rich detail and lighting effects. Your goal with this version is to create an effective, eye-catching billboard for your app in the App Store. When iTunes puts your creation on display, though, it won't appear full-size, so before you call it quits, check to make sure that this large icon looks good when scaled down to about 175 × 175.
Build the medium icon next, using the large version as the foundation and stripping out details that turn muddy in the downsize. As always, focus on the main silhouette. This is your app's Home-screen icon, so the primary shape should be crisp and easily recognizable so that people can spot it quickly at a glance. The same goes for the small icon, only more so. There's no room in a 29-pixel square for much detail work; reducing the large icon as-is all the way down to this size will give you little more than a blot of murky color. Depending on your design, you may need to start from scratch to optimize this small version so that the silhouette still remains clear.
The result of all this work is often three subtly varied icon designs, but don't take this as license to create wildly different designs. App Store reviewers sometimes reject apps whose icons mismatch so that they're "confusing to users." To casual observers, the three sizes should all look like identical designs, even though details may vary. Apple does tolerate "Sale" badges and other marketing messages on the large icon for the App Store—the equivalent of hanging a sign in your shop window. (Careful, though—these icon sales gimmicks tend to look cheesy and of course obscure your gorgeous design. Nobody ever said commerce and taste always go hand in hand, but it doesn't mean you can't try; be thoughtful when you pin a badge on your icon.)
Figure 7-11. The large, medium, and small icons for Articles, a Wikipedia reader, were each designed from scratch to look their best in their respective sizes.
App icons always show up with rounded edges, but that effect gets applied automatically by the App Store and iPhone behind the scenes. Don't chisel off your icon's corners on your own. Instead, submit a simple square graphic—no rounded corners—for your icon images. (Pro tip: the graphic should be a 24-bit PNG image with no transparency; any transparent pixels will be replaced with black, which looks crummy for people with custom wallpaper on their Home screen.)
As for the automatic gloss that gets applied to images, don't let it happen. It's a well-intentioned effort on Apple's part to create a gemlike consistency across all icons. While you should honor that consistency in spirit, don't let an automatic filter apply a lighting effect that you can create yourself with more care and consideration (see examples in What's In a Name?). Even Apple passes on the standard gloss for several of its own built-in apps. Instead, add your own lighting effects, glossy or not, to give your icon a luminous glow appropriate to your design. Don't cede control over one of your app's most essential elements. (Nitty-gritty developer note: you can turn off the automatic shine effect by adding the UIPrerenderedIcon key to your app's Info.plist file. For more details, see Apple's iPhone Application Programming Guide, available at http://developer.apple.com/iphone.)
