Many sites currently add a favicon before launch that is visible in your user’s browser tabs and bookmarks, but lots of sites are still missing icons for iOS. By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android* will see a nice app-like icon rather than an image of your page.
The first step is creating an image. To support the newest high resolution iPhone and iPad you’ll want to create several different sized images (The device will take the nearest size larger than it’s default size if you don’t have them all). You can save your images as PNGs to any directory on your site.
With the icons on older iOS versions you had to determine if you were going to use apple-touch-icon-precomposed vs letting apple apply some effects to your icon. That is no longer a concern. You’ll just need to create a square icon and it will round the edges for you.
Here is a table of the current iOS icon sizes from Apple:
|iPhone 6/7, iPhone 6/7s, iPhone SE||iPad / iPad Mini||iPad Pro||iPhone 6/7 Plus, iPhone 6/7s Plus|
For Android icons you’ll want to follow these specifications:
|Android Regular||Android Hi-Res|
Next you’ll just add a simple bit of code to the HEAD of your site so the devices can find your images (iOS will find these automatically if they are in your site’s root directory and named this way, but it’s recommended to include it). Android uses the two icons with rel=”icon” and apple uses the ones prefixed with “apple-“:
<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="http://www.yoursite.com/apple-touch-icon-167x167.png" rel="apple-touch-icon" sizes="167x167" /> <link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" /> <link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />
Make the first apple one the 120 x 120.
If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices. The older devices will load the closest size available to their required size and shrink them down (this works but isn’t ideal if you want complete control and the fastest download).
If you’re creating your iOS icon image you can find templates for use around the web; here’s a good one: iOS App Icon. Note that you’ll only need some of the icons represented in these templates unless you’re releasing an app in the App Store.
* Updated this old article from Sept 3, 2010 to reflect changes with the new iPad and Oct, 30 2013 for updates in iOS 7 icon sizes and Dec, 12 2014 to include Android changes and iPhone 6 icon sizes, Jan 12, 2017 to include latest iPad & iPhone.