Quick Tip: Creating an icon for mobile shortcuts

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???)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: