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

Friday, September 3rd, 2010

Many sites currently add a favicon before launch that is visible in your user’s browser tabs and bookmarks, but many 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 you’ll want to create the image at 114 x 114 pixels or larger (the device will resize the image to the correct dimensions). You can save your image as a PNG (if you plan to use transparency) or a JPG and place it in any directory on your site.

Next you’ll just add a simple bit of code to the HEAD of your site so the devices can find your image:

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

By default Apple devices will add rounded corners, a drop shadow, and reflection to your icon. If you don’t want those styles added or you’d prefer to add your own styles to the image file (like I did for my icon) you can use apple-touch-icon-precomposed instead.

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

If you’re creating a precomposed image you can find templates for use around the web; here’s a good template from cocoia with Photoshop effects you can turn on/off.

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

Posted in HTML, mobile | 2 Comments »