Tuesday saw the release of the iPhone software version 1.1.3, and amongst the new features it were web clips on your home screen. This allows you to save bookmarks to websites on your home screen, for quick access.

By default the icon used for a web clip will be a screen shot of the page. This is great, but it doesn’t look nice and makes it hard to tell at a glance, one web clip from another. Dan Dickinson blogged about how you can add custom touch icons to your website by adding a link tag into the head of your HTML.

This is great and many sites have already added custom icons, (pownce, google, twitter) but there are some that don’t (as of yet) such as Google reader.

So up popped Drew with a bookmarklet to add custom touch icons to your iPhone’s home screen. It works by adding the link tag into the head of the document after you specify a path to the image, clever stuff! So all you have to do it host your custom icons, or use other peoples and away you go.

I am not sure how it works on replacing images if they are already there (the twitter one sucks). Lots of people are starting to create their own too. Nathan recommends creating icons at 158Ă—158px to get a crisp look, Mr. Hicks has a nice little RSS icon for Google Reader and Ben Darlow has a host of icons including a nice twitter (twitterific) one.

Step by Step

  1. First drag this link to your safari bookmark bar. Set touch icon or Override Touch Icon
  2. Sync your iPhone (with bookmark sync turned on)
  3. Browse to a website you want to make a web clip of through safari on your iPhone
  4. Open your bookmarks and find the one you just added to bookmark bar
  5. Enter the URL of an icon/image you would like to use
  6. Hit OK, then click the + at the bottom of the screen
  7. Select, “Add to Home Screen” and wait for the icon to appear
  8. Enter a name and hit, “Add”


I have hacked and updated Drew‘s bookmarklet to override sites with existing Touch Icons: Override Touch Icon

It’s a bit dirty as it removes all link elements in the head, however this shouldn’t be a problems as you shouldn’t need them after the page has loaded and this is a one off for setting the home screen icon :) Also be sure to wait for the icon to load, can take a while…


Drew has taken my hack and made it a little more efficient and less reckless by just removing link tags with the “touch icon”‘s rel attribute, and then breaking when it finds it. It’s fun learning about bookmarklets, although I am sure there is a better way of writing them than how I was doing it :p


Cameron Hunt has updated the bookmarklet even more to give users some of the most commonly icons by default (and make it look slightly nicer). Cameron Hunts’s Friendly iPhone Web Clip Override


Check out iclypso for a great source of icons and instructions on how to do it!

This entry was posted on Thursday, January 17th, 2008 at 5:17 pm and is filed under Development, Mac OS X, Technology. You can leave a comment and follow any responses to this entry through the RSS 2.0 feed.

