Does not provide a valid apple-touch-icon

[GlenKPeterson]

The Apple documentation says:

"To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png"
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Why do I then also have to add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> to my home screen?

I like that Apple follows the "convention-over-configuration" rule here. Also, I'm always looking for ways to specify less in my HTML, JSON, and JS files for speed.

Thank you very much for Lighthouse! I love tools that let me pass tests to ensure compatibility! Lighthouse, mail-tester, ssl-labs. These are all great tools!

[jespertheend]

I'm not aware of any bug in iOS. As far as I know iOS has always looked for an apple-touch-icon.png in the root dir of a server when no tag was specified.

[connorjclark]

Thanks @GlenKPeterson & @jespertheend for explaining, I didn't fully understand the issue before.

We need to discuss if we think it worth it to make an additional request for every run for this resource (or; the resource as defined in the HTML, if the page doesn't want to use the default) just for ios PWA. We may otherwise decide to move this audit to "manual", which means we do nothing but list it as a thing that exists.

[jespertheend]

Manual sounds good enough for me, an extra request would be nice to have though.
It felt weird to see an error for something that I was pretty sure I had done correctly.

[paulirish]

For correctness, I think we do have to end up making the request. People who do it this way are saving some HTML bytes and that's nice.

We'll use the fetcher for this.

related: new audit: have a valid favicon.ico · Issue #10402

[keganlance]

We only have to make the request when it's not listed as meta tag in the head.

Keep in mind the apple-touch-icon meta tag can also be injected using JS and apple will pick it up and use it.

In any case, doing this request is very welcome as to provide the best experience on each device, there are 20 icons to include, which would otherwise have to all be defined in the html, since apple prefers the meta tag over files it finds with requests. This is the full list:
apple-touch-icon.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60-precomposed.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152-precomposed.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180-precomposed.png
apple-touch-icon-180x180.png
apple-touch-icon-precomposed.png

So yeah, by doing this we can save 20 metatags.

[Seirdy]

Might be worth updating this audit to instead not impact the score, since Safari 15.4 supports Web App Manifest icons.

Once older versions of Safari dwindle, the audit can be removed; this will become a proprietary non-essential feature.

[connorjclark]

Thanks for sharing the news! Let's go ahead and delete this audit for 10.0, we don't need to waste people's times with this since the compatibility problem will disappear soon.

[Seirdy]

On Mon, Mar 21, 2022 at 07:51:35PM -0700, Connor Clark wrote: Thanks for sharing the news! Let's go ahead and delete this audit for 10.0, we don't need to waste people's times with this since the compatibility problem will disappear soon.

@connorjclark 10.0 is coming up soon; is this still on track for removal by then? Issue #14064 is about the removal of this audit, but it doesn't seem to have the 10.0 label. (I'm only asking so I can plan accordingly, not to be pushy)

…

-- Seirdy