One of the cute things about most mobile sites these days, is that when you make an shortcut and set it to your phone’s desktop* a personalised favicon type image is used, instead of just a boring standard bookmark.
These are cute and very easy to do. Simply paste the following code into the <head></head> section of your page. Ideally it should be in the <head> bit, though it doesn’t have to be (if using Frog for example) :
<link rel=”apple-touch-icon” href=”full path to your image” />
There’s some debate on the internet as to whether you need the full path or if the local path will do, but I’ve used the full path and been happy with the results.
Your image should be the official 57×57 pixels, but again, there’s plenty of debate on the best size. It should be saved as a png.
And don’t worry Android users, the code may say apple-touch-icon, but works just the same.
*(is that the right term???)