Does not provide a valid apple-touch-icon
Published on • Updated on
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>:
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.
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
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>
…Replace
/example.pngwith the actual path to your icon.
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
Resources
Updated on • Improve article