Apple Touch (iPod Touch / iPhone / iPad) icon

PCs and Apple Macs display 'favicons' when you visit websites - the iPhone, iPad and iPod Touch equivalent is a graphic in your web site's root directory that must be named:  apple-touch-icon.png

All you need to do is create a square logo in png format using your favourite graphics editor (I like Macromedia Fireworks) and FTP it to your web site's root directory.

It couldn't be simpler - no ico formats to create like you have to with favicons.

Here's my simple icon, I created it 100 x 100 pixels. Leave a small border as Apple's software automatically rounds the corners - so you don't want your image to get cropped.

http://www.hmmm.ip3.co.uk/apple-touch-icon.png

Along with rounding the corners Apple also automatically resizes the icon and adds a 'glass type' effect to match the other iPod icons. See my website's Apple icon on the right when it's displayed on an iPod Touch.

Oct 2013 - iOS 7 update (image taken from iPhone 5)
With Apple's iOS 7 the 'webclip' icon changes look losing the glass effect. Here's the same icon shown for comparison.

You may see entries in your website visitors log for: apple-touch-icon.png or  apple-touch-icon-precomposed.png
this is when mobile users add your site to their Apple devices and the browser looks for the graphic.

The 'precomposed.png' version doesn't get formatted by the Apple software with the glass effect - so use this if you want to maintain your exact look.

Website icon/logo on an iPod Touch
apple-touch-icon.png
 

*TIP* This also works for Android phones!
Add a bookmark to the website you want using your phone's browser. Go to the home screen and long-press then choose 'shortcut' and 'bookmark' and choose the website you want added to the home screen. Android phones also look for and use the 'apple icon' format.
 

As I'm using a Freeola sub-domain I've included this tag in my HTML to ensure the icon is found:
<link rel="apple-touch-icon" href="http://www.hmmm.ip3.co.uk/apple-touch-icon.png"/>

For completeness I've included the notes from Apple's website below with a copy of their: apple-touch-icon.png

Official Apple instructions:

Specifying a Webpage Icon for Web Clip

iPhone OS Note: The Web Clip feature is available in iPhone OS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iPhone OS 2.0 and later.

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone OS.
 

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone OS won’t add any effects to the icon.

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

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

In the above example, replace custom_icon.png with your icon filename.

site map