iPhone-Touch Webclip Icons (4)
Posted January 17th, 2008 in WebTags: iphone
With the latest software update for the iPhone and iPod touch, users can now save webclips to their springboard(desktop). These act as a shortcut to a website. Now, the iphone/touch will remember exactly the crop and zoom that you saved and will create an icon automatically but the icon is not always the most desired visual representation of the site. For example, if I want a webclip of CNN’s latest news, it will show a screenshot of the news, not a CNN icon. And if I zoom into the icon just for the logo and then save the webclip, when i click on the webclip it will take me to the zoom in of the icon and not the news. Fortunately, the iPhone/Touch can use a predetermined icon provided by the website. Here’s how to create a custom webclip icon for the the iPhone/iPod Touch.
Save your 57×57px icon as a PNG, name it “apple-touch-icon.png” and upload to the root folder of your site files(where you index file is). The iPhone/Touch will automatically look for it here. It will also automatically round the edges and make give it that gloss look so you don’t need to worry about that.
If you want to name it differently, or place the file somewhere else, you need to specify it in the html file as a header item like this:
<head>
<link rel="apple-touch-icon" href="/pathto/mywebclipicon.jpg"/>
</head>
ps. thanks to abraham for letting me borrow his camera at work
p.s. Drew McLellan at All In The Head has posted a bookmarklet that dynamically adds the icon code to any page. This makes it possible for you to design your own icons for any website. Very clever Mr. Drew. Via Rob.
