Apple Touch Icon Precomposed Not Found
Posted by Mike
Apple Touch Icon 404 Errors
Are you seeing 404 errors for a range of image files called apple-touch-icon.png and apple-touch-icon-precomposed.png with a range of size attributes and wondering where these are coming from?
No, it’s not a WordPress plugin conflict or bug as some ‘Pressers have believed. It’s bad behaviour by Apple devices – iPhones and iPads. These devices look for these dedicated icons by default, instead of looking for the apple-icon link in page header, and using the normal favicon if the link isn’t found. It’s annoying, unnecessary, and easily resolved (and a waste of valuable time).
The issue becomes more complicated as Apple devices now look for a range of icons in several sizes
With the iPad (3rd generation) there are now four icon sizes 57×57, 72×72, 114×114, 144×144.
Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons: 114 x 114 and 144 x 144. By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly.
Fixing the Missing apple-touch-icon.png Error Message
404 errors are annoying. You’ve made a lot of effort to limit these broken links on your site, and then you start getting 404 page not found errors for something that has never existed on your site..
The easiest fix is simply create a suitable apple-touch-icon, and copy and rename it using the names above. If you feel energetic, you can create a whole set of these in all the various sizes, and even use different icons in each case – maybe a picture of a wormy apple is appropriate for bad behaviour 🙂 Once the icons are ready – upload them (FTP) to the root folder of your blog or website (often called public_html)
apple-touch-icon Meta-tags in Head
Strictly speaking, one should add some meta tags to the page <head> section. See the links at the end of this article for more information on apple-touch-icon meta tags.
There’s even a plugin for self-hosted WordPress sites – Multicons which adds the meta link to the content. Theoretically, this should allow the use of a single icon. Multicons doesn’t (yet) include the markup for all the different sizes however, and is another plugin to add load to the server.
apple-touch-icon Meta tag Information
- iOS Developer Library (developer.apple.com)
- apple-touch-icon sizes (stackoverflow.com)
- Everything you always wanted to know about touch icons (mathiasbynens.be)