Give your site an iPhone bookmark icon
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" />


Cool, definitely need to do that, even though I’m guessing most visitors to my site use a regular computer.
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...
This is great, followed your tutorial and it works a treat!
@kev, I’m sure we’ve met before
This is a great icon! Thanks for sharing this.
Well, that’s a great scheme to create and setup the home icon for our website.
Thanks for showing iPhone bookmark icon. Fine!!!
Leave a comment...
Connect
Latest Poll
Recent Posts