How to add an iPhone icon to your website

Adding an icon to your iPhone for your website, mobile website design

In this post we will look at adding an icon to your website for use on the iPhone / iPad, these icons will be shown when users add a link to your website to their devices home page and makes the short cut look more like an app which means it fits in nicely with the rest of the apps the user has on the device.

The first thing you will need to do is create the icon, this needs to be 57px by 57px and 72dpi make sure you save the image as a png the image below is the iPhone icon for this website, feel free to save it and design your icon over the top of it:

One thing to note is the icon will have its shine and rounded corners added automatically by the iPhone so you dont need to add these when creating the icon.

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later). Apple

next you need to upload the icon to your website and insert the following code into the head of the site

[code type=html][/code]

The link can be relative if required,

and thats it you now have an icon that will be added to the home page of iOS devices

if you need help with adding the code or creating the icons for your website please feel free to get in touch

[rss]