Combination of link types "icon" and "apple-touch-icon"

Question

Mobile Safari requires the use of the following spell for higher-resolution icons than 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 HTML5 syntax , for example:

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

Now, I expect that you can combine them into one 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 issues with this? We all know that things are rarely so simple, and I don’t have an iOS device for testing, not to mention all the other devices that, no doubt, copied Apple's syntax.

Answer 1

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

I just tried with the iPad Mini, running on 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:

• Dimensions for iOS7 (e.g. 60x60) and earlier (e.g. 57x57)
• File names have been intentionally changed to not comply with Apple's Naming Agreement . For example, I could see in the server log that Safari was trying to access apple-touch-icon-76x76.png , regardless of what the HTML says. Therefore, it was necessary to use special names so that they were not deceived.

Results:

• When adding a link to the Safari home screen, I cannot find a suitable image. It offers a thumbnail of the site.
• When you bookmark a page, Safari displays a 57x57 image. This is strange since this size is not correct (my device is more interested in 76x76 icons) and is dedicated to iOS6 and earlier.

Too bad, this solution looks good. However, even if this test was successful, it was necessary to conduct a lot more tests, since Apple icons were used on several platforms. In particular, Android. So even if iOS devices were smart enough to handle this trick, some other existing or future devices could fail.