Skip to Content

How Web Clips Work

by Erica Sadun Jan 23rd 2008 at 4:00PM

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.



View Tags

Related Stories

Categories

iPod Family iPhone

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...
 

Add a Comment

Sign in »
*0 / 3000 Character Maximum

21 Comments

Filter by:
noury-goujjane

We have a brief version history posted here - http://noury-goujjane.com/ Good luck!

January 28 2008 at 10:53 AM Report abuse rate up rate down Reply
Patrick

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.

January 24 2008 at 9:13 AM Report abuse rate up rate down Reply
FunWithHeadlines

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?

January 23 2008 at 11:28 PM Report abuse rate up rate down Reply
1 reply to FunWithHeadlines's comment
FunWithHeadlines

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.

January 23 2008 at 11:51 PM Report abuse rate up rate down Reply
KenC

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.

January 23 2008 at 9:25 PM Report abuse rate up rate down Reply
Fritz Laurel

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

January 23 2008 at 8:48 PM Report abuse rate up rate down Reply
klime

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.

January 23 2008 at 7:39 PM Report abuse rate up rate down Reply
1 reply to klime's comment
Benji

please stop spamming that godforsaken website. There is absolutely NO information on that site.

January 23 2008 at 8:50 PM Report abuse rate up rate down Reply
bmoney

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.

January 23 2008 at 6:15 PM Report abuse rate up rate down Reply
bob

haha, engadget and gizmodo already have them but the apple blog doesnt.

January 23 2008 at 5:03 PM Report abuse rate up rate down Reply
nate

No offense, but your server folks are a bunch of slowpokes! Get some double espressos over there! :)

January 23 2008 at 4:56 PM Report abuse rate up rate down Reply
Mo

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...

January 23 2008 at 4:26 PM Report abuse rate up rate down Reply
2 replies to Mo's comment
Pete Zich

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.

January 23 2008 at 5:30 PM Report abuse rate up rate down Reply
sys_ops911

Sorry Mo, you covered it - i should have read a line down~

January 23 2008 at 5:42 PM Report abuse rate up rate down Reply
Buy an ad here

Hot Apps on TUAW

Tweets

© 2012 AOL Inc. All Rights Reserved.