Web Clip/Apple Touch Icon display issues

Question

I'm having difficulty getting an apple touch icon to work consistently on some devices.

The devices with issues are typically iPhones and I believe they are 6S's. My icons are setup like this:

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

I was given an iPhone 6S to test with since I couldn't reproduce the issue on my android devices. I was able to duplicate the issue so I added this line from above:

<link rel="apple-touch-icon" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />

When I refreshed the browser on my test device, the icons began displaying when adding to the home screen.

I just tried again on another iPhone that had never visited the site and it's not working.

This is on a "SharePoint Online/O365" site. Ideas on what could be causing this madness?

Answer 1

iOS Safari often has an inconsistent behavior regarding the Touch icon and Add to home screen. I suggest you to retry a few times with the iPhone that didn't work. Chances are: it will eventually take the icon into account. Definitely not the answer your expected...

As an hypothesis for this unexpected observation: maybe Safari is not in a hurry to process the Touch icon (after all, unlike HTML, CSS and other resources, the Touch icon is not required to display the page) so it's not available when you add to home screen short after you open the page. And because you wanted to test the Add to home screen feature, you probably accessed your site and added it to the home screen immediately. Which is, I suppose, not the regular scenario (visitors spend at least a few seconds before bookmarking a site).