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.
Reader Comments (Page 1 of 2)
1-23-2008 @ 4:17PM
Andres Quijano said...
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
1-23-2008 @ 4:40PM
Nik Fletcher said...
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
1-23-2008 @ 4:45PM
Andres Quijano said...
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.
1-23-2008 @ 4:22PM
thethirdmoose said...
So the much vaunted Web Clips are bookmarks... on your desktop?
Reply
1-23-2008 @ 5:30PM
Brent said...
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.
1-23-2008 @ 5:41PM
sys_ops911 said...
They also hold page zoom info and the like - making them more useful than regular bookmarks on another front.
1-23-2008 @ 4:26PM
Mo said...
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
1-23-2008 @ 5:30PM
Peter Zich said...
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.
1-23-2008 @ 5:42PM
sys_ops911 said...
Sorry Mo, you covered it - i should have read a line down~
1-23-2008 @ 4:27PM
greg said...
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
1-23-2008 @ 4:56PM
nate said...
No offense, but your server folks are a bunch of slowpokes! Get some double espressos over there! :)
Reply
1-23-2008 @ 5:03PM
bob said...
haha, engadget and gizmodo already have them but the apple blog doesnt.
Reply
1-23-2008 @ 6:15PM
bmoney said...
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
1-23-2008 @ 7:40PM
klime said...
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
1-23-2008 @ 8:51PM
Benji said...
please stop spamming that godforsaken website. There is absolutely NO information on that site.
1-23-2008 @ 8:48PM
Fritz Laurel said...
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
1-23-2008 @ 9:29PM
KenC said...
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
1-23-2008 @ 11:29PM
FunWithHeadlines said...
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
1-23-2008 @ 11:51PM
FunWithHeadlines said...
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.
1-24-2008 @ 9:22AM
Patrick Melton said...
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