Does not provide a valid apple-touch-icon

iOS Safari users can manually add Progressive Web Apps (PWAs) to their home screens. The icon that appears on the iOS home screen when the user adds a PWA is called the Apple touch icon. You can specify what icon your app should use by including a <link rel="apple-touch-icon" href="/example.png"> tag in the <head> of your page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of the page content. In other words, instructing iOS to download an icon results in a more polished user experience.

How this audit fails

This audit fails when Lighthouse doesn't find a <link rel="apple-touch-icon" href="/example.png"> tag in the <head> of the page.

Does not provide a valid apple-touch-icon
The Does not provide a valid apple-touch-icon audit

A rel="apple-touch-icon-precomposed" link passes the audit, but it has been obsolete since iOS 7. Use rel="apple-touch-icon" instead.

Lighthouse doesn't check whether the icon actually exists or whether the icon is the correct size.

Each PWA audit is weighted equally in the Lighthouse PWA Score, except for three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, and Each page has a URL. Learn more in the Lighthouse Scoring Guide.

How to add an Apple touch icon

  • Add <link rel="apple-touch-icon" href="/example.png"> to the <head> of your page.
  • Replace /example.png with the actual path to your icon.
...
<head>
...
<link rel="apple-touch-icon" href="/example.png">
...
</head>
...

Try it! Check out the Add an Apple touch icon to your Progressive Web App codelab to see how adding an Apple touch icon creates a more polished user experience.

To provide a good user experience, make sure that:

  • The icon is 180 pixels wide and 180 pixels tall or 192 pixels wide and 192 pixels tall
  • The specified URL to the icon is valid
  • The background of the icon is not transparent

Resources

Last updated: Improve article

Codelabs

See it in action
Learn more and put this guide into action.