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.
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)
You may see entries in your website visitors log for:
apple-touch-icon.png or apple-touch-icon-precomposed.png
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
*TIP* This also works for
As I'm using a Freeola sub-domain I've included this
tag in my
HTML to ensure the icon is found:
For completeness I've included the notes from Apple's website below with a copy of their: apple-touch-icon.png
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: