iOS Icon

Adding an iPhone/iPad Icon for Your Website

When the iPhone launched a few years ago with web apps as the standard way of getting to content, Apple introduced a way to specify an icon for the website to be used if a user chooses to bookmark it to the homescreen. Even though a lot of the previous web apps are now native apps instead, you can still add this icon on your website for users wanting to bookmark it.

Creating the icon file

You can use any graphics application to create an icon of your choice. The beauty of the icon is that you do not have to think about the glossy finish or the rounded corners, effects which iOS automatically applies.

The only thing you need to consider (apart from the artwork itself) is the size of the icon. As Apple has introduced the iPad and also the more high-res iPhone 4, there are now a variety of icon sizes you can use:

  • Standard iPhone: 57×57
  • For the iPad: 72×72
  • Optimized for iPhone 4: 114×114

Another thing to consider when designing is that you can if you wish choose not to have iOS add any effects at all to your icon. This is done by appending the -precomposed suffix to the file naming (see the file naming section).

The icon support was introduced in iOS 1.1.3. Support for precomposed icons were added in iOS 2.0. Different device resolution support for icons is available from iOS 4.2 and later.

Naming the file

By default, iOS will search your website root to see if it can find icons saved with the proper naming, that is unless you have specified the icon in the HTML code (see below).

Basic Format
The standard and basic format, if you are only using one icon, would be to save your file with the name apple-touch-icon.png and upload it to the root directory of your site. Should you want to apply your own styles and you want to tell iOS not to add its default styles, append -precomposed like this: apple-touch-icon-precomposed.png.

Device Specific
If you want to create an icon that looks best on each device (which I would recommend you doing), then you can add in the size in the file name as following:

  • apple-touch-icon-57x57.png (standard iPhone)
  • apple-touch-icon-72x72.png (standard iPad)
  • apple-touch-icon-114x114.png (iPhone 4)
Important! All of these files must be uploaded to the root of your website in order for iOS to recognize them, unless you specify the icon in the HTML source.

Specifying the file in the HTML

If you want to name the icons according to your own wish or upload them into a specific directory or perhaps even more useful, use different icons for different pages on your site, you should tell iOS where to look for the icon in the HTML source.

To do this, you need to add a little bit of code in the section of your website.

One icon only
If you want to have one icon for the entire site, regardless of device and resolution use this code (replacing /your-icon-file.png with the proper path to your icon):

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

Should you rather want iOS not to add the default styles to the icon, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.

Multiple icons for different resolutions (recommended)
Adding multiple icons optimized for the different resolutions of the iOS devices (which again I recommend), just requires a few extra lines of code:

<link rel="apple-touch-icon" href="icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" />

When there is no sizes attribute set, it will default to 57×57 which is why it is left out in the first example.

Your icons can be named exactly what you want to name them as this does not affect their display as long as they are appropriately referenced in the code.

As with previous examples, if you don’t want iOS to apply the default effects, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.

Tags: , , , , , ,

About

Erik is the owner of online media company Bernskiold Media that runs tutorial website Bernskiold learning and he is a Web Designer, Photographer and Software-Trainer.

57 thoughts on “Adding an iPhone/iPad Icon for Your Website

  1. Super Erik!!
    I really appreciate your effort!
    If you ever come across a way to make an icon for the Blackberry.. Please, keep me in mind!!!

    Thnaks again an have a good weekend!

    Esther

  2. Pingback: Tips and Tricks for iOS Web Development at Bernskiold Learning

  3. I’m wondering,
    you wrote 144×144 in the icon name (for the iphone4)
    and 114×114 in the html code part.
    Which one is correct?

  4. i added the html code and it works; but it shows the code in the website. in what section of the html do i add the code so it won’t show up in the “view” mode? Help, thanks

    • In the example code provided, you probably need to convert the html entities to actual characters. The ampersand g t semicolon should be a single greater-than character. Likewise, ampersand l t semicolon should be single a less-than character.

      Example (not sure if I can embed code here, but I’ll try):
      < (& l t ;) should be

  5. Please help me. I will create an icon for my webpage to be able to download on any Iphone, in what part Do I add the URL to my website, once is done. Would I be able to download this link on my cellphone to get immediate access to my webpage URL. my website is http://www.coverwindows.com, give an example so I can work on it. Please reply this way. THANK YOU!

  6. What is the importance of Apple icon from SEO prospective? I think there is no advantage. Is’t it? And if we add this icon, what difference will be there when site will be open on a apple device?

    • Same to me too. I never know about adding Apple icon and seo report site reported me about this. Yeah, but i want to know the reasons why we need to add this icon. How much will my site improve after do this? If it improve very much, I will prepare 3 sizes icons for that.

    • Yeah, I was directed here from woorank as well. Being that Apple have no market share in search Engines it is obvious the SEO’s there don’t have much of an idea so they include EVERYTHING… just to be sure.

      I actually read a SEO guide that was released a couple weeks ago (different site) where the author claimed that you should always register websites for the longest period possible..eg.5 years, as Google can test how long until the domain expires and they don’t want websites that aren’t committed to the long term ranking on their engine.

      Seriously, what a joke. Most small businesses and even large corporations simply pay a hosting company who charges annually. Unfortunately there is very few SEO’s who actually have any brains and know what they are talking about.

  7. Ok, so… I want to use one icon for all apple mobile devices, which size should it be than? 114×114? Can older devices display this? Or should I use the “first” one (57×57)?

    Thanks!

  8. Pingback: WooRank for koplus.eu | ??????

  9. The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you’re reading is “thesitewizard.com”. To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It’s just a name. It’s sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name.^

    Head to our very own blog page too
    <"'http://www.prettygoddess.com/

  10. Pingback: 12 consejos para mejorar el posicionamiento seo de tu web | Posicionamiento Web Madrid

  11. Woah this specific blog page is great i prefer understanding your site content. Keep within the great artwork! You are aware of, many people want around due to this data, you’ll be able to encourage them to drastically.

  12. The pots nest together for quick and easy storage, saving
    valuable cabinet space. The Ridge-It is a permanent fall protection roof
    anchor designed to install easily and discreetly with the option to provide an access point on each side of the roof.

  13. Pingback: ????????? ?????? ????? ??? iOS iPhone iPad

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>