HOW TO: Create WebClips Icons
Jan 15, 10:23 PM
Today, Steve Jobs announced the 1.1.3 iPhone software update. This is a significant upgrade with a lot of new features, each covered from a user’s perspective in the excellent Apple video tutorial. Each one of these new features probably warrants its own post.
But, I’m going to talk to the technical part of my audience for a minute solely about WebClips.
I was really excited about WebClips when they were announced, because it means that the home screen is finally (officially) customizable, and there’s a way to get the web apps that I use the most into the 1-click zone, and remove those applications (Yahoo! Weather, cough cough) that I don’t.
Unfortunately, when I started playing with it, I realized that the icons suck, and you can’t tell what each page is. They aren’t pulling the favicons, but it surely must be possible to customize an icon.
A few minutes on Apple’s iPhone Dev Center revealed the following:
iPhone and iPod touch allow a user to save a WebClip bookmark to your site on their Home Screen.
To specify a bookmark icon for all pages of a web site, place a PNG image named “apple-touch-icon.png” at the root directory of your web server – similar to the “favicon.ico” for site icons.
To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel=“apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.
The bookmark icon dimensions should be 57×57 pixels. If the icon is a different size it will be scaled and cropped to fit.
Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.
I’m not thrilled about the introduction of yet another non-standard icon location (favicon.ico is already bad enough), but at least I can understand why Apple chose a different image size and location. Favicons are substantially smaller than iPhone home deck icons, so the new location means a new file will get created — which, in turn, will result in a better experience on the iPhone.
So, there you have it. Go forth! Iconify your sites!
