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):

iPhone / iPod iPhone / iPod Retina iPad iPad Retina
60×60 120×120 76×76 152×152

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, but it’s recommended to include it):

<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" />

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 again Oct, 30 2013 for updates in iOS 7 icon sizes

Tags: , ,

« Older     Newer »
More Posts