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

Wenn iOS Safari-Nutzer progressive Web-Apps (PWAs) hinzufügen auf ihrem Startbildschirm erscheint, wird das Symbol als Apple Touch-Symbol bezeichnet. Sie können festlegen, welches Symbol Ihre App verwenden soll, indem Sie ein <link rel="apple-touch-icon" href="/example.png">-Tag im <head> Ihrer Seite. Wenn Ihre Seite dieses Link-Tag nicht enthält, erstellt iOS ein Symbol, indem ein Screenshot Seiteninhalt. Mit anderen Worten: Wenn Sie iOS anweisen, ein Symbol herunterzuladen, erhalten Sie ein optimiertes User Experience aus.

Wie die Prüfung des Apple Touch-Symbols von Lighthouse fehlschlägt

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

<ph type="x-smartling-placeholder">
</ph> Kein gültiges Apple-Touch-Symbol vorhanden

Lighthouse prüft nicht, ob das Symbol tatsächlich existiert die richtige Größe haben.

So fügen Sie ein Apple Touch-Symbol hinzu

  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.

Achte auf Folgendes, um eine gute User Experience zu bieten:

  • Das Symbol hat eine Größe von 180 x 180 Pixel oder 192 x 192 Pixel.
  • Der angegebene Pfad zum Symbol ist gültig
  • Der Hintergrund des Symbols ist nicht transparent.

Ressourcen