Filed under: iPod Family, iPhone
How Web Clips Work
If you're using version 1.1.3 of the iPhone or iPod touch-with-January-Upgrade , you'll probably encountered Web Clips. Web Clips add home screen icons that lead to your favorite sites. It's easy enough to make Web Clips, just tap the "+" button at the bottom of any MobileSafari webpage and choose Add to Home Screen from the pop-up menu (and yes, we're working on one for TUAW).When you request a Web Clip, Safari looks at the website. When it finds a site-based icon file (apple-touch-icon.png), it uses that art for the icon. Otherwise it scales down a screen shot.
Safari appears to create a new folder in /var/mobile/Library/WebClips, a .webclip bundle. Like on the Mac, bundles are specially named folders that contain resources that contribute to an application or plug-in, or, in this case, define a Web Clip.
The clip itself seems to consist of two files: a property list (Info.plist) and an icon (icon.png). The icon art is automatically built by Safari. The Info.plist file specifies the name of the Web Clip (that is, the title you entered when creating the Web Clip), the scaling used to create the icon art, and the URL to which the Web Clip links.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Scale</key>
<real>0.32653060555458069</real>
<key>ScrollPoint</key>
<string>0.000000,-183.750000</string<
<key>Title</key>
<string>Untitled</string>
<key>URL</key>
<string>http://www.tuaw.com/</string>
</dict>
</plist>
And now on to the speculative side of things. If you're so inclined and have figured out how to access to the 1.1.3 command line, you can theoretically create Web Clips by hand. Navigate to the WebClips folder (you may need to create one), create a folder using the .webclips extension, and add the two needed files: an icon file and the property list, keeping as close as you can to Apple-generated samples--duplicating an existing webclip, renaming the folder and replacing the icon, name and URL should do it. You may need to restart SpringBoard after adding a webclip by either rebooting or issuing launchctl stop com.apple.SpringBoard.
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 2)
Andres Quijano said 4:17PM on 1-23-2008
Erica,
Any reason why TUAW does not have a web clip icon yet?
It seems like you guys would have one by now, with all the capable people on staff that can create one in a jiffy.
Reply
Nik Fletcher said 4:40PM on 1-23-2008
Andres
The webclip icon has been done long ago (I created it not long after the keynote as it happens). We've got our server folks getting everything in place. We hear you loud and clear and it will be with you soon.
Thanks!
Nik
Andres Quijano said 4:45PM on 1-23-2008
Nik,
Thanks for the heads up. Just make sure you let us know when you have it up, so we can replace our current TUAW web clip.
thethirdmoose said 4:22PM on 1-23-2008
So the much vaunted Web Clips are bookmarks... on your desktop?
Reply
Brent said 5:30PM on 1-23-2008
Yeah, that's exactly what it is. I think it's a neat little function, but not real useful. Don't bookmarks work just fine? And, I know that maybe it's for a page that you check often, maybe a news section of a page but typically those offer an RSS feed and by subscribing to that with the iPhone's web browser, I think that's a much better option. Just don't really see much use for this neat little functionality.
sys_ops911 said 5:41PM on 1-23-2008
They also hold page zoom info and the like - making them more useful than regular bookmarks on another front.
Mo said 4:26PM on 1-23-2008
Yes, web clips are bookmarks on your Springboard (iPhone/iPod Touch version of the desktop), though they also remember where on the page you were and how much you'd zoomed in or out of it. But yes, bookmarks. Very handy, but nothing spectacular in terms of innovation.
Now, TUAW: you have a logo, you have a shortcut icon, is it really that tricky to resize the logo to 60x60 and drop it onto your web server? Would it help if one of us proles made one for you—then all you need is somebody to sftp the file up there...
Reply
Peter Zich said 5:30PM on 1-23-2008
As Nik said, they have the icon made, they just haven't yet been able to implement it in their page, I'm guessing they don't have full access to the server.
sys_ops911 said 5:42PM on 1-23-2008
Sorry Mo, you covered it - i should have read a line down~
greg said 4:27PM on 1-23-2008
Are you going to try and create apps to make the new things like this possible without having to upgrade the 1.1.3, for those of us with unlocked iPhones?
Reply
nate said 4:56PM on 1-23-2008
No offense, but your server folks are a bunch of slowpokes! Get some double espressos over there! :)
Reply
bob said 5:03PM on 1-23-2008
haha, engadget and gizmodo already have them but the apple blog doesnt.
Reply
bmoney said 6:15PM on 1-23-2008
I made a custom webclip icon for TUAW using a scaled down screen shot of the TUAW logo in under 5 minutes using these instructions:
http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site
It even gives the instructions for your "server folks", but there's no need for the rest of us to wait for them.
Reply
klime said 7:40PM on 1-23-2008
I love these webclips. Make so much sense. And it appears that Apple with its home page customization has set us up nicely for forthcoming apps... http://personafile.com/iPhone-apps.html when the SDK is released. I wonder how long it will take to get some good quality apps out.
Reply
Benji said 8:51PM on 1-23-2008
please stop spamming that godforsaken website. There is absolutely NO information on that site.
Fritz Laurel said 8:48PM on 1-23-2008
TUAW webclip icon:
http://www.dyspersion.com/misc/clippngs/tuaw.png
Peter Zich's script to install your custom icons (from a URL) into any web page you want:
http://pz2.ucls.uchicago.edu/webclipIcons.js
And TUAW -- Okay, Nic gets a cookie, but your entire server admin staff doesn't.
Cheers,
FL
Reply
KenC said 9:29PM on 1-23-2008
How can it take your server people so long to get this done? You created the image, you upload it your root directory of the site, and make sure you name it correctly thats it your all done
I had mine for my own site out the same day they announced them.
Reply
FunWithHeadlines said 11:29PM on 1-23-2008
Hmm...doesn't seem to be working for me. I created a 57x57 pixel png file called apple-touch-icon.png and put it on my site in the folder where my index.html file is (and most of my other files). Nothing. The icon on the screen is the scaled-down image of my site. Thinking that maybe I put the png file in the wrong place, and that 'the root' of my site might mean the actual root (instead of where I place all my html files), I put that png file in the root as well. Still nothing.
I think I'm following the instructions, but it's not working for my site (www.funwithheadlines.net). What might I be doing wrong based on the above?
Reply
FunWithHeadlines said 11:51PM on 1-23-2008
Thanks for the email response! OK, I see what I was doing wrong. For the record, I thought I was in the root directory but I was actually one level in. I'm now working with my host company to get the file in place.
Patrick Melton said 9:22AM on 1-24-2008
Check out:
http://www.nobodylikesonions.com/clipclick
It lets you add a custom icon to any URL for making custom webclips. You can also browse other's webclips and share them.
Reply