Adding an Icon for iPhone, iPad & Android to Your Website

April 19th, 2012 by Kyle Larson

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.

Here is a table of the current iOS icon sizes from Apple:

iPhone	iPhone Hi-Res	iPad	iPad Hi-Res
57×57	114×114	72×72	144×144

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="apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" />
		<link href="apple-touch-icon-72x72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
		<link href="apple-touch-icon-114x114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
		<link href="apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If you’d like Apple devices to add rounded corners, a drop shadow, and reflection to your icon automatically you can remove the precomposed portion:

		<link href="apple-touch-icon.png" rel="apple-touch-icon" />

If you’re creating your iOS icon image you can find templates for use around the web; here’s a good template from Louie Mantia that covers all the sizes.

* Note on Android Devices: versions 1.5 & 1.6 work with the “-precomposed” images only and 2.1 & new will read the tag without “-precomposed”.

** Updated this old article from Sept 3, 2010 to reflect changes with the new iPad