Any visitor using an iDevice can bookmark your website onto their desktop. However, this distorts, shrinks and colorizes your site to produce something ugly and undistinguished. What you want is to supply your own icon.
The icon for an iPad is 72×72 pixels and 57×57 pixels for iPhone and iPod touch. You do not need separate icons. Indeed you cannot specify them separately. The icons will be re-sized. Let’s say you start with an 800×800 original. You could resize this to 72×72 to optimize for iPad and post this on your web site. The 72×72 will be resized on iPhone.
Instead, what I do is resize to 144×144. For iPad, a second resizing is done to 72×72 within the iPad and a second resize to 57×57 on the iPhone. This improves the icon on the iPhone since the resize is based on a better image but slightly degrades the iPad since a second sizing is introduced. Whatever. I want you to be aware that you have a choice in what size image to post.
Let’s say the image you post is called iicon.png. The name is pretty arbitrary and I am guessing that the format is not confined to PNG but I have not verified that. If your image is in your web site root path, then you would add the following to your web site head section:
Of course you give the complete path (or absolute URL) and change the name to reflect what you actually call it. Note that it is not necessary or possible to specify the dimensions of iicon.png. The browser will figure that out.
The icon will appear with rounded corners and a lighting effect applied:
I do not recommend that your try to duplicate the beveling and lighting effect. Rather, upload a flat image with no transparency:
and the effects will be applied automatically (and consistently!) in the iDevice. This flat image is much simpler to develop than trying replicate what is already there.