With more mobile web users than ever, it’s important to keep your branding strong. Let’s go one step further than the standard favicon and help your website stand out by creating icons for use on iOS and Android home screens.
Thumbnail icon by Mirko Santangelo on Psdtuts+
Before You Start
Before we even think about about our icons’ dimensions, there are a few important things you need to keep in mind while designing them (specifically where Apple devices are concerned).
- Keep it square. Unless instructed otherwise, iOS will automatically add rounded corners to your icons – so keep your icon perfectly square and let iOS do the hard work for you.
- Don’t add too many effects. iOS also adds a drop shadow and Apple’s iconic reflective shine to the icons – so it’s best not to try and add your own as the two would clash.
- Represent your brand. Remember that by using a custom icon you are helping to reinforce your brand, reaching as many people as possible and making it easier for people to find your site on their homepage. Keep the theme of your icon similar to your real logo, or just use your logo.
It’s also worth bearing in mind while designing your icon that it’s possible to override these default iOS behaviors. We’ll look at how this is done shortly.
Apple Device Icon Sizes
Each Apple Device has a different screen size and resolution. That means for best results, you need a separate, differently sized icon for each device. Don’t worry about Android – any sized icon is automatically scaled down.
Here’s all you need to know for each Apple device:
- iPhone and iPod Touch (Retina Display)
Icon size: 114px by 114px - iPhone and iPod Touch (None Retina Display)
Icon size: 57px by 57px - iPad (Retina Display)
Icon size: 114px by 114px - iPad (None Retina Display)
Icon size: 72px by 72px
We only have three sizes to worry about here, so only three icons are required – one at 114x114px, one at 57x57px, and another at 72x72px. iOS determines which icon to use depending on its size.
Using larger icons for higher resolution screens allows us to boost the quality within our images. Take a look at the extra attention to detail on these examples:
Adding Your Own Effects
As mentioned earlier, iOS automatically adds effects such as rounded corners, drop shadows and the classic Apple ‘reflective shine’. If you’re designing icons to take advantage of this, simply make your icon square and leave the effects to iOS. If you’d rather make your own rounded corners, be aware that it may end up looking messy and inconsistent.
In order to override these iOS defaults, use -precomposed within the rel attribute when you link to your icon. Here’s how it might appear:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="iconfilename-precomposed.png" />
Exactly the same source image, each one linked to differently. The icon on the right uses the “precomposed” keyword.
Naming Conventions
You’ll notice above that we demonstrated an icon with the -precomposed keyword at the end of its filename. This is purely as a reminder for ourselves.
Naming your images in this way isn’t required, but it is useful for remembering the circumstances for which you desgined the icon. If you’re planning to go all-out and create icons for as many device sizes as possible, then it’s wise to name them all accordingly. For example:
- apple-icon-114x114px.png
- apple-icon-57×57.png
Linking the Icons to Your Website
Adding the icons to your site is very simple – all it takes is one line of code for each icon size. Let’s assume you’ve made icons with the sizes 57x57px, 72x72px and 114x114px. It’s important to define the size of the icon correctly so that they can be used for the correct device – regardless of the fact that they all come under the rel of ‘apple-touch-icon’.
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
Don’t forget, if you want to override the default iOS display settings, you need the -precomposed keyword after “apple-touch-icon” in the rel attribute field.
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-icon-57x57-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114x114-precomposed.png" />
And that’s all there is to it! Now you have a crisp new set of icons ready to reinforce your brand on the growing mobile web market. If someone adds your site to their iOS home screen, instead of a screenshot they’ll see your icon. With many iOS users saving websites for later reading, it’s important to have a good icon so your site stands out from the rest.
A Note about Android
If you’re thinking about how this applies to Android users, don’t worry.
Android also supports the ‘apple-touch-icon-precomposed‘ link rel attribute, so there is no need to add any fallback code. The OS will scale the most appropriate icon to the correct size, so you don’t need to create any specifically sized icons for Android devices. Even if you don’t use any of the apple-touch-icon options, the Android OS will use the standard bookmark (favicon) image from your site for your homescreen icon.
Prompting Your Users
Not all mobile device users are aware that they can add webpage bookmarks to their home screen, so you may consider prompting them to do so. There are a few JavaScript snippets to help you do this, such as Matteo Spinelli’s Add to Home Screen script.
As always though, it’s worth considering the performance impact of pulling in another .js file.
Conclusion
I hope this quick tip has inspired you to have a go at creating your own icons for iOS. They may prove to be very useful for your users, and custom icons will serve your brand much better than an illegible screenshot.
Further Resources
- iOS Icon Template by Max Rudberg
- iPhone 4 icon PSD file
- Custom Icon and Image Creation Guidelines in the iOS Developer Library
- Add to Home Screen by Matteo Spinelli
- Create a Mobile App Icon in Photoshop