Wenn iOS-Nutzer in Safari Progressive Web-Apps (PWAs) zu ihren Startbildschirmen hinzufügen, wird das Symbol Apple Touch-Symbol genannt.
Du kannst angeben, welches Symbol deine App verwenden soll, indem du das <head>
-Tag deiner Seite in ein <link rel="apple-touch-icon" href="/example.png">
-Tag einfügst. Wenn Ihre Seite dieses Link-Tag nicht enthält, erstellt iOS ein Symbol, indem ein Screenshot des Seiteninhalts erstellt wird. Mit anderen Worten: Wenn Sie iOS anweisen, ein Symbol herunterzuladen, wird die User Experience verbessert.
So schlägt die Prüfung auf Apple-Touch-Symbole von Lighthouse fehl
Lighthouse kennzeichnet Seiten ohne <link rel="apple-touch-icon" href="/example.png">
-Tag im <head>
:
![Stellt kein gültiges Apple-Touch-Symbol bereit](https://developer.chrome.com/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=6&hl=de)
Lighthouse prüft nicht, ob das Symbol wirklich existiert oder die richtige Größe hat.
Apple Touch-Symbol hinzufügen
Füge
<link rel="apple-touch-icon" href="/example.png">
zur<head>
deiner Seite hinzu:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
Ersetzen Sie
/example.png
durch den tatsächlichen Pfad zu Ihrem Symbol.
Für eine gute Nutzererfahrung sollten Sie auf Folgendes achten:
- Das Symbol ist 180 × 180 Pixel oder 192 × 192 Pixel.
- Der angegebene Pfad zum Symbol ist gültig
- Der Hintergrund des Symbols ist nicht transparent.