For starters, in case you haven’t been doing it already, you can bookmark a website on your iPhone’s homescreen.  It will appear the same as an app, but will serve as a link you to the site in Safari.

www-new.insivia.com

www-new.insivia.com

Insivia icon on an iPhone home screen.

Insivia icon on an iPhone home screen.

So, how do you do this for your own website?

1. Create an 45px x 45px image of your logo or name in Photoshop or another design program and save it as a .png.

Insivia icon png

Insivia icon as a png

2. Add this code into your <head>, same as you would for your favicon.

<link rel=”apple-touch-icon” href=”http://www.yourdomain.com/iphone-icon.png” />

You do not have to worry about rounding the corners or creating the gloss effect.  The iPhone does this for you.  The user will be in control of what text appears below on their screen, but this icon will now appear on their home screen as a nice dynamic image.

icon as it appears on iPhone

icon as it appears on iPhone

And there you go. This gives you a nice clear presence on your website viewers’ iPhones.