apple-touch-icon.png einbinden: Größe, Beispiel und Fehler beheben

Ein Apple Touch Icon ist das Bild Ihrer Website auf dem iPhone- oder iPad-Homescreen. Ein quadratisches PNG mit 180 × 180 Pixeln und ein ausdrücklicher HTML-Verweis sind ein praktikabler Ausgangspunkt. Ein Favicon für Browser und Google erfüllt einen anderen Zweck.

Seitenreport Redaktion · Aktualisiert am 13. Oktober 2026

Favicon und Apple Touch Icon prüfen

Apple Touch Icon einbinden: PNG erstellen und im head verlinken

Mit dem Favicon Generator erstellen Sie aus einem Logo ein Apple Touch Icon in 180 × 180 Pixeln sowie die weiteren Website-Icons. Das ZIP enthält auch die passenden HTML-Verweise.

Exportieren Sie Ihr Motiv als quadratische PNG-Datei mit 180 × 180 Pixeln. Ein kontrastreiches, einfaches Motiv bleibt auch verkleinert erkennbar.
Laden Sie die Datei als /apple-touch-icon.png hoch. Prüfen Sie, ob die direkte URL ohne Anmeldung ein Bild liefert.
Ergänzen Sie den folgenden Verweis zentral im HTML-Template innerhalb von <head>.

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

Der führende Schrägstrich bezeichnet das Stammverzeichnis der Domain. Ohne ihn wird apple-touch-icon.png relativ zur aktuellen Seite beziehungsweise zu einem vorhandenen base-Element aufgelöst. Ein absoluter HTTPS-Verweis ist ebenfalls möglich.

Die Angabe sizes="180x180" beschreibt die Datei; sie skaliert sie nicht. Exportieren Sie das Bild tatsächlich in der angegebenen Größe. Die Apple-Dokumentation zur Konfiguration von Web-Apps enthält ein entsprechendes Beispiel. 180 × 180 ist hier eine praktische Vorlage, keine Aussage über eine universelle Maximalgröße.

Testen Sie danach auf einem iPhone oder iPad über Safari und „Zum Home-Bildschirm“. Entfernen Sie für einen erneuten Test ein altes gespeichertes Website-Symbol, wenn weiterhin die frühere Grafik erscheint.

apple-touch-icon.png fehlt oder wird nicht angezeigt

Befund	Konkreter nächster Schritt
404 / Datei nicht gefunden	Dateinamen und Groß-/Kleinschreibung vergleichen. Die Datei hochladen oder den href an den tatsächlichen Ablageort anpassen. Auch eine Unterseite testen.
HTTP 200, aber text/html	Der Server liefert vermutlich eine Ersatzseite oder die Startseite. Icon-Dateien von solchen Weiterleitungs- und Fallback-Regeln ausnehmen und als image/png ausliefern.
Bild erreichbar, aber kein HTML-Verweis	Den apple-touch-icon-Verweis im gemeinsamen head ergänzen. Eine Datei am Standardpfad ist nicht dasselbe wie eine ausdrückliche Einbindung.
Veraltetes Motiv	Datei und CDN-Cache prüfen. Dann das gespeicherte Homescreen-Symbol entfernen und neu hinzufügen. Ein unveränderter Dateiname kann weiterhin aus dem Cache kommen.
403, 405 oder keine Antwort	Datei im Browser öffnen und Server-/Firewall-Regeln prüfen. Der Checker verwendet HEAD; eine abgewiesene HEAD-Anfrage beweist noch nicht, dass ein Browser das Bild nicht laden kann.
HTTPS-/Zertifikatsfehler	Icon-Host und Zertifikat prüfen. Ein externer Bildhost braucht ebenfalls funktionierendes HTTPS. Hilfreich ist der HTTPS Checker.

Der Favicon Checker prüft HTML-Verweise, Standardpfade, HTTP-Status und vom Server gemeldete Bildtypen. Er zeigt deklarierte sizes-Werte; tatsächliche Pixelmaße und die Darstellung auf Ihrem Gerät müssen Sie separat kontrollieren. Einzelne Antwortcodes und Weiterleitungen untersucht der HTTP Statuscode Checker.

