With the most recent update of the iPhone to version 1.1.3 came the ability to customize your icons for your home screen. You are now able to add bookmarks or weblinks to the homescreen as well as add multiple pages of content. The only thing that sucked about adding your favorite sites to your home screen (namely my blog, Bank of America, and Assault T-Shirts) was that the icon was a crappy looking screenshot of the current screen. Thanks to some reading on the iPhone dev site and on a few others sites, I figured out how to get the smoothest custom rounded glowing icon in just a few easy steps…
In Photoshop, or any other photo editor create your image and give it a resolution of 158×158. (58×58 also works) You don’t have to do the rounded corners, the glow, or the little glare on top of the icon, the phone will do all of that for you, just make sure your image is 158×158 to give it the best resolution on the phone. Save it for the web as a .png (apple+option+shift+s) Give it the filename “apple-touch-icon” so that the filename reads apple-touch-icon.png.
Upload the file to the root of your webserver using your favorite FTP program and you’re done! No editing your HTML no adding another line of code to your <HEAD> tags. If you goto your site on your phone and click the “Add to Home Screen” button your custom icon will magically appear instead of the crappy scaled screenshot! Below is the image that I’m using to turn into my custom Home Screen Icon, not the one on the upper right.
