How to Create an Apple Touch Icon for Your Website

written by
Friday, May 18, 2012

How to Create an Apple Touch Icon for Your WebsiteEXCERPT: When browsing online with an Apple mobile device, users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. Essentially, users are able to create a bookmark that is given priority placement.

How to Create an Apple Touch Icon for Your Website

When browsing online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. Essentially, users are able to create a bookmark of sorts that is given priority placement amongst their apps.

Unfortunately, by default, Apple will use a screenshot of the page when creating a home screen icon which will often look hideous and illegible. Thankfully though, website owners have the ability to change this by designating a specific icon graphic, called an Apple Touch Icon, to be used instead.

What is an Apple Touch Icon?

In short, an Apple touch icon is basically a favicon for Apple mobile devices, and, if set, is displayed when a user saves a web page to their home screen. For example, the Apple touch icon for this website looks like this: How to Create an Apple Touch Icon for Your Website

How Do I Create an Apple Touch Icon?

To create an Apple touch icon, you will likely need the assistance of a graphic designer or have access to and knowledge of graphic editing software, such as Photoshop. Begin by creating a square graphic that is sized to 129 by 129 pixels, and then saving it in .png format. 129-pixels is the perfect size for the Apple iPad, and will allow other devices to properly resize as needed.

Also, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. While these are key characteristics of Apple icons, the device will do this automatically.

How Do I Implement My Apple Touch Icon?

You will be pleased to know that Apple has made implementing touch icons very easy to do. You have the following two options:

Option 1: Standard Icon

Standard Apple touch icons are rendered with a gloss effect and rounded corners. To implement a standard icon, apply the following code into the head section of your website:

<LINK REL="apple-touch-icon" HREF="/apple-touch-icon.png" />

Option 2: Precomposed Icon

Precomposed Apple touch icons are rendered with rounded corners, but without a gloss effect. To implement a precomposed icon, apply the following code into the head section of your website:

<LINK REL="apple-touch-icon-precomposed" HREF="/apple-touch-icon.png" />

With either option, your icon will need to be hosted online. This means that you will need to edit the code provided above and specify the correct path location of your icon (within the 'HREF' section). Also, you can only implement one of these options, not both.

The following is a side-by-side comparison of what each looks like:

How to Create an Apple Touch Icon for Your Website

Why Website Owners Should Use an Apple Touch Icon?

Hopefully I’ve been able to give you enough information to create and implement your own Apple touch icon. However, some of you are undoubtedly questioning why it is that you should want to create and implement one. Why not just use the default screenshot that Apple captures, right? I will tell you why not: design and branding.

Creating a Complete, Customized Design

Like most website owners, design is important to you. I imagine that you wish to control every aspect of how your website looks and functions. Let me start by saying that there is nothing at all wrong with this for I feel the same way. Creating an Apple touch icon will not only make users happy (because they won’t be subjected to seeing a lame, generic icon on their home screen), but also help you to provide a more complete, customized website experience through design.

Brand Development

I am a HUGE advocate for branding. Proper use of company and personal branding can have a long lasting effect on one’s ability to grow their business, whatever it may be. I strongly encourage all website owners, if given the opportunity, to tie-in their brand’s logo, color scheme, and messaging whenever possible. Creating an Apple touch icon is one of those opportunities.

Give it a shot. If not for design or branding purposes, create one to help brighten up other people’s iPod, iPhone, and iPad home screens.

Labels:

Share This Post!


