Apple Touch Icon Precomposed Not Found


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.


apple touch icon not found icon

  • /apple-touch-icon.png
  • /apple-touch-icon-precomposed.png
  • /apple-touch-icon-144×144-precomposed.png
  • /apple-touch-icon-144×144.png
  • /apple-touch-icon-114×114-precomposed.png
  • /apple-touch-icon-114×114.png
  • /apple-touch-icon-72×72-precomposed.png
  • /apple-touch-icon-72×72.png
  • /apple-touch-icon-57×57-precomposed.png
  • /apple-touch-icon-57×57.png

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.

me on google plus+Mike Otgaar

Advertisements

About Mike

Web Developer and Techno-geek Saltwater fishing nut Blogger

Posted on May 5, 2013, in Apple and tagged , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: