On the FSFE web hackers mailing list there was some confusion about the meaning and implementation of the <link rel="apple-touch-icon-precomposed" /> tag.
The Standard
By its very nature, HTML5 allows for meta-information to be embedded in the document. This can contain a wide range of information like copyright credentials, publication times, validity periods, and many more. Apple (the computer company from the United States) used a tag to indicate an image resource for use as a home screen- and favorite icon for their tablets and other touch devices. This turned out to be easy to implement. The standard was open, compliant and free. So eventually, lots of people were using it, and Android devices now also know how to deal with these tags and their icons.
So, even though Apple created the touch icon standard, and implemented it for use with iPads and iPhones, now most Android devices (namely those from 2.1 on) support the touch icon. This article: “Getting Android to Recognize Apple Touch Icons” explains how. There are some simple requirements, but they’re all handled in the article.
Closed standard? Not really!
There was talk about this being a closed standard, or some endorsement for non-free software. The argument was that if someone were to browse the source code of the FSFE-website, they might get the wrong impression from the presence of the <link rel="apple-touch-icon-precomposed" /> tag. This talk about the touch icon being some kind of closed standard is simply untrue. The standard consists of a standards-compliant HTML tag combined with one or more PNG files. For those of you who don’t know: PNG is an open file format. I really fail to see the closed standard in that.The fact that Apple produces closed-source non-free software should not restrict the use of an open and free standard by their hand. It just happens to be named after the company. A company which also contributes code to WebKit, but apparently nobody considers calling the standard ‘free’ because of that. That’s inconsistency right there, people.
And before you all start about the HTML-tag not being standards compliant —because you dumped it in the W3C-Validator and it didn’t pass— please read this part of the HTML5 specification “4.2.5.2 Other metadata names” first.
All in all, there’s a lot of F.U.D. being spread here to no real avail. I really don’t like that. Knowledge should always trump gut-feeling. Even though you feel Apple is evil, be composed and rational about it. Taking away freedom from people is its own argument, you really don’t need to also become some zealous nutbag to drive the point home.
My code suggestion
My code for this block is as follows:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="shortcut icon" href="img/favicon.ico" />
Note: The loading order of these icons is important, since it gracefully degrades along with compatibility of the device.
Also note: The missing ‘sizes’ attribute in the last touch-icon ‘rel’ tag, that is for compatibility with older iPhones:
