Give your site an iPhone bookmark icon

9 March 2010| 7 Comments| Print

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" />

Share:

7 Comments

Romantisk Weekend

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

9 March 2010 at 6:53 pm

uberVU - social comments

Social comments and analytics for this post…

This post was mentioned on Twitter by ashleyford: Give your site an iPhone bookmark icon http://goo.gl/fb/AskB...

11 March 2010 at 10:18 am

Kev Guy

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

11 March 2010 at 12:30 pm

Ashley

@kev, I’m sure we’ve met before

11 March 2010 at 1:06 pm

Al Kamal Md. Razib

This is a great icon! Thanks for sharing this.

12 May 2010 at 7:34 am

Rokaiya Yeasmin Munni

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

26 June 2010 at 10:45 am

Md.Saiful Alam

Thanks for showing iPhone bookmark icon. Fine!!!

28 June 2010 at 10:12 am