By default, when you bookmark an application with the “Add to Home Screen” option on an iPhone or iPod Touch, the device takes a screenshot of the current page and automagically creates an icon. This ends up looking pretty bad next to all of the fantastic looking app icons on the home screen. It pretty much looks like a white piece of paper with some text on it most of the time, boring! Thankfully it’s easier than you might think to add a custom icon to your site that an iPhone or iPod Touch will grab instead, giving your application a nice, professional look.
Basically you need two things to add the icon:
1. FTP access to the root directory of your site. If you run your own site and you have developed an interest in making a custom icon, you most likely have this.
2. A PNG file of your icon sized to 57×57 Pixels. If you would like a great starting point, just download this Photoshop template. The nice thing is, you don’t even have to worry about the nice shadows and glossy surface, because the iPhone will add them for you automatically.
Once you have created your icon, save it as “apple-touch-icon.png” and save it to the root directory of your site, that’s it! If you think that your shine is better than apple’s shine, or you want your icon to look exactly as you have created it, just save it as “apple-touch-icon-precomposed.png” and the device will add it to the home screen as-is. This should work for any self-hosted site, including WordPress, Blogger or Movable Type blogs or standard websites.
Thanks to [PhonyDev]
Leave Your Response