✎ iOS Icon Template

I made this template out of necessity and quickly realized it would be useful for the community. It has the following features:

• See each icon size accurately in its context and make sure it looks its best.

• The icon-small sizes are a bit tricky since they actually crop out part of the icon. If you want a perfect matching inner rounded rectangle, this template will help you.

• Rounded corner radius noted for each icon size. 

• Made for Slicy, just drop the PSD on Slicy and get PNG assets ready for Xcode.

• Optimized for viewing on a Retina screen, i.e. future proof.

Download here

✎ Facebook tweaks the Messenger icon, introduces Pages app

Facebook Messenger got updated with a revised icon, with some subtle gradients inline with the Camera app. And they are now also offering Facebook Pages on iOS for managing your Facebook page.

I hope to see the Facebook app icon updated in the same manner. It sticks out like a sore thumb.

The Importance of a Well-Designed iPhone App Icon

The first thing that will catch your attention when looking at the iPhone is the candy-colored, push-friendly icons that inhabit the home screen. 

The rounded squares that frame the icons makes them look like buttons. The shape is characteristic enough to be printed on the hardware home-button as a representative of the home screen. And with a curved gloss put on top, the impression is a device that looks so good you want to lick it. Or at least pick it up.

Ruining a perfect picture

Ever since the introduction of the iPhone 3G and the 2.0 firmware, users of the iPhone have been able to download third party apps from Apple’s App Store. Consequently, the balanced design present in the stock icons and depicted on every box that the iPhone ships in is quickly shattered once you’ve downloaded a handful of third party apps. Many third party icons fail to reach the same quality.

Stand out in the crowd

Aesthetics might not be the main concern if you are the developer of an app. But I think users are picky with which icons they let inhabit their home screen. Collecting apps and their icons on the home screen is almost like having a physical item, a small gem. If it doesn’t look the part, it might get stuffed a way on a different page or in a folder.

And with the large number of apps on the App Store, it’s becoming increasingly harder to get people to notice you. 

When browsing the App Store, all you really have to guide you is the name of the app and the icon. Based on those two pieces of information you have to decide if the app seems interesting enough to read more about and possibly download.

With so little information to go on, the importance of a well-executed icon becomes apparent. The icon must not only represent the core functionality of your app and communicate your brand, it must also do so in such a visually appealing way that makes it stand out and get the quick scrolling through long lists of apps to come to a grinding halt.

Gloss for everyone

Apple provided an easy way for anyone to become a master of the lickable gloss. You can simply add a squared image to your app and it will automatically be masked in the correct shape and have a pre-made gloss put on top. 

This might sound like an easy way to a good-looking icon. But if your image is pulled off a website or perhaps a photograph, all the gloss in the world is not gonna make it a good icon. It’s like putting lipstick on a pig.

Thinking inside the box

I believe that a successful icon needs to be made from scratch. And instead of seeing the rounded square shape as a limitation, it should be seen as a possibility to be creative. The shape can for example be used to deform regular objects to fit inside. Take a look at the Youtube, Calendar and Notes icons – these are clever examples of how an object can fit into this shape.

And remember that an iPhone icon doesn’t have to have to have gloss either, almost a third of the stock icons does not have it.

A dedicated community

Did you know there is an entire community based around the customization of the home screen icons on the iPhone?

The MacThemes forum is probably the biggest outpost for such icon sets or themes.

The majority still uses the exact same rounded square shape and many are very similar to the design of the original icons. In fact, some of the most popular icon sets are just refined stock and third party icons. 

So if you don’t supply a good icon with your app, chances are someone else will. If they notice you in the first place.