When creating a website, it is more common then not now that we will add a custom favicon that will display in the browser tab alongside the website page title, this is fairly simple in fact only one line of code as below:

[php]
<link rel="icon" href="/favicon.png" type="image/vnd.microsoft.icon" />
[/php]

What is becoming just as popular is to add a custom iPhone icon that will appear on your iPhone’s Home Screen. Again this is very straight forward with one line of code in between your header tags, as shown below:

[php]
<link rel="apple-touch-icon" href="/iphone_icon.png"/>
[/php]

If you use an image of anything around 50px by 50px in size that will be, as the iPhone will resize and round off the corners for you on the fly. To add your site to your Home Screen, simply visit the webpage on your iPhone, then select the plus sign, followed by Add to Home Screen. You will get a prompt now and your icon should show, to finish, simply click add.

You will now be taken to your Home Screen where the icon should now be appearing. Here is the example below for Design Woop:

Now if your a picky sod like me, you will notice the horrible gloss effect that Apple adds to the icon by default. Until today I was using jQTouch to remove this until I came across this page on Apple.com which brought my attention to the additional -precomposed option. This stops mobile Safari adding any effects to the icon which is just what I was after! The line of code we use for this is now:

[php]
<link rel="apple-touch-icon-precomposed" href="/iphone_icon.png"/>
[/php]

After refreshing the page and re-saving it to my iPhone Home Screen I was left with the much nicer…

I hope you agree with me but I think the no gloss icons are nicer!