KYLEJLARSON

How to Add Icons for iPhone, iPad & Android to Your Website

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 with iOS 7. You’ll just need to create a square icon and it will round the edges for you.

ios 7 icons

Here is a table of the current iOS icon sizes from Apple (this has been updated for iOS 7 icon sizes):

classic iPhone / iPod iPad iPhone / iPod Retina iPad Retina iPhone 6 Plus
57×57 76×76 120×120 152×152 180×180

For Android icons you’ll want to follow these specifications:

Android Regular Android Hi-Res
128×128 192×192

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-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<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-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" />

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 couple good ones: appicontemplate for ios7 and iOS7 icon template for photoshop & sketch that cover all the sizes. Note that you’ll only need some of the icons represented in these templates unless you’re releasing an app in the App Store.

ios icon homescreen

* 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.

Tags: , ,

« Older     Newer »
More Posts