Touch Icon, Browser-Favicon und Google-Suchergebnis unterscheiden

Das Touch Icon dient dem Homescreen. Für Browser-Tabs und Google stellen Sie zusätzlich ein Favicon mit rel="icon" bereit, zum Beispiel ein quadratisches PNG mit 96 × 96 Pixeln:

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Google verlangt für Favicons ein quadratisches Format mit mindestens 8 × 8 Pixeln und empfiehlt mehr als 48 × 48 Pixel. Startseite und Icon müssen für die zuständigen Crawler erreichbar sein. Auch bei korrekter Einbindung ist die Anzeige nicht garantiert. Details: Google-Richtlinien für Favicons.

Ein fehlendes Apple Touch Icon ist vor allem ein Darstellungsproblem. Seine Ergänzung allein ist kein Beleg für bessere Google-Rankings. Die Unterschiede erklärt auch der Wiki-Eintrag zum Favicon.

Android und installierbare Web-Apps: Icons im Manifest

Für eine installierbare Web-App definieren Sie die App-Icons im Web-App-Manifest. Das ist ein eigener Anwendungsfall neben dem Apple Touch Icon. Für Chromium sind PNG-Dateien mit 192 × 192 und 512 × 512 Pixeln ein üblicher Ausgangspunkt; ein eigenes maskierbares Icon kann zusätzlich sinnvoll sein.

<link rel="manifest" href="/site.webmanifest">

Der Icon-Ausschnitt des Manifests kann so aussehen. Für eine vollständige installierbare App sind weitere Angaben und Voraussetzungen nötig:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Die referenzierten Dateien müssen vorhanden sein. Prüfen Sie das Manifest im Application-Bereich der Browser-Entwicklerwerkzeuge. Unser Favicon Checker wertet Manifest-Dateien derzeit nicht aus. Hintergrund: Web-App-Manifest auf web.dev und Manifest-Icons bei MDN.

Ältere Einbindungen: precomposed und Windows-Tiles

In älteren Templates finden Sie möglicherweise apple-touch-icon-precomposed oder msapplication-…-Metadaten für Windows-Tiles. Behandeln Sie diese als Kompatibilitätsangaben für frühere Clients. Für eine neue Standard-Einbindung beginnen Sie mit Favicon, apple-touch-icon und – wenn Sie eine installierbare Web-App anbieten – dem Manifest. Übernehmen Sie alte Größenlisten nicht ungeprüft als aktuelle Pflichtanforderung.

Häufige Fragen zum Apple Touch Icon

Ist apple-touch-icon.png zwingend erforderlich?

Eine Website funktioniert auch ohne diese Datei. Wenn Besucher sie auf dem Apple-Homescreen speichern, sorgt ein bewusst gestaltetes Touch Icon für eine passende Darstellung. Es ist keine Voraussetzung für die Google-Indexierung.

Muss die Datei genau apple-touch-icon.png heißen?

Bei einem ausdrücklichen link-Verweis können Sie einen anderen Dateinamen und Pfad verwenden. /apple-touch-icon.png ist ein leicht nachvollziehbarer Standardpfad. Der href muss zur tatsächlich erreichbaren Datei passen.

Warum gibt es 404-Aufrufe, obwohl ich kein Icon verlinkt habe?

Clients können bekannte Icon-Pfade auch ohne ausdrücklichen HTML-Verweis anfragen. Wenn Sie das Icon anbieten möchten, legen Sie eine passende PNG-Datei ab und verlinken Sie sie im head. Eine Umleitung aller fehlenden Dateien auf die Startseite löst das Bildproblem nicht.

Prüft der Checker die tatsächlichen Pixelmaße?

Nein. Er liest die Größenangabe aus dem HTML und prüft Erreichbarkeit und Content-Type. Kontrollieren Sie die Pixelmaße zusätzlich in den Bildeigenschaften und die fertige Darstellung auf einem echten Gerät.