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:

The HTML for non-glossy icon:

Congratulations, your site is now a iPhone bookmark friendly.

Posted Tuesday, December 8th, 2009 · Back to Top

SPONSOR

Add Comment

51 Comments 8 Mentions

  1. Montana Flynn Author Editor

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

    ·

  2. Design Informer Author Editor

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

    ·

  3. Robert van Hoesel Author Editor

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

    ·

  4. Sam Dunn Author Editor

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

    ·

  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.

    ·

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

    ·

  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?

    ·

  8. kate Author Editor

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

    ·

  9. kohchang hotels Author Editor

    Great tip.

    ·

  10. rayong hotels Author Editor

    Great Very quick and easy.

    ·

  11. David Author Editor

    Thanks, going to add this to my site now.

    ·

  12. web2000 Author Editor

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

    ·

  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….

    ·

  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

    ·

  15. mushroom web design Author Editor

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

    ·

  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.

    ·

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

    ·

  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.

    ·

  19. Michiel Author Editor

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

    ·

  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!

    ·

  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?

    ·

  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.

    ·

  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

    ·

  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!

    ·

  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!

    ·

  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

    ·

  27. iraq Author Editor

    thank you it’s vrey uesful

    ·

  28. Stacey Author Editor

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

    ·

  29. Midhun Author Editor

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

    Thanks in advance

    ·

  30. Easytech Solutions Author Editor

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

    ·

  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!

    ·

  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.

    ·

  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?

    ·

  34. Bluebrick Designs Author Editor

    Thanks, Nice and easy with a great effect.

    ·

  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?

    ·

  36. hguhf sdhvhj Author Editor

    When Someone said your blog, Hopefully it doesnt disappoint me up to this. I mean, It was my replacement for read, but I actually thought youd have something interesting to say. All I hear is a lot of whining about something that you could fix in the event you werent too busy searching for attention.

    ·

  37. Louis Vuitton Damier Graphite Canvas Ipad Case Black N60033 Author Editor

    Hi there, You’ve done an excellent job. I will definitely digg it and personally recommend to my friends. I am confident they’ll be benefited from this site.

    ·

  38. Aaron Author Editor

    Worked like a charm…thanks!

    ·

  39. Louis Vuitton Damier Ebene Canvas Mini Pochette Accessoires Ebony N58009 Sale Author Editor

    We’re a group of volunteers and starting a new scheme in our community. Your web site provided us with valuable info to work on. You’ve done a formidable job and our entire community will be thankful to you.

    ·

  40. Louis Vuitton Monogram Canvas Montsouris Backpack Brown M51137 Australia Author Editor

    You made some decent points there. I looked on the internet for the subject and found most persons will approve with your blog.

    ·

  41. G3mani Author Editor

    Wow! Thanks a lot..

    ·

  42. ipad uses Author Editor

    Hi! I just wish to offer you a big thumbs up for your great info you have right here on this post. I will be coming back to your site for more soon.

    ·

  43. alanoxgamer Author Editor

    Thank you! Yes it’s working made a wonderful icon! :D

    ·

  44. hub Author Editor

    Thanks for your nice post…………….I want to say something that if you want to download apps and videos then ClipClock is your Social Hub for Great Video Moments! Now you can swipe videos for best moments highlighted by other people.

    ·

  45. RJM Author Editor

    Nice post, Sam. Thank you! :)

    ·

  46. radosław tadajewski Author Editor

    Throughout the awesome pattern of things you’ll receive an A just for effort and hard work. Exactly where you actually lost everybody was on the particulars. You know, people say, details make or break the argument.. And that couldn’t be more correct at this point. Having said that, allow me say to you exactly what did work. Your article (parts of it) is certainly pretty persuasive which is probably why I am taking the effort to opine. I do not make it a regular habit of doing that. Next, although I can easily notice a leaps in logic you come up with, I am not sure of how you appear to unite your points that make the actual conclusion. For the moment I will yield to your position but trust in the near future you actually link the facts much better.

    ·

  47. My youchat Social Author Editor

    Hello,Want new Communty Site? Sign up now To http://www.youchat.yooco.org For Free Chat World Wide..Enjoy more chat feature For Free

    ·

  48. My youchat Social Author Editor

    Youchat.yooco.org are now Build For more Chat feature and Chat Worldwide Sign up now For Free.

    ·

  49. Nick Author Editor

    Is there any way to add a custom description for the text of the icon? Thanks!

    ·

  50. weebly Author Editor

    Well, the economic and political father of Neoconservatism is Leo
    Strauss. B2C ecommerce has reported that there is a lot of room for sales growth,
    considering it has only accounted for 1. You
    can compare a large variety of styles, name brands, and even the function of the
    watches by reading the description.

    Also visit my website … weebly

    ·

  51. fueled design Author Editor

    I’ve been browsing online more than three hours today, yet I never found any
    interesting article like yours. It’s pretty worth enough for me.
    Personally, if all web owners and bloggers made good content as you did, the web will be much more useful
    than ever before.

    ·

 

Build Internet by One Mighty Roar. Since 2008.