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. User Avatar
    Scott
    Permalink to comment#

    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. User Avatar
    Tony
    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. User Avatar
    black-light-studio
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    Reyna Wilcox
    Permalink to comment#

    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. User Avatar
    Jorge
    Permalink to comment#

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

  7. User Avatar
    Damon
    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. User Avatar
    Nader Mah
    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?

    • User Avatar
      mathias sonderskov
      Permalink to comment#

      in php:

      <title>
      <?php
      $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
          if ($browser == true){
      echo '123-mobile'; //text for iLol
      }else{
      echo 'Welcome to 123-homepage!';
      }
      ?>
      </title>
      

      may make similair for iPod iPad etc.

    • User Avatar
      Abel La O Fernandez
      Permalink to comment#

      iOS 6 comes with support for custom web app titles

    • User Avatar
      Abel La O Fernandez
      Permalink to comment#

      Here’s the code, it didn’t show up in my previous comment.

      
      <meta name="apple-mobile-web-app-title" content="App Title">
      
  9. User Avatar
    Juan
    Permalink to comment#

    Awesome, thanks!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag