Knowledge Base Overview

It was quiet in my log files for quite some time but recently I see more and more of these error requests for various types of png image files containing some apple-touch-icon string in their names. Time for some digging and what this is all about.

Apple mobile devices

One thing seems to be clear. According to the names it has something to do with Apple's mobile devices. Also looking at the User Agent string in the requests indicates that it is related to mobile devices. However, for some unknown reason I also have some Android devices in between. However, with these requests the browser seems to be Apple's Safari mobile browser for Android although I could not find this browser for installation on my Android phone. Well, never mind that's not important for our discussion here.

Now the picture gets clearer that all is related to Apple's mobile browser Safari but the final information can be found somewhere else.

Web Applications for Apple

Search for information at Apple's websites is not that easy but I came across the iOS Developer Library which is primarily about writing native applications for their mobile devices.

You have to do quite some digging in this library and it is not listed under the regular menu but there is a Safari Web Content Guide. Within this guide we will find a chapter labeled "Configure Web Applications" and the first document is Specifying a Webpage Icon for Web Clip and this is the answer for our apple-touch-icon images.

So, Apple uses these icons for what they call Web Clip.

What is Web Clip

So our new question would be about this Web Clip thingy. The Web Clip is labeled as a feature but we will see it is more than that. This Web Clip feature is available for quite some time and since iOS 4.2 for different device resolutions.

A Web Clip is basically what we have or know in Windows as an icon for links. We can add an icon to a shortcut link or an application provides its own set of icons, often in a dll file. In iOS (as the mobile operating system) and hence on your Apple mobile device all the images for your app buttons are called Web Clips.

When you go to your App Store and install an app from there the application will have this Web Clip. Additionally you can also add a link for a webpage to your Home Screen. For this webpage/app link the Safari browser will look for these png files on your website.

If you are in your web browser on your Apple mobile device and click the link symbol at the bottom you will see the "Add to Home Screen" button. When you click this option you have a link on your screen to this webpage.

Image formats

Now lets look and talk about the format for this images for the Web Clips. There is three things we have look at: the image size, name and location.

Image size

The default size for a Web Clip is 57x57 pixels but as mentioned above there is support for different sizes. There seems to be two other standard sizes whit one being a 72 pixel square and the square is 114 pixels. Looking at document and information we see for these two squares it gets a little weird. Apparently the 72 pixels square is for the iPad while the 114 pixels square is for iPhone4.

There is also this Custom Icon and Image Creation Guidelines document in the same library and here we get some more information about the actual sizes. In Table 8.1 we look at the first row for "Application icon (required for all apps)".

• iPhone and iPod touch (regular display) 57 pixels
• iPhone and iPod touch (high-res display) 114 pixels
• iPad (regular display) 72 pixels
• iPad (high-res display) 144 pixels

Hence we have one more size which is the 144 pixels square. The High-Resolution definition is the other word for what is known as the Retina display.

Image names

For the names we have to either work with the defaults or we set our own definition. Lets see the defaults first and another funny definition—precomposed.

If you prepare a perfectly square image then iOS will add rounded corners and a drop shadow to the image. However you can create, i.e. style your own Web Clip and then the iOS will not add any effects to the icon. These images have to be labeled as "precomposed".

These indicates that we can (or must) have two images files for basically every image size. That would be 8 images but according to the documentation the scan should only look for 4 file names. Following is what we will end up with

• An option for the size
  apple-touch-icon-57x57-precomposed.png
  apple-touch-icon-57x57.png
• The default image names
  apple-touch-icon-precomposed.png
  apple-touch-icon.png

So, how do we have to define the other dimensions? That would be where the location comes into place.

Image location

The default location for the images is the root of your web server. Depending on the setup of your web server this could be tricky or maybe you don't even have proper access or rights to add the images to this location.

The only valid option here is to add a link element with this information to the document head on your webpages. In a perfect world you will identify the USER_AGENT string first and add this meta tag only for the appropriate requests and not just as a default to every request you get to your website.

The link element will have rel attribute name "apple-touch-icon" with a href attribute and a path information. Plus you can add the size here to provide more information for the use of the image. This would all look something like this in your document's head:

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

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

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

As you can see here you could use any name and path as the location but you have to provide the appropriate information with multiple link elements in your document head.

Personally I still don't know what to think of it but Apple seems to really give a damn about web designers and developers. To some degree it's nice to have this option but not everyone is surfing our site with a iPhone or iPad and yet we have to set up and design our websites to make it work just as if.