With the recent iPhone 1.1.3 Firmware update along came the ability to customize the Home Screen and “WebClips.” Those of us using Mac OS X Leopard have been introduced to WebClips in Safari 3. This allows you to take a snipet of a webpage and add it to a widget in the Dashboard. This widget will pretty much just be a cut out of the section from the webpage and will still update exactly like you would see it in your web browser. WebClips on the iPhone are a little different. Instead of being a widget that update it is basically an icon on the Home Screen that will take you to the site and the exact spot you were scrolled to when you WebClipped it. The icon used on the Home Screen is usually just a small shot of the actual webpage, but the site developer does have the ability to create an icon similar to a “favicon” that will show as the button instead.
Create a WebClip Bookmark Icon
Phone 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.
As you might have guessed I created a WebClip icon for Atomac. So if you have an iPhone or iPod Touch and love Atomac enough to add it to your Home Screen (I know you do), you will get the spiffy little radioactive symbol. Maybe in time PolyVector will help me evolve it into something a little more 3D, but I think it looks pretty good for a first try.
Oh and if you would like to give a site your own custom WebClip icon it’s as easy as uploading an icon to a webpage. Go give Clipalizer a go.
0 Response to “iPhone WebClips”