All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

How To Set an Apple Touch Icon for Any Site

17 January 2008

This week, Apple rolled out an update to the iPhone and iPod Touch to enable users of those devices to add links to web sites to their home screen. Apple calls these WebClip Bookmarks. By default, the icon used for this home screen is a thumbnail screenshot of the page in question, but Apple have provided a mechanism for site owners to specify an icon to be used instead.

Much like favicons, the way these icons (let’s call them ‘touch icons’) are specified is quite simple. On adding a page to the home screen, Mobile Safari looks for a file in the root of the site called apple-touch-icon.png. If that file exists, it’s used. Simple as that.

Again, like favicons, reading in the documentation there’s a different way to specify more explicitly which file should be used for the icon. By adding a LINK element to the head of the document, a developer can specify the path to the icon that should be used.

<link rel="apple-touch-icon" href="/customIcon.png"/>

The trouble is, most sites don’t specify an icon. Whilst the thumbnail screenshot is a pretty neat trick in place of an icon, they soon all look the same and become useless. Wouldn’t it be great if you could specify the icon you wanted to use when adding a site to your home screen?

So here’s how. All we need to do is add that LINK element ourselves – something that can easily be achieved with JavaScript. As the href attribute can take any URL, we just need to create an icon and then specify where it is on the web.

All this can be done through a simple bookmarklet. Adding a JavaScript bookmarklet to the iPhone can be tricky – I found it easiest to add it to Safari on my Mac and then use the option to sync Safari bookmarks with my iPhone. Here’s the bookmarklet:

Set touch icon

This will bring up a dialogue to prompt for the URL of the icon you wish to use – so make sure your icon is online somewhere. Clicking OK will seemingly do nothing, but what’s actually happened is that the LINK element has been set and the script has finished. Just go ahead and add the site, and your new icon should be used.

After a quick test it looks like you can’t override an existing icon, although it may just be that Mobile Safari is taking the first specified. By adding the new LINK above any existing ones we might be able to get around that.

Let me know if it works for you, and any suggested improvements are welcomed!

Update: In the comments, Rob McMichael points out that I could simply look for and remove any existing LINK in order to successfully overwrite the icon with my own. Of course! Good thinking, Rob. Here’s a new version to test, that does just that:

Set touch icon

Keep the feedback coming!

- Drew McLellan

Tags

