webclip icons for iPhone and iPod Touch

Get the Bookmarklet

To use these custom icons you need to add a bookmarklet to your iPhone/iPod Touch.

First make sure you are in Safari (or whatever program you are syncing your bookmarks to the iPhone with,) and drag the following link to your bookmarks bar.

Add grantdesigns webclip icon

Next, sync your iPhone/iPod touch with iTunes. Under the Info tab, make sure “sync bookmarks” is checked and the correct program is selected. This will copy the bookmarklet to your device.

Use an Icon

1. Visit the website you want to add to your Home Screen. I’m going to www.facebook.com
2. Open your Bookmarks and browse to the “Add grantdesigns webclip icon” bookmarklet which will be in the “Bookmarks Bar” folder.
3. Tap the bookmarklet. An alert will pop up and ask you to enter the webclip URL.
4. The first part of the address will already be filled (http://www.grantdesigns.net//) so just add the filename to the end. I typed in “facebook.png”.
5. Tap OK.
6. The alert will disapper, wait a couple of seconds and then add the site to your Home Screen. The icon should be visible on the “Add to Home” screen.
7. Tap Add and enjoy!

About the Bookmarklet: Drew McLellan got the ball rolling when he posted this blog article. Then Rob McMichael created a version that removes any current webclip icons before adding the custom one. Drew updated his bookmarklet and this version appears at iclypso. in my desire to create a frequently updated page of webclip icons for my friends and I, I modified the javascript and created this page.