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

Wenn iOS-Safari-Nutzer progressive Web-Apps (PWAs) zu ihrem Startbildschirm hinzufügen, wird das Symbol Apple Touch Icon angezeigt. Sie können angeben, welches Symbol für Ihre App verwendet werden soll, indem Sie in den <head> Ihrer Seite ein <link rel="apple-touch-icon" href="/example.png">-Tag einfügen. Wenn Ihre Seite dieses Link-Tag nicht enthält, generiert iOS ein Symbol, indem ein Screenshot des Seiteninhalts erstellt wird. Wenn Sie iOS anweisen, ein Symbol herunterzuladen, wird das Nutzererlebnis optimiert.

So schlägt die Lighthouse-Prüfung des Apple-Touch-Symbols fehl

Lighthouse kennzeichnet Seiten ohne <link rel="apple-touch-icon" href="/example.png">-Tag im <head>:

Stellt kein gültiges „apple-touch-icon“ bereit

Lighthouse prüft nicht, ob das Symbol tatsächlich vorhanden ist oder ob es die richtige Größe hat.

Apple-Touch-Symbol hinzufügen

  1. Fügen Sie <link rel="apple-touch-icon" href="/example.png"> zum <head> Ihrer 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.

Achten Sie auf Folgendes, um eine gute Nutzererfahrung zu bieten:

  • Das Symbol ist 180 × 180 Pixel oder 192 × 192 Pixel groß.
  • Der angegebene Pfad zum Symbol ist gültig.
  • Der Hintergrund des Symbols ist nicht transparent

Ressourcen