34 Comments:

  1. Interesting. I'll try this application. Thanks a lot for sharing.
    By Anonymous Anonymous on September 07, 2012
  2. No problem! I'm glad to have helped.
    By Blogger Karl Ribas on September 07, 2012
  3. very cool indeed
    By Blogger Henry Aquino on September 13, 2012
  4. Thanks Henry!
    By Blogger Karl Ribas on September 13, 2012
  5. i will use it, thanks karl.
    By Blogger rattapol pattana on November 14, 2012
  6. Exactly what I was looking for - thanks!
    By Anonymous EP on December 26, 2012
  7. Great EP! I'm glad to have helped!
    By Blogger Karl Ribas on December 27, 2012
  8. Thanks.....
    By Anonymous Anonymous on January 13, 2013
  9. Yup, Yup.
    By Blogger Karl Ribas on January 14, 2013
  10. Is there a way you can test if it's working if you don't own any apple products?
    By Anonymous Kate on January 23, 2013
  11. If we don't implement any code but just host 2 images, can the user or the Apple app decide and still use the images?
    Would someone tell me if mine work or look OK please?
    (I won't spam here, but please see my account.)
    By Blogger Grant Barker on January 24, 2013
  12. Hey Kate, no... to my knowledge there is no way to know if it really works without testing on an apple device. Have a friend that can help you out?
    By Blogger Karl Ribas on January 24, 2013
  13. Hey Grant, we might need a little more info. You have several sites listed. Thanks.
    By Blogger Karl Ribas on January 24, 2013
  14. Hey this is cool! Thanks! It took me less than 10 minutes to create an icon, add the link code to my head tag and upload to my server. I'm NEW to i-phone so had to be told by a friend that this only works in Safari on the i-phone - not in Google Chrome.
    By OpenID susanreednet on January 28, 2013
  15. That's great Susan! I'm glad I could help, and I appreciate the feedback!
    By Blogger Karl Ribas on January 29, 2013
  16. like the idea of 1 icon and let the device do the resizing, not all have 'Apple' devices, will other phones do the resizing of this image or will i have to create individual sized icons
    By Anonymous Anonymous on February 03, 2013
  17. Thanks Karl, for sharing this great article!
    By Blogger Wouter van der Zee on February 04, 2013
  18. Thank you!
    By Blogger Karl Ribas on February 04, 2013
  19. Thanks, I was looking everywhere for this!
    By Anonymous Anonymous on February 15, 2013
  20. No problem. Thanks for dropping by!
    By Blogger Karl Ribas on February 15, 2013
  21. yeah, finally, I know what that code mean, thanks :D
    By Blogger Seto El Kahfi on February 21, 2013
  22. Hi Seto, no problem bud!
    By Blogger Karl Ribas on February 22, 2013
  23. Read it. Tried it. Love it. Thanks for sharing this easy tutorial!
    By Anonymous Anonymous on March 07, 2013
  24. Awesome! Thanks!
    By Blogger Karl Ribas on March 07, 2013
  25. I'm wondering if you might be able to assist me. I've been successful in creating this apple touch icon for our main website, however, it seems to take 8 seconds before it shows up when selecting the 'add to home screen' button in safari on the ipad. For most speedy users, this is not quick enough. I've tried to adding it to the home screen without waiting, to see if the icon on the home screen automatically updates with the 'apple touch icon' image, but it does not.

    Another issue I'm running into is I'd like to add this same icon to a password protected subdomain, but I'm having no luck and I don't know what else to try. If you can assist, I'd greatly appreciate it.
    By Blogger Jonathan Dornbos on March 08, 2013
  26. Hi Jonathan, I have seen a small delay, but not as your describing. Certainly not one that has been 8 seconds long. I'm wondering if this occurs on other devices... have you tested this with another iPad or iDevice?

    This is the first I've heard of Apple Touch Icons not working on a site that is password protected. It should work. My only thought is to ask you if the Apple Touch icon is being referenced from a place on your server that is also protected? I know this seems beginner 101, but you'd be surprised. Are you able to reach the image if you enter its URL in a browser?

    Sorry I couldn't be more helpful. Thanks for your comment!
    By Blogger Karl Ribas on March 08, 2013
  27. Thanks for the help... Just one thing though, I noticed I had to use a 114px x 114px size image and not a 129px x 129px image.

    Thanks again.

    G
    By Anonymous GlynnЯyan on March 16, 2013
  28. Thanks Glynn! I'm not sure why there was a need to change from 129px to 114px, but I'm happy that you got it to work.
    By Blogger Karl Ribas on March 18, 2013
  29. when anyone want to save this image as home screen then how to set the default file name? or what it takes the dafult file name?is it title of the site?
    By Blogger sanjib on March 19, 2013
  30. Hi Sanjib,

    Yes. The title of your site is used as the default name. However, the user has the option of changing it upon saving.

    Thanks!
    By Blogger Karl Ribas on March 19, 2013
  31. I'm a little late on this (I'm a Droid user), so thanks for the post! I'm going to create these asap!
    By Anonymous Ashley on August 02, 2013
  32. Do you add the link to all of your pages, or just to the home page? John
    By Anonymous Anonymous on September 23, 2013
  33. All pages.
    By Blogger Karl Ribas on September 23, 2013
  34. thank you ! your blog really helped me in fixing 404 error caused by missing apple-touch-icon
    By Blogger Unknown on January 21, 2016

Post a Comment