24 Comments Leave a comment

  1. Jordan Dobson 18 January 2008 at 12:55 am #

    Awesome! Nice Work.

    I also created a simple bookmarklet so you can add your own custom home screen icons” for any webpage.


    Nice work guys. I’ll have to check out your code for removing any existing icons.

  2. Martin Leblanc 18 January 2008 at 11:42 am #

    Get your icons for iPhone here: http://www.iconfinder.net

  3. […] This looks like a nice ‘touch’ Pixelbox » Custom icons for your iPhone web clips […]

  4. roh 19 January 2008 at 9:26 pm #

    is this trick just for iPhones or also for the iPod Touch?
    caus with my Touch I can

  5. Rob 20 January 2008 at 1:36 am #

    Should work with any iPhone or iPod touch. Going by Apple’s naming of the icon ( Apple Touch Icon ) it may be used in the future for other devices that are touch controlled ( satnav, laptop, camera etc )

  6. […] we wouldn’t normally be able to edit icons for sites we don’t manage, only to have it improved upon by Rob to override websites’ existing icons (and then re-tweaked by Drew). Then, just when we […]

  7. Andrew 22 January 2008 at 1:02 pm #

    Nice one.

  8. rohtop 22 January 2008 at 7:21 pm #

    Hi, check http://webclip.us/create
    really easy way to create webclip icons for every site you want.


  9. […] via Pixelbox […]

  10. iPhone Icons 3 February 2008 at 12:46 am #

    The website http://www.icons4iphone.com allows you to add customized and cool icons of your favorite websites to your iPhone’s homescreen.

  11. […] want to create my own for other websites? Drew McLellan explains how to set an icon for any site. Rob McMichael provides his own step-by-step instructions based on Drew’s discovery. I don’t want to […]

  12. […] This page from PixelBox has a quick tutorial for those who want to add this feature to their own web sites, and this article by Cameron Hunt has an extra hack that adds a webclip bookmarklet to iPhones. […]

  13. Callum MacLure 31 May 2008 at 6:03 pm #

    Hi When sync the override bookmark to my iphone, nothing happens when I select it (i.e. no window pops up) – any ideas/help would be appreciated. Also for the basic replace icon option (but won’t override existing), how can I edit it so that when the window pops up, the default address where the .png file is already there and I simply would have to add the file name.

    Warm regards Callum

  14. Rob 2 June 2008 at 9:24 am #

    That’s strange Callum! Not sure why it’s not working? If you want to set a default starting address you will have to edit the bookmarklet. It shouldn’t be too hard if you know JavaScript!

  15. Joshua 5 June 2008 at 5:34 pm #

    Exact same problem as Callum. Just Im on an iPod Touch not iPhone. Hope you can help us!!!


  16. […] a web clip sized tfl icon you can use to put a link on your iPhone’s home screen, by using the iphone bookmarklet we created a while back. Meta tags: Random There are no comments […]

  17. b123400 6 September 2008 at 8:50 pm #

    hi, as I see you guys made such a convenient bookmarklet
    I made a website that work even better
    the point is that it is painful to copy the address of icon from computer to iphone every time, and I can’t remember the address if I am not at home, so here’s the solution:
    you can upload your own icon to the server(at home), for example the yahoo icon, the next one who visit yahoo and want to add it to home screen, will not have to type in the address, just click the bookmarklet and it will search for icons of yahoo from the server, and can be add to the home screen immediately. (it can also use to pretend an app)

  18. Marc Verbeelen 23 May 2009 at 1:30 am #

    This is great and it works just fine.
    Question, would it be possible to add this feature as well?

    Hide iPhone address bar once page is fully loaded.
    Found this script on the net, but don’t know how to use it.


    addEventListener(‘load’, function() {
    setTimeout(hideAddressBar, 0);
    }, false);
    function hideAddressBar() {
    window.scrollTo(0, 1);

    MANY THANKS for all your help in advance !!


  19. Marc Verbeelen 23 May 2009 at 1:35 am #

    Sorry, the msg above isn’t looking good.
    And since I can’t edit the msg anymore,…
    Here’s the URL from where I’ve got it.



  20. […] te bookmarken site gewoon op de achtergrond staan. Meer informatie is te vinden op de volgende url Pixelbox Custom icons for your iPhone web clips […]

  21. Topi 3 January 2010 at 6:01 pm #

    Thank you so much!


  22. fabian 17 March 2010 at 10:41 am #

    Thanks for your article.
    Your link about Apple is down.
    But the information about that is here:

  23. […] recently (which Rocks, with a capital ‘R’) I suggested that we recycle Rob’s home screen icon injecting bookmarklet to add Apple’s web app meta tag to the document’s head, so that a site could be forced […]

  24. […] The problem is, the onus is on the developers to tell the iPhone specific things, that can make such a diference. Some are quite complex and would require lots of work, but others are really simple, such as default zoom, and if the toolbar is required (The BBC mobile site always opens slightly too zoomed in!). These are done by simply adding meta tags to the head of your HTML. We then suddenly realised that you could do this using a JavaScript bookmarklet, the same way Drew did way back for changing the home screen icon. […]

Leave a Reply