Site Elements

Quick Tip: Give Your Website an iOS Home Screen Icon


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.

*Awesome waffle icon by Eddie Lobanovskiy

Get your logo here!

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: 144px by 144px
  • iPad (None Retina Display)
    Icon size: 72px by 72px

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:

retina iOS icons

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" />
Comparison between standard effects and Precompsed (no effects)
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-57x57.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" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.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" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-icon-144x144-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.

add to home screen

As always though, it's worth considering the performance impact of pulling in another .js file.


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

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    PhoneGap: Build a Feed Reader - ConfigurationAudero reader preview2@2x
    This is the third and final part of the series about Audero Feed Reader. In this article, you'll learn how to create the configuration file and complete the project we started in a prior lesson.Read More…
  • Code
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…