> [!CAUTION]
> **Caution:** PWA testing in Lighthouse is deprecated. For more information on its deprecation see [Chrome's updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria.md.txt). For guidance on testing, refer to the [PWA documentation.](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt)

When iOS Safari users add [Progressive Web Apps (PWAs)](https://web.dev/explore/progressive-web-apps#make-it-installable) 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](https://developer.chrome.com/docs/lighthouse/overview.md.txt)
flags pages without a `<link rel="apple-touch-icon" href="/example.png">`
tag in the `<head>`:
![Does not provide a valid apple-touch-icon](https://developer.chrome.com/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png)

> [!NOTE]
> **Note:** 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.

> [!NOTE]
> **Note:** In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (**Fast and reliable** , **Installable** , and **PWA optimized**).

## 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

- [Source code for **Does not provide a valid `apple-touch-icon`** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/apple-touch-icon.js)
- [Discover what it takes to be installable](https://web.dev/install-criteria)
- [Use Apple Touch Icon](https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/)