Give Your Website a Custom iPhone Bookmark Icon
This tutorial will show you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen. Whether or not you own an iPhone, it takes under five minutes to do and makes your site look that much more professional, so let’s get rolling.
Design Considerations
Here is an excerpt from the iPhone Dev Center’s official guidelines for making the icon.
To ensure that your icon can take advantage of the visual enhancements iPhone OS provides, produce an image in PNG format that:
- Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it)
- Does not have any shine or gloss
- Does not use alpha transparency
Here’s what the icon that I made for Build Internet looks like:
Initially I was going to use Build Internet’s Twitter icon for this, but the gloss and rounded made it “less than pretty”, so I added some light rays to the plain black background to help it pop out a little more.
Using the Icon
Now that we have an icon, there are two ways to get it working.
Root Directory
If you have access to the root directory, this is the easiest option. All you have to do is name your file apple-touch-icon.png (or for a non-glossy icon name it apple-touch-icon-precomposed.png) and drop it in the root, the iPhone does the rest.
Link to It
You can link to the icon from the header of your website, which allows you to custom name the icon image, as well as put it in in any directory you like.
The HTML for glossy icon:
<link rel="apple-touch-icon" href="/icons/buildinternet_iphone.png" />
The HTML for non-glossy icon:
<link rel="apple-touch-icon-precomposed" href="/icons/buildinternet_iphone.png" />
Congratulations, your site is now a iPhone bookmark friendly.
Discussion
December 8th, 2009 at 4:25 PM
Very quick and easy, now if only I had an iPhone…
December 8th, 2009 at 4:29 PM
Simple but really nice tutorial. Thanks! Trying it on my iPhone now!
December 8th, 2009 at 5:07 PM
Change the rel to apple-touch-icon-precomposed
to remove the gloss effect
December 8th, 2009 at 6:16 PM
@Robert van Hoesel
Thank you, I’ve updated the post.
December 9th, 2009 at 2:54 AM
Great tip. I learnt this the other day on Nouveller, must get around to doing it for my blog soon.
December 11th, 2009 at 10:09 AM
How strange, I was actually thinking how I could do this a couple of days ago! I used a website that said add to Home of your iPhone and it had an awsome icon, I thought it would be linked in with the favicon or something.
Thanks for the tip
December 11th, 2009 at 10:15 AM
Quick question. So you have the icon, and when you save the bookmark on your iPhone it takes the title of your page as the name to go under your icon.
Now how can you force the title of the bookmark to be something of the authors choice?
December 12th, 2009 at 3:18 AM
Change the rel to apple-touch-icon-precomposed
to remove the gloss effect
December 12th, 2009 at 3:19 AM
Great tip.
December 12th, 2009 at 3:20 AM
Great Very quick and easy.
December 14th, 2009 at 5:19 PM
Thanks, going to add this to my site now.
December 20th, 2009 at 10:57 AM
Pretty Sweet, I just added mine and bookmarked it on my ipod touch. Worked beautifully!
December 22nd, 2009 at 5:50 PM
This is pretty awesome. I was always curious if it was possible to do something like this. Well now i know it is…and i can… Just need verizon to pick up the iphone this summer….
December 23rd, 2009 at 2:44 AM
Try http://www.flavorstudios.com/iphone-icon-generator – it’s my favorite iPhone icon generator. fast, clean and useful
thx for the short howto
December 23rd, 2009 at 10:28 AM
Nice little tip. Very quick and easy to do. Brilliant!
December 24th, 2009 at 3:31 AM
Combined with IUI (http://code.google.com/p/iui/) your website acts just like a real iPhone APP.
I design my icons on 125×125 pixels panel. Enough design space and the iPhone scales it perfectly.
December 30th, 2009 at 9:36 PM
just tested bookmarking my site with iPod Touch. Apparently, if you have a wordpress.com blog (Mine’s still hosted there, but I have my own domain name), they automatically use your site image (Gravatar?) as the iPhone icon.
January 15th, 2010 at 10:07 PM
This tutorial is really great. I tried it on my WordPress blog to no avail at first. Then I realized that the plugin WPtouch was overriding it, so I uploaded my icon to that plugin and now it works, looks great too. Thanks for the tip fellas.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.