Grow your CSS skills. Land your dream job.

Last updated on:

Set iPhone Bookmark Icon

Place this in your <head> section, and set the href attribute to an image to a 57px x 57px PNG file.

<link rel="apple-touch-icon" href="iphone-icon.png"/>

To prevent the iPhone from adding it's own gloss:

<link rel="apple-touch-icon-precomposed" href="icon" />

Comments

  1. Always wondered how to do that, thanks!

    Also good to note, the image automatically gets rounded corners and a bit of a beveled effect…

  2. Permalink to comment#

    If you have the WPTouch iPhone Theme plugin installed, will it do that for you, so long as you upload the image?

  3. With iPhone 4G and such the icons can be around 128px and such
    so I would personally use 128px and maybe even more, but not to big since it would be a drag on the bandwidth.

  4. Rob

    You can also specify different icons for different platforms, as follows…

    <!-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -->
    <link rel="apple-touch-icon" href="//dummyimage.com/57x57.png">
    <!-- For first-generation iPad: -->
    <link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png">
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png">
    <!-- No such device exists yet, so if this value is used,
        it means the sizes attribute is ignored: -->
    <link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png">
  5. We actually did something really fun for the “bookmark site” on this one. I hate those buttons, I think they are old school and not really needed anymore. But on the http://www.elegantcandlegifts.com site, I think we did a great job of making it work.

    Reyna

  6. Permalink to comment#

    Thank you for this, I used it for this site. NYNE Spot Design Cheers

  7. Permalink to comment#

    The below doesn’t seem to work for me:

    < !-- For non-Retina iPhone, iPod Touch, and Android 2.2+ devices: -- >
     <link rel="apple-t-ouch-icon" href="//dummyimage.com/57x57.png">
     <!-- For first-generation iPad: -- >
     <link rel="apple-touch-icon" sizes="72x72" href="//dummyimage.com/72x72.png" >
     <!-- For iPhone 4 with high-resolution Retina display: -- >
     <link rel="apple-touch-icon" sizes="114x114" href="//dummyimage.com/114x114.png" >
     <!-- No such device exists yet, so if this value is used,
        it means the sizes attribute is ignored: -- >
     <link rel="apple-touch-icon" sizes="228x228" href="//dummyimage.com/228x228.png" >
    
    

    Using an iPhone 4 running 5.0.1. Has the code change since this article?

  8. Permalink to comment#

    The challenge for me is not the icon, is the automated text which is coming from the website title.
    Can we change it in something else?

  9. Juan
    Permalink to comment#

    Awesome, thanks!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".