Es wird kein gültiges Apple-Touch-Symbol angezeigt.

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

Lighthouse prüft nicht, ob das Symbol wirklich existiert oder die richtige Größe hat.

Apple Touch-Symbol hinzufügen

  1. 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>
  …

  2. 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.

Ressourcen