Something is rotten in the state of iOS icons. More and more, I’ve been noticing app icons with good ideas behind them, pretty solid execution for the most part, and one hair-raising screwup practically designed to get the goats of oversensitive designers such as myself. These are some apps I just picked from the Featured tab on the iPad App Store:
Notice a pattern? Enhance!
The border radius of the icon’s background shape is larger than the border radius of the iOS icon mask. Hence, phantom white pixels.
Because this is present in dozens and dozens of icons I’ve seen in the store - go ahead, just browse around; it’s easier to see on dark icons - my diagnosis is that a flawed iOS icon template is to blame. Which one? I don’t really know.
But it’s not so simple: see, when you install these apps, the icons look fine - or rather, finer. There’s still a slight white halo in some of them. What’s probably going on is that the mask used by the App Store doesn’t match that used by the home screen. Yo, Apple - bug report!
Now, what’s an icon designer to do? If you use a template, by all means, continue doing so. But I would recommend NOT saving your icon with ANY transparency whatsoever. Don’t try to match the iOS mask; fill the whole square. Here’s what I mean:
You’ll notice that the recommended rendering on the left includes an inner shadow along the top, and this matches the iOS-mask corners. That’s totally cool; even if your shadow-shape doesn't exactly copy Apple’s mask, the difference will be negligible. Not so when it comes to the whole background! In the original examples I showed, negligible is not the word I’d use.
It’s also good to keep this simple piece of advice in mind: Look at the actual app icon on the actual device. A lot. No amount of mocking up in Photoshop is good enough; the designer should absolutely check the real binary with the final icon on an iPad and confirm that everything is copacetic. A quick way for the designer to approximate that without bugging the developer for the binary every five minutes: set the icon as an apple-touch-icon on a webpage, then add it to the home screen. Presto View-o. Many of these apps have had the same goofed-up icon for several versions; whether it’s partly Apple’s fault or not, it can and should be fixed.
While I’m on my iOSoapbox: what’s the deal with this (also common) thing:
I understand that iOS icon-label limits are frustrating, but please, please, pick a name that fits! This truncated nonsense looks super unprofessional. Get creative! Wolfenstein 3D, for instance, gives a shout-out to the 8.3 days and labels its icon wolf3d. Again, look at the icon on the device: is it clean-shaven and neatly dressed? Did it wash its hair? It’s going to be speaking in front of millions of users, so make sure it looks its best.