Advertisement

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.