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

This entry was posted in Design, Iphone, Mobile, Tutorials, Uncategorized and tagged Browsers, Design, Iphone, Social Media, thumbnails, Tutorials. Bookmark the permalink.