Give your site an iPhone bookmark icon

Give your site an iPhone bookmark icon

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on March 9, 2010

I recently configured my site for mobile consumption, by using the WordPress Mobile Edition plugin along with the Carrington Mobile 1.0.2 theme. I noticed when I bookmarked my site using the iPhone that the home screen icon as missing. Today I’m going to run through how to create and setup the home icon for your website.

Create the icon

You will need to produce an image in PNG format that:

  • Measures 57 x 57 pixels, with square corners the (if the image measures other than this size, iPhone OS scales it)
  • Does not use alpha transparency
  • Does not have any shine or gloss

The Code

This part is extremely easy. there are two options, if you have access to your root directory (usually where your index.html file is kept) you can save your icon as apple-touch-icon-precomposed.png and the iphone or ipod will do the rest.

Or you can add a line of meta code to the head of your page which specifies the link to your icon.

Glossy icon:

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

Non glossy icon:

<link rel="apple-touch-icon-precomposed" href="/images/iphone_icon.png" />

More tutorials from Papermashup
Comments
16 discussions around Give your site an iPhone bookmark icon
  1. Alex says:

    Wow, that was easy :) Never thought iOS will recognize files based on it’s file name. Thanks, awesome tutorial and very up to date.

  2. RezaK says:

    Issue RESOLVED !

    Since WPtouch plugin was active, it was overwriting the “apple-touch-icon-precomposed.png” file.
    Image in WPtouch control panel was of the incorrect resolution! Once replaced, issue was fixed.

  3. RezaK says:

    Hi,

    I am quite familiar with both of these but I’m having an issue you might be able to shed some light on… regarding the iPhone shortcut icon.

    FYI … I’m using the SAME “apple-touch-icon-precomposed.png” file in BOTH websites as a test.

    Website A: (www.rkadia.net) the file is in the root directory and nothing else is on the domain, so simply in stand-by. The shortcut looks perfect and hi-res on the iphone.

    Website B: (www.rezak.com) This is a WordPress based website. The file is again in the root directory and as a back-up, it is also being called up by the code. HOWEVER, for this one, the bookmark icon is degraded in quality ! No idea why or how. I have even taken a screenshot of the iphone with both icons next to each other and it is very apparent.

    Any idea what is going on?

    Many thanks. (Feel free to contact me directly)

    Reza

  4. In a single word, this is very nice posting.
    thanks to share….

  5. Thanks for sharing iPhone bookmark icon.

  6. Thanks for showing me a new think…………it;s works.

  7. Well, that’s a great scheme to create and setup the home icon for our website. I really enjoy this site .

  8. Thanks for showing iPhone bookmark icon. Fine!!!

  9. Well, that’s a great scheme to create and setup the home icon for our website.

  10. This is a great icon! Thanks for sharing this. :)

  11. Kev Guy says:

    This is great, followed your tutorial and it works a treat!

  12. Pingback: uberVU - social comments

  13. Cool, definitely need to do that, even though I’m guessing most visitors to my site use a regular computer. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Looking for a registry cleaner to speed up your PC and show a full diagnostics?
Faster surfing with Dish Network High Speed Internet

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in touch.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com you can find details here Or use the contact link below for further advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.