Invalid error "Does not provide a valid apple-touch-icon" when rel="apple-touch-icon icon"

Remember <meta rel="shortcut icon" ... where icon is a fallback when shortcut not supported. I guess same can say for <meta rel="apple-touch-icon icon" ... and it should display this error:

meaning for iOS would capture as apple-touch-icon and for other devices as icon.

I haven’t tested it in iOS, but I think it should work so.

[adrianaixba]

Hey @laukstein, thank you for the follow up! Unfortunately, it looks like apple-touch-icon and icon only work separately. This is a link to MDN docs that covers the icon/apple-touch-icon LinkType differences well. But, I did go ahead and run an example web app to test on iOS to see it play out a little better.

<link rel=”apple-touch-icon”...> doesn’t trigger the favicon (since the “icon” rel isn’t present). But, the iOS icon shows fine as expected.

<link rel=”apple-touch-icon icon” ….> Here, it looks like the favicon works fine, but iOS doesn’t correctly take in the icon, since “icon” is in the rel. So, it opts for an image of the actual page.

So, unfortunately it looks like iOS would require its own <link rel=""...> declaration without icon in it. Your best bet would be to have both <link rel="icon"...> and <link rel="apple-touch-icon"...>" to ensure you cover all your PWA bases 😃

[adrianaixba]

@laukstein I’m actually not sure! Although, if you end up opening a bug with them (or if you find one), feel free to comment here with a link. Would be an interesting thing to follow 🙂