Since I finally upgraded my old razor and bought an iPhone that I’ve been eying for some time, Ill show you a few tips for creating a webclip icon for your homescreen of your wonderful blog!

First off, if you look at this photo, you can see what your lovely iphone/ipod touch will look like with your newly created webclip icons! I’ve created one for this site (adamfinley.com), as well as wonderday.ca and one for Chantelle - Sixthandelm.com. It’s essentially just a shortcut or bookmark on your screen, but a heck of a lot better looking than just a bookmark from within safari!

To make your very own icon simply do the following:
- Create a 57×57 PNG.
- Name it “apple-touch-icon.png”
- Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

If you want more flexibility - perhaps you don’t have access to the site root, perhaps you want to use a different file name or format - you can use a link tag in the < head /> of the document, such as:

< link rel="apple-touch-icon" href="http://mysite.com/fotos/puppies/whatever.jpg" />

All you have is the tag within the tag of your header on your site. That’s it! I’ve also been reading that you can use a 75 x 75 image as well, but I haven’t tested this yet. To add a shortcut/webclip of a site simply fire up safari on your iphone/ipod touch and then navigate to your site of choice and then hit the ‘+’ icon on the bottom bar. If you just uploaded your icon it may take a few seconds for your phone to recognize it and will replace whatever image is thought it should use. Then simply hit ok and then add to homescreen.

Apple is kind enough to round the corners and add the nice glossy effect to your image, so you don’t have to worry about that when designing! Just keep it an even square!

Bonus!
And for a bonus - Friday before the long weekend - tip to get a screen grab of your iPhone (like shown above) simply hold down the home button and then click the lock button on the top of your phone once, and it will flash white and send the image to your camera roll in your phone.. where you can sync it up with your computer or simply email the pic to yourself.

Filed under: Apple, Equipment on August 1st, 2008