Apple Touch Icon for Websites

Why use <link rel=apple-touch-icon image_src ...>?

iOS has a concept of "Web Clips" for Web sites and applications. There are two main front-facing parts to an iOS Web application's presence on an iOS device: its Home screen icon (or the Web Clip icon), and its startup image. These are represented by apple-touch-icon and apple-touch-startup-image respectively.

The main differences between traditional favicons and Home screen icons are:

• Home screen icons are of a higher resolution. Even the smallest possible icon size, 29x29, is larger than the traditional favicon size, which is 16x16. Favicons in ICO format can have hi-res alternatives, but they weren't very well supported at the time iOS introduced Web Clips anyway.

• iOS prior to 7 would apply a gloss effect to icons by default to make them look at home on a Home screen. To give developers the option of turning this effect off Apple provided another possible value, apple-touch-icon-precomposed. Of course, in iOS 7 these effects are no longer ever applied, but that's how it was previously.

Since Home screen icons are so fundamentally different from favicons, it doesn't make sense to try and make existing shortcut icon schemes work on iOS. Hence, apple-touch-icon (and apple-touch-icon-precomposed).

And of course, following the introduction of the iPad and the Retina display (and a combination of both), Home screen icons now come in all sorts of sizes. Now that Apple has its own icon type to work with it can simply introduce its own sizes attribute for supplying different icon files for different sizes.

More details about Web apps in iOS can be found in the Safari Web Content Guide, particularly the section Configuring Web Applications.

apple-touch-icon for MacOS chrome web apps

I had given up looking for an answer or understanding how it all works, but I accidentally found that if you declare an icon of 128x128 size it overwrites the apple-touch-icon on MacOS (OS X).

I haven't found this documented anywhere.

As I understand the AppleTouchIcon in the end only works for Safari. Google Chrome and Edge follow the standard specification of WebApps.

<link rel="icon" type="image/png" href="icon2.png" sizes="128x128">

As you can see in the image above the icon has rounded edges, it wasn't perfect like the native apps but it was the way I expected.

How to get the apple touch icon from a site and if it doesn't exist then show favicon?

You can just set the url of an image to the touch icon url, and use the onerror event to change it to the favicon url.

function getImage(url) {
    image.src = url + "/apple-touch-icon.png";
    image.onerror = function() {
        image.src = "https://plus.google.com/_/favicon?domain_url=" + url;
    }
}

Demo (remember to include http:// before urls in the input box)

However, some websites use a url other than "apple-touch-icon.png", so you may want to use multiple error functions in order to always get the apple touch icon.

Also, some websites (like google) return a 1px x 1px image for images that don't exist, meaning this won't work.

Does the apple touch icon have to be in the root folder?

Not necessarily. From the Safari Web Content Guide, the Configuring Web Applications section states:

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder
  called apple-touch-icon.png

• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as
  in:

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

• To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute
  to each link element as follows:

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

  • <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

  • <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

  • <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

The icon that is the most appropriate size for the device is used. If
no sizes attribute is set, the element’s size defaults to 60 x 60.

You should be able to place it in another folder and use the link elements to refer the browser to the alternate location of the apple-touch-icon file, and have it work just fine.

---

Related Topics