This post was previously published on April 10, 2009, but is still applicable today.
Tried bookmarking a Web site on the iPhone or iPod touch and you get a small screenshot you can’t read instead of a polished icon? Maybe your web site is one of these that doesn’t have an icon. Making one of these is simple and easy and you can have yours up and going in less than 30 minutes (design time included).
The process is actually very simple.
First, you need to make a small, square logo in Photoshop or some other image editing program. Different people will tell you it needs to be 45×45 pixels big, some will say 57×57 pixels, others will even tell you to go 158×158 pixels. While making a logo with any of those dimensions will work, I’ve had the best luck with the 158×158 pixel version. It downsizes the image and actually seems to keep it a bit sharper.
Second, I took the image in Photoshop and clicked on “Save for Web and Devices.” I saved it in the png format and named it apple-touch-icon.png (you MUST save it as that or else this won’t work).
Finally, using an FTP client I took that saved file (apple-touch-icon.png) and put it into the root folder of my Web site. This will be the same folder where your main index page is (that page will probably be named index.html or index.php)
I then went to the the site on the iPhone, clicked on the “+” at the bottom of the web browser and then touched the “Add to Home Screen” button.
While this is by no means anything anyone needs to do to have a great Web site, it’s a nice added touch that can help you stand out from the pack. You may not even have an iPhone or iPod Touch to view it on. Your readers may though. More than anything though, creating most things on the web take hours, days or even months to complete. This can give you a sense of accomplishment in a few short minutes.