4

Mobile Safari requires the use of the following incantation for favicons of a higher resolution than the traditional 16x16:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="apple-touch-icon" sizes="158x158" href="my-new-158x158-icon.png" />

However, Firefox requires the use of the HTML5 syntax, e.g.:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

Now, my expectation is that it should be possible to combine these into a single line, as follows.

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon apple-touch-icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

Does anyone know of any problems with this? We all know things are rarely this simple, and I don't have an iOS device to test against, let alone all the other devices out there that have no-doubt copied the Apple syntax.

unor
  • 92,415
  • 26
  • 211
  • 360
mavit
  • 619
  • 6
  • 13

1 Answers1

2

This solution is very promising. Unfortunately, it does not work.

I have just tried with an iPad Mini, running iOS 7.0.4 and Safari with the following code:

<link rel="icon apple-touch-icon" type="image/png" sizes="57x57" href="/apple-touch-icon-57.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="72x72" href="/apple-touch-icon-72.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="144x144" href="/apple-touch-icon-144.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="60x60" href="/apple-touch-icon-60.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="120x120" href="/apple-touch-icon-120.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="76x76" href="/apple-touch-icon-76.png">
<link rel="icon apple-touch-icon" type="image/png" sizes="152x152" href="/apple-touch-icon-152.png">

Two notes about this code:

  • The sizes are for iOS7 (eg. 60x60) and prior (eg. 57x57)
  • The file names were intentionally changed to not match Apple naming conventions. For example, I could see in the server's log that Safari tries to access apple-touch-icon-76x76.png, whatever the HTML code says. So it was necessary to use special names not to be tricked.

The results:

  • When adding a link to the home screen, Safari fails at finding a suitable picture. It offers a miniature of the site.
  • When bookmarking the page, Safari takes the 57x57 picture. This is strange, since this size is not the right one (my device is more interested in 76x76 icons) and dedicated to iOS6 and prior.

Too bad, this solution looks good. Yet, even if this test was successful, a lot more tests should have been performed, since several platforms use the Apple icons. In particular, Android. So even if iOS devices would have been smart enough to handle this trick, some other existing or future devices might fail.

philippe_b
  • 38,730
  • 7
  • 57
  • 59