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

.

Wenn iOS-Safari-Nutzer progressive Web-Apps (PWAs) auf ihren Startbildschirmen hinzufügen, wird das angezeigte Symbol als Apple-Touch-Symbol bezeichnet. Sie können angeben, welches Symbol für Ihre App verwendet werden soll, indem Sie ein <link rel="apple-touch-icon" href="/example.png">-Tag in das <head>-Tag Ihrer Seite einfügen. Wenn Ihre Seite dieses Link-Tag nicht enthält, generiert iOS ein Symbol, indem ein Screenshot des Seiteninhalts erstellt wird. Mit anderen Worten: Wenn Sie iOS anweisen, ein Symbol herunterzuladen, wird die Nutzerfreundlichkeit verbessert.

Gründe für den Fehler bei der Lighthouse-Prüfung des Apple-Touch-Symbols

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

Kein gültiges apple-touch-icon angegeben

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 ermöglichen:

  • 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