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>:
Lighthouse doesn't check whether the icon actually exists or whether the icon is
the correct size.
How to add an Apple touch icon
Add <link rel="apple-touch-icon" href="/example.png"> to the <head> of your page:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-04-16 UTC."],[],[]]