2014-07-28 Apple Touch Icons
Lots of boring details about Apple Touch icons.
Apple touch icon
Apple iPad and iPhone users can save a website bookmark to their home screen. The icon used for that bookmark is called the Apple touch icon. How good that icon looks depends on the website's support for Apple touch icons.
When the user creates this bookmark, the website receives a request to provide an Apple touch icon.
When the website provides that Apple touch icon, iOS uses it and all's well.
The problem is what happens when the website does not support Apple touch icons.
When iOS does not receive an Apple touch icon in reply to its request,
it does not fall back on the site's favicon and scale that as best as it can.
It makes a tiny screenshot of the home page and uses that instead.
Depending on how your site looks, that screenshot may be pretty recognisable,
but it would nice if the bookmark used your site's logo instead.
When iOS does not receive an Apple touch icon in reply to its request, it does not fall back on the site's favicon and scale that as best as it can. It makes a tiny screenshot of the home page and uses that instead.
PNG
The Apple touch icon is an image in PNG format. It is important that the image be in PNG format. An icon in JPG format may seem to work for a while, but don't be surprised if it the entire icon turns black later. Apple iOS expect a PNG file and that is what you should provide.
base and precomposed
The customary name for a single large size Apple touch icon is apple-touch-icon.png,
but, depending on version, iOS may look for two images, a base image and a precomposed image.
Typically, the precomposed image is the same as the base image, but with a several effects applied to it.
Apple iOS adds three effects to the base touch icon to create the precomposed touch icon:
- rounded corner
- drop shadow
- gloss effect
iOS versions
You can provide just the base image, and let Apple iOS create the precomposed image, or provide the precomposed image yourself, to have full control over these effects. Thus, you can even prevent the gloss and shadow effects, by simply providing the same image twice as both the touch icon and the precomposed touch icon.
The ability to control the gloss and shadow effects by specifying a precomposed icon was added in iOS version 2.
Apple iOS version 1 will always applies these effects.
Apple iOS 7 does not do the gloss effects and drop shadow anymore, and therefore does not need precomposed touch icons either.
Apple iOS version 7 only ever uses the base image.
The need for precomposed icons to control the effect only applies to earlier versions.
rounded corners
Like earlier versions, Apple iOS 7 still renders the touch icons with rounded corners. All versions of Apple iOS will always render all touch icon with rounded corners.
The rounded corners are no issue for round logos, like the Gaenovium logo shown below,
but are an issue for square logos, like the one used for this website.
That is something to keep in mind when you create your images, and to test, as those two screenshots show.
There was what I thought to be a nice margin around the original logo.
The logo looks fine in a square display area, but once the corners get rounded off, the margin is too small;
the rounded corner end up hiding the tips of the logo, and the result looks a bit awkward.
Resize the logo, to provide a bigger margin, and the Apple Touch icon ends up looking just fine.
specifying the touch icon
Originally, you'd specify an Apple touch icon for your site like this:
<head> ... <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> ... </head>
Notice that Apple does not use the standard link rel="icon"
nor the backwards compatible link rel="shortcut icon",
but uses their own, touch icon-specific rel="apple-touch-icon" .
Apple clearly does not care about your favicon, and want you to think of the Apple Touch icon as a separate thing. It is understandable that Apple wants to avoid scaling up a 16×16 to 57×57 or more, and would rather show a tiny screenshot of the home page instead, but the Apple Touch icon does have the same purpose as a favicon; to visually identify your site in an icon menu.
Apple iOS 2 added the ability to specify a precomposed touch icon instead of the base touch icon, like this:
<head> ... <link rel="apple-touch-icon-precomposed" href="/icon/apple-touch-icon-precomposed.png"/> ... </head>
Of course, because Apple iOS 1 does not recognise the "apple-touch-icon-precomposed" value,
you should specify both the base touch icon and the precomposed touch icon:
<head> ... <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-icon-precomposed" href="/icon/apple-touch-icon-precomposed.png"/> ... </head>
iOS versions
Apple iOS version 1 and 2 react differently to that code.
Apple iOS version 1 only recognises the "apple-touch-icon" value,
uses the apple-touch-icon.png image, and applies the aforementioned effects to create a precomposed touch icon for display.
Apple iOS version 2 recognises both the "apple-touch-icon" and the "apple-touch-icon-precomposed" value.
Presented with both a base touch icon and a precomposed touch icon,
iOS 2 ignores the base touch icon and uses the precomposed touch icon.
Apple iOS 7 does not do the gloss and shadow effects,
so it ignores the icon specified by rel="apple-touch-icon-precomposed"
and always uses the icon specified by rel="apple-touch-icon".
Two somewhat interesting side notes are that several version of Android will take advantage of Apple touch icons if present, and that one particular Apple touch icon size, 144×144, is also the size used for Tile Images in Windows 8.
Apple's current documentation reflects the guidelines for iOS 7.
It does not mention the ability to specify a precomposed icon through rel="apple-touch-icon-precomposed".
touch icon sizes
You can use the above code together with two images, a base image and a precomposed image. That will work. However, if you are bothering to provide Apple Touch icons at all, you probably want to do it right, and that means providing the icon in multiple sizes.
Apple touch icons come in several sizes.
The icons for iPads are about about 25% larger than the icons for iPhones.
the icons for iDevices with a retina display are twice as big as those with a standard display.
If iPhone versus iPad and standard display versus retina display were the only two factors determining icon size,
there would be four different icon sizes.
However, all the recommended icon sizes changed with the introduction of iOS 7 on 2013 Sep 18.
There are eight different Apple Touch icon sizes now:
Web sites that support Apple Touch icons have to deal with eight different Apple Touch icon sizes.
| display | iPhone | iPad |
|---|---|---|
| standard display | 57×57 | 72×72 |
| retina display | 114×114 | 144×144 |
| display | iPhone | iPad |
|---|---|---|
| standard display | 60×60 | 76×76 |
| retina display | 120×120 | 152×152 |
Apple documentation
Once again, Apple's current documentation only reflects the sizes recommended for iOS 7. Apparently, Apple already considers iDevices that cannot run iOS 7 obsolete. By omitting information relevant to earlier versions of iOS, Apple is actively encourage developers to treat those devices as obsolete.
web sites
Regardless of how much sense it makes for iOS apps to ignore older iOS versions,
it does not make much sense for web sites to do so.
Older iDevices that cannot be upgraded to the latest and greatest version of iOS
are still perfectly capable of running a web browser,
and if a user bookmarks your site on their home screen, you'd like your touch icon to look good.
Web sites that support Apple Touch icons have to deal with eight different Apple Touch icon sizes.
transparency
Apple Touch icons support transparency. All icon images should be 24-bit colour with an 8-bit alpha channel. There are different ways of specifying transparency in PNG, and a problem I encountered using transparent PNG may or may not be related to that.
I had considered making Apple Touch icons for this site for a long time, but did not think it very important, and never got round to it. About two months ago, Bob Coret and I decided to start Gaenovium, the Genealogy Technology Conference, which we announced just a few days ago. Among a long list of items on the wish list was Apple Touch icons for the Gaenovium website, and that's how I finally got round to doing Apple Touch icons for my own site as well.
I first tried a Gaenovium logo with a transparent background, and the background turned out to be black. I did not feel like figuring what went wrong exactly, and decided to provide a consistent user experience by side-stepping the issue, specifying a light-grey instead of a transparent background.
16 images?
If you provide both a base and a composed image for each of the 8 icons sizes, you end up with 16 images in total. Specifying all of them looks like this:
<head> ... <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57-precomposed.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60-precomposed.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png"> ... </head>
That is a lot of vendor-specific baggage. However, you do not need all these images.
Apple iOS 7
Apple iOS 7 does not use precomposed images, so there is no need to provide precomposed versions of the 60×60, 76×76, 120×120 and 152×152 images:
<head> ... <!-- iOS 1 - 6 --> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57-precomposed.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- iOS 7 --> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> ... </head>
Apple iOS 2 - 6
Apple iOS 2 through 6 will use the precomposed image if present, so there is no need to provide a base image:
<head> ... <!-- iOS 1 --> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <!-- iOS 2 - 6 --> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57-precomposed.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- iOS 7 --> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> ... </head>
Apple iOS 1
Although it is reasonable to ignore Apple iOS, the above code snippet includes support for Apple iOS 1 for completeness' sake. The Apple Touch icon size for Apple iOS 1 is 57×57. Apple iOS 1 runs on the original iPhone. Apple iOS 1 does not support iPads or retina displays. The original Apple Touch icon size is 57×57, and that's the only Apple Touch icon size that Apple iOS 1 supports.
just one icon
Although providing each individual images size is best, you do not need to do. It is possible to get away with supporting just the largest Apple touch icon size, and let iOS scale that image down for devices that use smaller touch icons. The largest icon size is 152×152, so code for providing touch icon support with just one image could like this:
<head> ... <link rel="apple-touch-icon" href="/icon/152x152.png"/>
<link rel="apple-touch-icon-precomposed" href="/icon/152x152.png"/> ... </head>
The code in the above example references images in the icon directory,
which contains images that been given names that reflect their pixel size.
The code specifies the same image for both the base touch and the precomposed touch icon,
to serve the same image to all versions of iOS, and prevent iOS 2 through 6 from adding a drop shadow and gloss effect.
This code will work, but not as well as it could. It is fine to provide a precomposed icon to prevent iOS 2 through 6 from adding a drop shadow and gloss effect, but it is not so fine to serve iOS 2 through 6 the max icon size of iOS 7.
the base-152×152 precomposed-144×144 two-image approach
The problem with the above code, using just one image, is that size of the precomposed touch icon is wrong.
Apple iOS 7 will always use the base touch icon,
while iOS 2 through 6 will always use the precomposed touch icon.
Apple iOS 1 can safely be ignored.
The base icon should be 152×152, the maximum icon size supported by iOS 7,
while the precomposed touch icon should be 144×144, the maximum icon sized supported by iOS 6
The code for providing two different icons looks like this:
<head> ... <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png"/> ... </head>
In the the base-152×152 precomposed-144×144 two-image approach,
the file specified for rel="apple-touch-icon" should be 152×152,
and the file specified for rel="apple-touch-icon-precomposed" should be 144×144.
However, it is not necessary to include their size in the file names.
You may use file names that do not include the image size as part of the name:
<head> ... <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/> ... </head>
Using the base-152×152 precomposed-144×144 two-image approach, the touch icon for your website will look sharp on every iPad.
how it works
This two-image approach I came up with works remarkably well for an ecosystem that use eight different image sizes; this two-image approach not only saves some bandwidth, it also makes your icon look good on every iPad.
Apple iOS version 1 looks for a base icon, and ignores the precomposed icon. It find an image of 152×152 pixels, while it only needs an image of 57×57 pixels. That takes a bit more bandwidth and memory, but it works, and that's pretty good.
The largest touch icon size is the size for a icon on a iPad with retina display. The icon size for an iPad with standard display is exactly half that, so that scales perfectly. The 152×152 base touch icon is perfect for iPads running iOS 7, while the 144×144 precomposed touch icon is perfect for iPads running iOS 2 through 6. Using the base-152×152 precomposed-144×144 two-image approach, the touch icon for your website will look sharp on every iPad.
With just two images, the Apple touch icon looks sharp on every iPad, but it won't look sharp on every iDevice. To wit, on an iPhone, the icon will be scaled down, and look suboptimal. Then again, using the small screen of a phone to browse the web is suboptimal anyway, and because the provided image is considerably larger than the desired size, it will still look pretty good.
files
file names
The file names used in most of the code above are no accident. These are more than customary files names, these are files names names that Apple iOS looks for.
Apple iOS requests
When you specify the Apple Touch icon in the HTML header, Apple iOS will use the specified Apple Touch icon, whatever directory or file name you used.
When you do not specify the Apple Touch icon in the HTML header, Apple iOS does not give up.
Instead, it sends a request for the desired image to the web server anyway.
For example, Apple iOS 7 running on an iPhone with a retina display will request the file apple-touch-icon-120x120.png,
while Apple iOS 6 running on a iPad with a standard display will request apple-touch-icon-72x72-precomposed.png.
More precisely, Apple iOS 7 running on an iPhone with a retina display will first request the file apple-touch-icon-120x120.png.
and if it receives HTTP status code 404 (Not found), it will request apple-touch-icon.png.
The behaviour of Apple iOS 2 through 6 is a bit more complex.
Apple iOS 6 running on a iPad with a standard display will first request apple-touch-icon-72x72-precomposed.png,
and if it receives HTTP status code 404 code, it will request apple-touch-icon-72x72.png,
and if it receives HTTP status code 404 code again, it will try apple-touch-icon-precomposed.png and apple-touch-icon.png,
in that order.
Only when Apple iOS fails to find any Apple Touch icon, will it make a tiny screenshot of the home page and use that as the icon for your website.
server log
This Apple iOS behaviour explains why you may find HTTP status code 404 (Not Found)
for an infrequent, but continual stream of requests for non-existing files with names such as
apple-touch-icon-precomposed.png, apple-touch-icon.png; Apple iOS is looking for an Apple Touch icon.
You don't need to fix this. There is nothing to fix.
The server is responding, quite correctly, that it does not have the file that Apple iOS hopefully requested.
That request is legal and the response is correct.
Your web site does not need to support Apple Touch icons.
Your web site work just fine without it, and Apple iOS can manage without it.
However, if you are like me, you not only want the like Apple Touch icons for your site to look better than a tiny screenshot,
you also want to get rid of server log errors
that are just noise, so you can focus on real issues.
no code, just files
Apple iOS will request the Apple Touch icon files it needs, using standard filenames. The very practical upshot of this Apple iOS behaviour is that you do not need to provide any code in the HTML header. You only need to provide the correctly named files in the root directory of your website. You can choose between two-image set or a perfect Apple iOS Touch icon files.
Two-Image set of Apple Touch icon files
This two-image set is not perfect, but a lot better than not having Apple Touch icons at all,
and because it requires just two images, fairly easy and quick to implement.
Together, the two images serve all Apple iDevices.
Apple Touch icons will look perfect on all iPads, but slightly less than perfect on iPhones.
It will waste bandwidth on all iDevices except iPads with retina displays, because the image is larger than needs be.
Depending on the Apple iOS version, Apple iOS may also need two or three requests before finding one of these two files.
Having these two files present reduces the number of HTTP status code 404 cause by Apple Touch icon requests,
but does not eliminate them.
| OS version | size | filename |
|---|---|---|
| iOS 2 - 6 | 144×144 | apple-touch-icon-precomposed.png |
| iOS 7 & iOS 1 | 152×152 | apple-touch-icon.png |
Read on to find out why, if you don't care much about perfectly matching today's iPads,
you may want to use an larger image size for apple-touch-icon.png
(but not for apple-touch-icon-precomposed.png).
Perfect Apple Touch Icon Files Set
The following set of files provides just the right image to just the right iDevice, for Apple iOS 1, Apple iOS 2 through 6, and iOS 7.
This approach is preferable for high-traffic sites, and because its provides the best looking Apple Touch icons.
Server load is minimised.
There is no superfluous HTML code.
Apple iOS gets exactly the right image, no smaller than it should be, no larger than it need be.
Because Apple iOS immediately gets the image file it likes best, it will not other the server with additional requests.
Perhaps best of all, because the iOS-desired file exists,
requests for Apple Touch icons no longer produce HTTP status code 404 and a log entry.
| OS version | size | filename |
|---|---|---|
| iOS 1 | 57×57 | apple-touch-icon.png |
| iOS 2 - 6 | 57×57 | apple-touch-icon-57x57-precomposed.png |
| 72×72 | apple-touch-icon-72x72-precomposed.png | |
| 114×114 | apple-touch-icon-114x114-precomposed.png | |
| 144×144 | apple-touch-icon-144x144-precomposed.png | |
| iOS 7 | 60×60 | apple-touch-icon-60x60.png |
| 76×76 | apple-touch-icon-76x76.png | |
| 120×120 | apple-touch-icon-120x120.png | |
| 152×152 | apple-touch-icon-152x152.png |
Future-Proof Apple Touch Icon File Set
The two-file approach is not perfect, but it has one important advantage over the the nine-file perfect set of Apple Touch icon files; it will continue to serve all iDevices even when Apple decides to changed to recommended icon sizes again.
That's why it makes sense to combine the Perfect Apple Touch Icon File Set for today,
with the future-proofing provided by including apple-touch-icon.png,
the fallback filename that doesn't have the image size in the filename:
| OS version | size | filename |
|---|---|---|
| iOS 2 - 6 | 57×57 | apple-touch-icon-57x57-precomposed.png |
| 72×72 | apple-touch-icon-72x72-precomposed.png | |
| 114×114 | apple-touch-icon-114x114-precomposed.png | |
| 144×144 | apple-touch-icon-144x144-precomposed.png | |
| iOS 7 | 60×60 | apple-touch-icon-60x60.png |
| 76×76 | apple-touch-icon-76x76.png | |
| 120×120 | apple-touch-icon-120x120.png | |
| 152×152 | apple-touch-icon-152x152.png | |
| iOS future (& iOS 1) | 152×152 | apple-touch-icon.png |
This 10-file set includes a perfect set of icons for both iOS 2-6 and iOS 7,
and the future-proof fallback provided by apple-touch-icon.png;
if Apple decides to start using additional Apple Touch icon sizes,
this set may no longer offer the perfect size, but still offer an Apple Touch icon.
When a future request for say apple-touch-icon-128x128.png in say Apple iOS X fails,
Apple iOS X will request apple-touch-icon.png, receive and then use that image.
That image may not be the perfect size, and may even be smaller than desired, but at least there will be an icon.
In the above table, the size of apple-touch-icon.png is listed as 152×152,
simply because that is the largest Apple Touch icon size today.
However, when you consider that this file is not included for today's devices,
but is only present as a future-proof fallback,
it makes sense to use a larger image size of say 192×192, 256×256 or 304×304.
Upgrading this set of icons to the new standard can be done in two steps;
first upgrade to apple-touch-icon.png to whatever the new largest size is as a quick improvement,
then add all the specific sizes desired.
If you so desire, the third step is to once again increase the image size of apple-touch-icon.png beyond the current sizes.
Notice that apple-touch-icon-precomposed.png is not included in this set.
The precomposed images are only needed for Apple iOS 2 through 6, and this set already contains perfect matches for those versions.
Apple has deprecated the precomposed icons and it is unlikely that Apple will decide to start using precomposed icons again.
This set is suboptimal for Apple iOS 1, but that's OK, because Apple iOS 1 is obsolete.
However, if anyone is still using it, Apple iOS 1 will request and receive apple-touch-icon.png.
That's an 152×152 image instead of an 57×57 image, which Apple iOS will scale down;
it is a small waste of bandwidth and device memory, but it works just fine.
final note
I readily admit than when I first created a set of Apple Touch icon files, I simply created eight images in the eight different pixel sizes used,
and then copied those files to create identical -precomposed image files,
and finally added both apple-touch-icon.png and apple-touch-icon-precomposed.png as fallbacks.
Once I had those eighteen files, I copied them to the server's root directory.
That fairly straightforward approach did not require much thought about which files were needed and which ones were not.
All those files are still there. Some of these files will never be used. They take up a little disk space, but that's all. They do not tax the web server or any iDevice. The superfluous files are merely superfluous. The necessary files are there, so it works just fine.
links
- Gaenovium
- W3C: How to Add a Favicon to your Site
- Microsoft: The IE6 Countdown
- MSDN: Customizing the Site Icon
- IEBlog 2012-04-03: Pinned Sites in Windows 8
- IEBlog 2012-06-08: High Quality Visuals for Pinned Sites in Windows 8
Copyright © Tamura Jones. All Rights reserved.