Apple-Touch-Icon

Was geprüft

Geprüft wird, ob ein <link rel="apple-touch-icon"> (oder „apple-touch-icon-precomposed“) verlinkt ist, ob die Datei abrufbar ist und ob sie laut Dateikopf ein Bild ist. Wurde das Icon nicht abgerufen, lautet das Ergebnis „nicht geprüft“.

Wie relevant

Niedrig, wenn kein Apple-Touch-Icon verlinkt, nicht abrufbar oder kein Bild ist. Das Gewicht ist gering, weil das Icon keinen Bezug zu Suche oder Linkvorschau hat.

Warum

iPhone und iPad verwenden das Apple-Touch-Icon, wenn Besucher die Seite zum Home-Bildschirm hinzufügen. Fehlt es, erzeugt das Gerät ein Bild aus einem Bildschirmausschnitt.

Wie beheben

Hinterlegen Sie ein quadratisches PNG mit 180×180 Pixeln ohne Transparenz und verlinken Sie es im <head>. Ohne Link sucht Safari zusätzlich nach /apple-touch-icon.png im Hauptverzeichnis.

Nebenwirkung: Keine technischen Nebenwirkungen. Geräte speichern das Icon beim Hinzufügen; eine Änderung wirkt nur bei neu hinzugefügten Verknüpfungen.

WordPress: Das Website-Icon im Customizer erzeugt automatisch auch ein Apple-Touch-Icon mit 180×180 Pixeln.

Codebeispiel

HTML

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Weiterführende Quellen

• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel