Does not provide a valid apple-touch-icon

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

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

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">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

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

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

Resources