Build Internet has a brand new theme, and that's only the beginning. Read the full story or hide this bar

Give Your Website a Custom iPhone Bookmark Icon

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.

Wordpress.com stats not installed! Posted Tuesday, December 8th, 2009 / Back to Top

I this post. Tweet
Related Posts
More in Tutorials »
SPONSOR

35 Comments 8 Mentions

  1. Montana Flynn Author Editor

    Very quick and easy, now if only I had an iPhone…

    December 8, 2009 · Reply

  2. Design Informer Author Editor

    Simple but really nice tutorial. Thanks! Trying it on my iPhone now!

    December 8, 2009 · Reply

  3. Robert van Hoesel Author Editor

    Change the rel to apple-touch-icon-precomposed
    to remove the gloss effect

    December 8, 2009 · Reply

  4. Sam Dunn Author Editor

    @Robert van Hoesel
    Thank you, I’ve updated the post.

    December 8, 2009 · Reply

  5. Callum Chapman Author Editor

    Great tip. I learnt this the other day on Nouveller, must get around to doing it for my blog soon.

    December 9, 2009 · Reply

  6. Chris Author Editor

    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 11, 2009 · Reply

  7. Chris Author Editor

    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 11, 2009 · Reply

  8. kate Author Editor

    Change the rel to apple-touch-icon-precomposed
    to remove the gloss effect

    December 12, 2009 · Reply

  9. kohchang hotels Author Editor

    Great tip.

    December 12, 2009 · Reply

  10. rayong hotels Author Editor

    Great Very quick and easy.

    December 12, 2009 · Reply

  11. David Author Editor

    Thanks, going to add this to my site now.

    December 14, 2009 · Reply

  12. web2000 Author Editor

    Pretty Sweet, I just added mine and bookmarked it on my ipod touch. Worked beautifully!

    December 20, 2009 · Reply

  13. Legal Marketing Author Editor

    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 22, 2009 · Reply

  14. hack2learn Author Editor

    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 23, 2009 · Reply

  15. mushroom web design Author Editor

    Nice little tip. Very quick and easy to do. Brilliant!

    December 23, 2009 · Reply

  16. Vunky Author Editor

    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 24, 2009 · Reply

  17. Jawaad Ahmad Khan Author Editor

    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. :)

    December 30, 2009 · Reply

  18. Joseph Author Editor

    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.

    January 15, 2010 · Reply

  19. Michiel Author Editor

    Anyone knows if it’s possible to do this for Android ?

    April 16, 2010 · Reply

  20. Bradley Author Editor

    This is so cool, I was just wondering how I would be able to do this!
    “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”
    Exactly_I would have made that mistake if I didn’t read your comment!

    May 10, 2010 · Reply

  21. Manders Author Editor

    Same Questions as Chris!

    Chris

    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?

    May 25, 2010 · Reply

  22. Anthony @ iPhone Auctions Australia Author Editor

    Hi Sam,

    I had no idea this existed. Pretty much thought favicons were the only option.

    Cheers mate.

    Anthony.

    August 29, 2010 · Reply

  23. Nabil Author Editor

    Love it can i copy that on my social site http://www.seemywall.com and CAN you join please Would love to have you on board thanks

    September 18, 2010 · Reply

  24. Danette Author Editor

    Help! I have done ever step to the letter T and I still can’t get my icon to show up on my iPhone. Please someone help me figure out whats wrong?
    thank you!

    October 22, 2010 · Reply

  25. Danette Author Editor

    Help! I have done every step to the letter T and I still can’t get my icon to show up on my iPhone. Please someone help me figure out whats wrong?
    thank you!

    October 22, 2010 · Reply

  26. RezaK Author Editor

    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 icins next to each other and it is very apparent.

    Any idea what is going on?

    Many thanks. (Feel free to contact me directly)

    Reza

    December 11, 2010 · Reply

  27. iraq Author Editor

    thank you it’s vrey uesful

    April 2, 2011 · Reply

  28. Stacey Author Editor

    Niiice! Just made one for my website and checked it out on my iTouch – it worked! Cheers! :D

    May 30, 2011 · Reply

  29. Midhun Author Editor

    How do we this for android?? Can anyone help me plz?

    Thanks in advance

    July 13, 2011 · Reply

  30. Easytech Solutions Author Editor

    Thanks Sam, Just need to know if this can be done with other platforms.

    August 2, 2011 · Reply

  31. La Boit Specialty Vehicles Author Editor

    Worked like a charm. However, I also found that the 125×125 works best to give the appropriate resolution for both iphone and ipad. You can check ours out at http://www.laboit.com. Cheers!

    August 29, 2011 · Reply

  32. gsm phones supplier Author Editor

    You’ll be asked to choose a name for the homescreen icon. So, you know, pick a good one and save it. When you’re done it’ll show up on your homescreen and you’ll never have to type in that stupid URL ever again.

    November 22, 2011 · Reply

  33. Marco Author Editor

    Thanks! But, how can I set a custom Name when I click on Add to home? It automatically get the Title of the page. Can I also change that Title?

    December 9, 2011 · Reply

  34. Bluebrick Designs Author Editor

    Thanks, Nice and easy with a great effect.

    January 11, 2012 · Reply

  35. sivan Author Editor

    I put the file with right name for 2 of my sites.
    for the first one it work perfectly. but for the second site it didn’t work at all.
    my second site id running under SharePoint.

    do you know what could be the problem?

    January 15, 2012 · Reply

 

Join the Conversation

Back to Top / Comment RSS

2011 Build Internet. Created by One Mighty Roar. Icons by Komodo Media. Back to Top