Learn Measure Blog About

Does not provide a valid apple-touch-icon

Appears in: PWA audits

When iOS Safari users add Progressive Web Apps (PWAs) to their home screens, the icon that appears 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 the Lighthouse Apple touch icon audit fails

Lighthouse flags pages without a <link rel="apple-touch-icon" href="/example.png"> tag in the <head>:

Does not provide a valid apple-touch-icon

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

  1. Add <link rel="apple-touch-icon" href="/example.png"> to the <head> of your page:

    <!DOCTYPE html>
    <html lang="en">

    <link rel="apple-touch-icon" href="/example.png">

  2. Replace /example.png with the actual path to your icon.

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 180x180 pixels or 192x192 pixels
  • The specified path to the icon is valid
  • The background of the icon is not transparent


Last updated: Improve article


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