Comments

  1. § Ben Darlow:

    Brilliant! I had been musing over something similar using a URL-forwarding site, but this would be a lot easier. What might also be useful is if some sort of repository of touch icons could be assembled for sites that don’t yet possess one, then perhaps the bookmarklet could try to use one from there if it already existed? Obviously that’d require the creation of said repository…

  2. § Alex:

    Awesome. I’d been hoping someone would hack something together to allow user-defined WebClip icons, and this fits the bill perfectly. Thanks!

    I whipped up an icon for Facebook (based on their favicon) to try this out, and it looks great on my iPhone. If anyone’s interested, here it is: http://graphr.net/iphone/facebook.png

  3. § Luke Andrews:

    Superb. However, I noticed while trying to create icons for Meebo and NewsGator that both already updated their sites to include an icon sometime between yesterday and today! Clearly word spreads fast. :)

  4. § Alex:

    Sorry for the self-promotion, but I couldn’t resist making another icon, this time for an IM app: http://graphr.net/iphone/im.png

    It’s designed to match the style of the SMS icon (except in blue), but it doesn’t look quite right because of the glossy overlay the iPhone automatically applies to WebClip icons. (The SMS icon doesn’t have gloss on the speech bubble, but this will.) It’s pretty close, though.

  5. § Jon Hicks:

    Yay it works!!! Took me a while to realise that I still had to ‘add to the home screen’, but that was me being dumb. Genius! :)

    I’ve put one up for Google Reader here: http://hicksdesign.co.uk/else/greader/apple-touch-icon.png

  6. § Ben Darlow:

    Obviously only a few, and almost entirely for my own benefit, but here are a few I’ve put together so far: http://www.kapowaz.net/touchicons/

  7. § Jason G:

    Bah, You beat me to it Drew!

    I have my own version of this working at work but no way to get if online or on my phone as a bookmark right now. Nice work.

  8. § Rob McM:

    Great stuff, and thanks Ben and Jon for the icons!

  9. § J. King:

    Thank you thank you thank you. This is great just want I was looking for.

  10. § Rob McM:

    Me again, I noticed that more and more sites are adding their own icons. This is great, BUT it means you can’t set your own. The twitter icon for example is OK but very faded and not as good as Ben’s.
    So (I hope you dont mind) but I moded your script so it removes any existing icons first :) More info here: (I can’t get the bookmarklet to paste via textpattern :( )

  11. § Ken:

    great idea! i was a little underwhelmed at the icons too, glad to see you can do your own

  12. § Bryan Corey:

    I have re-written the bookmarklet to use your code but strip the previous logo if one exists. Tried it on Newsgator Mobile and got my own RSS in there (the traditional ones from feedicons.com).

    Updated Bookmarklet

  13. § Garrett Murray:

    Strange… when I initially tried to create a bookmarklet just like this a few days ago (see this) it didn’t work. But we have both basically done the exact same thing. I’m curious as to why yours works and mine doesn’t… how strange. It must have something to do with setAttribute instead of setting it directly using element.rel = blah.

    Awesome work!

  14. § Rob McM:

    Nice work Drew, I see you have tidied it up :) To be honest earlier today I wasn’t even sure I could use a for loop in a bookmarklet. Every day’s a school day ;)

  15. § Bryan Corey:

    Sorry Rob McM… your comment hadn’t gone through when I posted mine. Great work, seems we had the same idea.

  16. § Jonathan Snook:

    @Garrett Murray: Yes, Safari/WebKit seems to handle attributes differently. I’ve run into a similar problem in Adobe AIR where I’ve had to use setAttribute instead of an expando property.

  17. § Jordan Dobson:

    Looks like I’m a little late to the party…

    If anyone is interested, I also created a simple bookmarklet so you can add your own custom home screen icons for any webpage.

    http://madebysquad.com/iphone/

  18. § Jacques:

    Here’s a red Guardian icon to complement Ben’s white one.

  19. § Brian Hersch:

    Please excuse my ignorance, but I can’t seem to find a way to bookmark the ‘set touch icon’ link in Safari on my Mac. If I click on the link, the ‘set touch icon’ window pops up on the screen, but the ’+’ sign at the top of the page in Safari is grayed out. I can right-click on the link and save it, but then how exactly do I bookmark the link?

  20. § Josh Webb:

    Fantastic work! I made a Google Reader (generic RSS) and a Digg icon if anyone is interested. Thanks so much for doing this!

    http://07-05-08.com/gralt.png
    http://07-05-08.com/d.png

    (I tried to make typing them out as painless as possible.)

  21. § Mike Roy:

    ok guys, im a little confused on this, can someone explain to me how to add my own icons that ive created? Im sort of a noob when it comes to any scripting, and im a little confused on how to do this. I have my own icons i created and uploaded them to my server. Thanks!

  22. § julian:

    While this is really nice, one thing you might want to be aware of is that if you do enable bookmark syncing, you won’t be able to remove the bookmarks bar and bookmarks menu folders from the iPhone, even if you disable it later. It also wiped my existing bookmarks when I enabled it, though I think YMMV a bit when it comes to that.

    The only thing that seems to work is a restore (judging by Google), and as my backup was made after I enabled syncing (when it prompted me before the restore) they’ll were still there when I restored from it. Thus if anyone has any suggestions on how I can kill them without doing a full restore and restoring all my setting manually, my obsessive-compulsive side would really appreciate it ;).

  23. § Matt McVickar:

    I’ve made a Wikipedia icon! Point yourself in this direction: http://matthewmcvickar.com/files/images/webclip_icons/wikipedia.png

  24. § Drew:

    To those having trouble: this is a bookmarklet, so you need to drag the link (‘Set touch icon’) to your bookmarks bar on your mac and then sink. The only time you click the link is when using it on your iPhone or iPod Touch.

  25. § Rob McM:

    No problem Bryan Corey :) Great minds…

    There is a Flickr group for these icons here: http://www.flickr.com/groups/593911@N25/ also a tinyURL would make typing the links to icons much much easier on the iPhones keyboard :)

  26. § Nick Christensen:

    Mine does nothing when I select it in my iPhone Bookmarks. I have javascript enabled, I even turned off pop-up blocking. No dialog box ever comes up though, it just does nothing. Any suggestions?

  27. § Drew:

    Sounds like it could be erroring, Nick. Can you try the bookmark on the same page in a regular desktop browser? (Something that would throw a JavaScript error to help us debug.)

  28. § Steven Dougan:

    Maybe i’m being stupid but this doesnt work for me on my iphone. I tried to use it with facebook and it just didnt work. Heres what I did.

    1. Opened up Safari on my iPhone
    2. Went to Facebook.
    3. Opened my bookmarks and clicked on the bookmarklet
    4. Entered http://graphr.net/iphone/facebook.png
    5. Hit ok and then went to add to my home screen

    Didnt work?

  29. § Nick Christensen:

    yeah, Firefox gives me a pop up dialog box, so does IE (after it asks me if should allow scripted windows). I am syncing the bookmark over from IE on a windows machine, but it seems to be fine (as in, none of the symbols are lost, etc.)

  30. § Drew:

    Steven – your steps worked for me. The Facebook icon from graphr.net showed up.

  31. § Rob McM:

    Steven Dougan – Make sure you wait for a while, the image will only be requested when you get to the add screen. From that point it then has to request and load it in. This can take a minute or so, especially when on Edge! Until that point you will see the default screen shot.

  32. § Kevin Wolfe:

    Thanks to Drew for creating this. To streamline entry of the icon url, put all your icons in one folder on the Web. You then modify the bookmarklet on your iPhone to add the full address of the folder by looking for:

    http://

    in the code and filling in all but the filename. Then when you call up the bookmark all you’ll have to type in is the FileName.png. This can save those of us with longer addresses a lot of typing.

    Kevin

  33. § Drew:

    Good tip Kevin – thanks.

  34. § Jordan Dobson:

    I updated my instructions on how to use a bookmarklet so you can add your own custom home screen icons along with a minor change to the code.

    If any one is having problems just email me and I’ll look into your bug and see if I can’t find a work around to share with all of you. :)

  35. § Cameron:

    Hey Drew and Rob, I made a derivative called Friendly Clip, it works kinda like Tabulate :

    Friendly Clip.

  36. § Andy Pearson:

    After seeing this post (great idea by the way!) I went and put together iclypso which will hopefully provide a good place to find custom WebClip icons!

  37. § Mike Freyder:

    In my tests it seems the 158×158 72dpi image looks best, compared to same image resized to 60×60 and 57×57 (the 57×57 is easily the worst of the three). plus I’ve noticed that on all three size tests that the image is still being slightly cropped on the bottom. the artwork is all slightly skewed to the bottom of center, whereas the original artwork is fully centered. I did a test with a series of vertical lines, each line to the right pushed up 1 pixel higher than the previous and it appears that there is a 6 or 7 pixel crop on the bottom.

  38. § Mike:

    Interestingly, none of this seems to work on www.google.com or www.google.com/reader. Anyone have any luck overriding the default icons from those two sites?

  39. § mahalis:

    Nice work – glad to be able to make my own icons for sites that don’t have them.

    @ Andy 36: any plans to set up a submission form of some sort? Most of the ones I’ve thrown together are for webcomics and things, but I’m sure others have more useful ones to contribute.

  40. § Michael:

    Protip: If you’re trying to use this bookmarklet by synching through IE (I’m using 7) and it’s not working, go to bookmarks > edit > Set touch icon (this is on the iPhone btw) and edit the URL by swapping all the %2520’s that have gotten in there with %20.

  41. § KiltBear:

    Do you have access to the browser history in javascript? If so, you could make the default custom icon address the previous page folks just viewed.

    So people could save the icons they want in Safari on their mac, and then go to an icon, go to a page, run your bookmarklet and then save…

  42. § Monkeyfoot:

    from a graphics angle, it appears that Apple crops off 1 pixel on the left and right and 3 pixels at the bottom of the 57×57 PNG graphic. i made a PSD template with an overlay you can download if it helps:

    http://www.iphoneminds.com

  43. § KeynoteKen:

    The cropping was done before the version 2.0 software. Now, creating a 57×57 apple-touch-icon yields a sharply rendered result on the phone. I’ve posted some example grid and checkerboard example png’s for your perusal on my site.

    Clip a little Web for you

  44. § SwatchMe:

    This site http://www.SwatchPix.com helps to automate the webclip process. Use it to create custom webclips, or just enter the number on your iphone of a pre-linked clip!

  45. § Doi Guy:

    UPDATE. Okay, so this blog entry is two and a half years old, but was still at the top of the heap in my google results, so I’ll still post in case anyone else ends up here.

    The Apple spec allows for two types of icons, apple-touch-icon and apple-touch-icon-precomposed. The latter allows one to link to an icon that will not have the glossy highlighting applied. I’ve updated the javascript, so to use it just edit the address of your bookmarklet in Safari and paste in the appropriate line as copied from the link below. It will now strip out either type of existing icon link, then insert a new icon link, either to-be-highlighted (copy line 3) or left plain (copy line 8).

    Updated raw javascript bookmarklets

Photographs

Work With Me

edgeofmyseat.com logo

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Follow me

Affiliation

  • Web Standards Project
  • Britpack
  • 24 ways

Perch - a really little cms

About Drew McLellan

Photo of Drew McLellan

Drew McLellan (@drewm) has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Cadburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.