Creating an iPhone icon for your website bookmark

Creating an iPhone icon for your website bookmark


In this tutorial I will show you how to get a nifty icon for your website which will appear on users iphone/ipod touch dashboard.

The iPhone and iPod Touch have a nice feature where users can bookmark websites and have them appear on their dashboard. I was recently looking for a way to have a custom icon for the website (separate from your websites favicon).

The first thing you need to do is create a small 57x57 icon for your website, this is the standard size for iPhone icons, you do not need to put anything fancy on it to get the rounded edges or nice glossy effect; these are added later by the iPhone.

For my website HowHealthyIsMyDrink.com I had my friend create the following icon:
http://www.howhealthyismydrink.com/apple-touch-icon.png

As you can see, this image is just a standard icon. No rounded edges, no glassy effect, yet on the iPhone, it looks like this:
http://www.tutorialhelpcentre.com/images/blogimages/iphoneicon1.jpg

This is very simple to do, simply name your icon 'apple-touch-icon.png' and drop it in your root directory.

Browse to your website on your iPhone and press the '+' button:
http://www.tutorialhelpcentre.com/images/blogimages/iphoneicon2.jpg

Now press 'Add to Home Screen' and you will see your icon there all nice and lovely!!
http://www.tutorialhelpcentre.com/images/blogimages/iphoneicon3.jpg



Submit Comment

Comments

Unfortunately no comments have been left on this tutorial. Be the first using the form above.