Set Your Site’s Apple Touch Icon

By  on  
Apple Touch Icon

Apple's mobile devices are taking over the world. iPhones and iPod Touches are all over the place. You can set an Apple Touch Icon for your website just like you can set a favorite icon. So lets do it!

The XHTML

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

The icon should be 114 pixels wide by 114 pixels tall.

Just like the favorite icon. Yet another creative detail to add to your site. Show people that you care about the details!

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse.

  • By
    Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

Discussion

  1. Good one to remember.

    Also worth mentioning that the icon should be 57x57px

  2. Good call George!

  3. And what does this button do?

  4. @Rick: There’s an option in iPhone/iPod Touch’s Safari that lets you place shortcuts to websites right on the main screen. This icon will be used in case someone does that for your site.

  5. confiq

    It reminds me of MSIE and they standardization :)

  6. Thanks for the tip. I’ve just done it. But, instead of putting the PNG file in the root folder, I put in the themes folder and changed the href reference accordingly. Is this all right?

  7. where do i put this xhtml code?

    • In the header like html does. Remeber the link code ends with />.

  8. By the way it is also used in Opera’s Speed Dial.

  9. dendi

    But this doesn’t work for blogger mobile template but only for the web version. Ho can i put this also for the mobile version

  10. Should there be multiple icons listed in the header for new and old devices.? Also, it would be nice if this post [or every post] had a date so we/I would know when it was written as an indicator of it’s relevance.

  11. I was in search for this. Good one.

  12. I added the code to the root folder – is something supposed to show up on the home page or only when you use a mobile device?

  13. Pulled a link to the iOS developer Library with some additional graphics specifications. Thanks for the great post. Love the hover effects!

    http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

    Added your blog as a reference on my SEObrainstorm.com!

  14. I noticed a lot of requests for that image in my visitor logs and had no clue what it’s about. Thanks for the tip!

  15. I just published an Apple touch icons generator, converts your image to the right sizes and generates the correct html code to use them on your page. Curious to hear if you like it.

  16. OB-1

    PLEASE NOTE:

    1. The one size fits all icon size now is 114px 114px if you can’t be bothered to make all the various sizes – the OS will rescale it for you.

    2. The image icon would not work if I called it anything other than “apple-touch-icon.png”. This drove me nuts.

  17. its worked even without put meta in header, just put apple-touch-icon-precompossed.png in your web folder :D

  18. The right answer was…

    … 152×152. 180×180, thanks to iOS 8 (updated on September 26th, 2014).

    Apple defines 4 icon sizes, from 60×60 up to 152×152. What the specifications forget to mention is that these sizes are for iOS 7. To support iOS 6 and prior, you need 4 other dimensions.

    IPHONE IPAD
    NON-RETINA RETINA NON-RETINA RETINA
    IOS 6 AND PRIOR 57×57 114×114 72×72 144×144
    IOS 7 60×60 120×120 76×76 152×152

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!