apple-touch-icon.png: 404 im Log verstehen und Icon einbinden

Du wirfst einen Blick ins Server-Log oder in die 404-Auswertung deiner Statistik und stolperst über eine Zeile, die sich ständig wiederholt: GET /apple-touch-icon.png 404, oft direkt gefolgt von /apple-touch-icon-precomposed.png. Dabei hast du diese Datei nie irgendwo verlinkt und auf deiner Seite gibt es sie gar nicht. Trotzdem fragt sie jemand am laufenden Band ab.

Die kurze Antwort vorweg: Das ist normal, es ist kein Angriff und es macht deine Seite nicht kaputt. Die Anfragen kommen von Apple-Geräten und einigen anderen Diensten, die automatisch nach einem Icon suchen. Trotzdem lohnt es sich, den Fehler zu beseitigen, denn er verrauscht dein Log und du verschenkst ein schönes Icon für alle, die deine Seite zum Homescreen hinzufügen. Unten steht, woher die Requests genau stammen und wie du sie in fünf Minuten dauerhaft loswirst.

Checker: Ist dein Icon sauber eingebunden?

Gib deine Domain ein. Der Checker ruft die Seite ab und zeigt dir sofort, ob ein Apple-Touch-Icon eingebunden ist, ob die Standardpfade im Root erreichbar sind und was genau die 404 in deinem Log erzeugt.

Woher kommen die Anfragen auf apple-touch-icon.png?

Apple hat vor Jahren festgelegt, dass Safari auf iOS automatisch nach einem sogenannten Touch-Icon sucht, sobald ein Nutzer eine Seite über "Zum Home-Bildschirm" speichert. Statt einen unscharfen Screenshot der Seite zu nehmen, holt sich das Betriebssystem lieber ein sauberes, quadratisches Icon. Damit das auch ohne Angabe im HTML klappt, probiert das Gerät eine Reihe fester Dateinamen direkt im Wurzelverzeichnis deiner Domain durch, zum Beispiel https://deine-domain.de/apple-touch-icon.png.

Existiert die Datei nicht, antwortet dein Server mit Statuscode 404. Genau diese Zeile landet dann in deinem Log. Das Ganze ist also kein Fehler in deinem Code, sondern ein von Apple eingebautes Verhalten. Und es sind nicht nur iPhones. Diese Dienste fragen das Icon ebenfalls ab oder nutzen es:

• iPhone und iPad beim Speichern auf den Home-Bildschirm und in der Lesezeichen-Anzeige
• macOS Safari für die Startseiten-Kacheln und angeheftete Tabs
• Messenger und soziale Netzwerke wie WhatsApp, Slack oder Telegram für die Link-Vorschau, wenn kein anderes Bild gesetzt ist
• Feed-Reader und News-Apps, die pro Quelle ein Icon anzeigen
• Bots und Crawler, die Icons für Verzeichnisse und Vorschauen sammeln

Auf einer Seite mit ordentlichem Traffic summiert sich das schnell zu Dutzenden oder Hunderten 404 pro Tag. Deshalb taucht der reine Dateiname apple-touch-icon.png auch so häufig in Suchmaschinen auf: Entwickler und Seitenbetreiber sehen die Fehler in ihrer Statistik und tippen den Namen bei Google ein, um herauszufinden, was das überhaupt ist.

Welche Dateinamen werden abgefragt?

Wenn im HTML kein Icon angegeben ist, arbeitet iOS eine feste Liste von Dateinamen ab und probiert sie der Reihe nach im Wurzelverzeichnis. Ältere Systeme fragten sogar mehrere Größen einzeln an. Das erklärt, warum in deinem Log oft gleich mehrere verschiedene 404 kurz hintereinander stehen.

Die gute Nachricht: Du musst nicht all diese Dateien anlegen. Sobald du im HTML ein Icon sauber angibst, hört das Gerät auf, blind Dateinamen zu erraten, und nimmt genau die Datei, die du benennst. Damit verschwinden alle diese 404 auf einmal.

Muss ich den 404 überhaupt beheben?

Ehrliche Antwort: technisch zwingend ist es nicht. Deine Seite funktioniert mit oder ohne Touch-Icon einwandfrei. Der 404 hat keinen Einfluss auf deine Rankings, denn Google bewertet dich nicht schlechter, weil ein Icon fehlt, das der Googlebot gar nicht anfragt. Es gibt aber drei gute Gründe, es trotzdem zu erledigen:

• Sauberes Log. Wer regelmäßig ins Server-Log oder in die Fehlerauswertung schaut, will echte Probleme sehen und nicht in Hunderten harmlosen Icon-404 danach suchen. Jeder beseitigte Dauer-Fehler macht die echten sichtbarer.
• Besserer Auftritt. Legt ein Besucher deine Seite auf den Homescreen, bekommt er ohne Icon nur einen abgeschnittenen Screenshot oder den ersten Buchstaben. Mit Icon steht dein Logo sauber zwischen den App-Symbolen. Das wirkt professionell und sorgt für Wiedererkennung.
• Link-Vorschauen. Manche Chat- und Social-Dienste greifen auf das Touch-Icon zurück, wenn kein Open-Graph-Bild gesetzt ist. Ein vorhandenes Icon sieht in solchen Vorschauen besser aus als ein Platzhalter.

Die saubere Lösung: ein Icon einbinden

Der beste Weg ist, ein einziges Icon anzulegen und es im HTML zu verlinken. Moderne iOS-Versionen brauchen nur noch eine Größe: 180x180 Pixel im PNG-Format. Diese Auflösung deckt aktuelle iPhones ab und wird von den Geräten bei Bedarf herunterskaliert.

Schritt 1: Icon erstellen

Erstelle eine quadratische PNG-Datei mit 180x180 Pixeln. Wichtig sind dabei zwei Dinge, die viele falsch machen:

• Keine Transparenz. Fülle den Hintergrund mit einer Farbe. iOS legt Touch-Icons auf einen Homescreen und transparente Bereiche werden dort schwarz. Ein flächiger Hintergrund sieht immer besser aus.
• Keine abgerundeten Ecken selbst einbauen. iOS schneidet die Ecken automatisch rund und legt je nach Version einen leichten Glanz darüber. Liefere ein rechteckiges Motiv mit etwas Rand, dann passt das Ergebnis.

Schritt 2: Datei ablegen

Lege die Datei als apple-touch-icon.png direkt ins Wurzelverzeichnis deiner Domain, also dorthin, wo auch deine Startseite und die robots.txt liegen. Allein dadurch verschwinden schon die meisten 404, weil die Geräte genau diesen Standardpfad zuerst abfragen. Sicherer und sauberer ist es aber, das Icon zusätzlich im HTML zu benennen.

Schritt 3: Im Head verlinken

Füge im <head> deiner Seite diese Zeile ein:

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

Das ist alles, was moderne Apple-Geräte brauchen. Sobald diese Zeile vorhanden ist, hört iOS auf, weitere Dateinamen zu erraten, und lädt genau die angegebene Datei. Damit sind auch die 404 auf die precomposed- und Größen-Varianten weg.

Optional: mehrere Größen und klassisches Favicon

Wer es ganz vollständig will oder ältere Geräte bedienen möchte, gibt mehrere Größen an und ergänzt das normale Favicon für Desktop-Browser gleich mit:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico">

Für die allermeisten Seiten reicht aber die erste Zeile plus ein normales Favicon vollkommen aus. Verzettel dich nicht mit einem Dutzend Icon-Größen, das war früher nötig, heute nicht mehr.

Icons bequem generieren lassen

Du musst die verschiedenen Größen nicht von Hand in einem Bildprogramm erzeugen. Es gibt kostenlose Generatoren, bei denen du ein einzelnes Motiv hochlädst und ein fertiges Paket mit allen Icon-Dateien plus den passenden HTML-Zeilen zurückbekommst. Am bekanntesten ist der RealFaviconGenerator. Dort lädst du ein Quadrat mit mindestens 512x512 Pixeln hoch, siehst eine Vorschau für iOS, Android und Desktop und lädst am Ende ein ZIP mit allen Dateien herunter.

Das ist der schnellste Weg, wenn du nicht nur das Apple-Icon, sondern gleich ein sauberes Set aus Favicon, Touch-Icon und Android-Icons haben willst. Die generierten HTML-Zeilen kopierst du einfach in deinen Head.

404 loswerden, ohne ein Icon anzulegen

Vielleicht willst du gar kein Touch-Icon, sondern nur die ständigen Fehler aus dem Log bekommen. Auch das geht. Über die .htaccess auf einem Apache-Server hast du zwei Möglichkeiten.

Variante A: auf ein vorhandenes Icon umleiten

Hast du bereits ein Favicon oder Logo, kannst du alle Apple-Icon-Anfragen einfach dorthin umleiten. Der 404 wird damit zu einem sauberen Treffer:

# Alle apple-touch-icon-Anfragen auf ein vorhandenes Bild leiten
RewriteEngine On
RewriteRule ^apple-touch-icon(.*)\.png$ /favicon-180.png [L]

So beantwortet dein Server jede Variante des Dateinamens mit demselben Bild. Praktisch, wenn du ein Icon hast, es aber nicht unter jedem der vielen möglichen Namen ablegen willst.

Variante B: den 404 still beantworten

Willst du gar kein Icon ausliefern und nur das Log beruhigen, kannst du die Anfragen mit dem Statuscode 204 (No Content) abfangen. Der Browser bekommt dann eine gültige, leere Antwort statt eines Fehlers:

# Apple-Icon-Anfragen leer, aber ohne Fehler beantworten
RewriteEngine On
RewriteRule ^apple-touch-icon.*\.png$ - [R=204,L]

Das ist die Holzhammer-Variante. Sie beseitigt den Log-Eintrag, liefert aber weiterhin kein Icon aus. Für die meisten Seiten ist ein echtes Icon der bessere Weg, aber wenn dir das Icon egal ist und nur der Fehler stört, erledigt diese Zeile den Job. Wenn du unsicher bist, welchen Statuscode dein Server gerade zurückgibt, hilft dir der HTTP-Statuscode-Check weiter.

apple-touch-icon in WordPress

In WordPress musst du gar nicht im Theme-Code herumschrauben. Seit Version 4.3 gibt es das sogenannte Website-Icon direkt im System. Du findest es unter Design → Customizer → Website-Informationen → Website-Icon oder in neueren Versionen unter Einstellungen → Allgemein. Lade dort ein quadratisches Bild mit mindestens 512x512 Pixeln hoch.

WordPress erzeugt daraus automatisch das Favicon für den Browser-Tab und das apple-touch-icon für iOS und schreibt die passenden Link-Tags selbst in den Head jeder Seite. Damit sind die 404 erledigt, ohne dass du eine einzige Zeile Code anfassen musst. Wer ein besonders vollständiges Set will, kann zusätzlich ein Plugin wie RealFaviconGenerator nutzen, nötig ist das für den Standardfall aber nicht.

Brauche ich apple-touch-icon-precomposed noch?

Die precomposed-Variante stammt aus einer Zeit, in der iOS Touch-Icons automatisch einen glänzenden Effekt und einen Rahmen verpasst hat. Wer diesen Effekt nicht wollte, benannte seine Datei apple-touch-icon-precomposed.png, damit iOS das Bild unverändert übernimmt. Seit iOS 7 gibt es diesen Glanzeffekt nicht mehr, das System zeigt Icons ohnehin flach an.

Für eine neue Seite brauchst du precomposed also nicht mehr. Eine einzige apple-touch-icon.png reicht. Die Anfragen auf die precomposed-Datei im Log sind nur noch Überbleibsel aus der alten Abfrage-Reihenfolge und verschwinden ebenfalls, sobald du dein Icon im HTML angibst.

Häufige Fragen

Ist apple-touch-icon.png ein Virus oder ein Angriff?

Nein. Die Anfragen sind völlig harmlos und kommen von Apple-Geräten sowie einigen Diensten, die automatisch nach einem Seiten-Icon suchen. Es handelt sich nicht um einen Hack-Versuch. Kritisch werden Log-Einträge erst, wenn Dateien wie wp-login.php, .env oder Admin-Pfade abgefragt werden.

Welche Größe sollte das apple-touch-icon haben?

180x180 Pixel im PNG-Format decken alle aktuellen iPhones ab und werden von iOS bei Bedarf heruntergerechnet. Eine einzige Datei in dieser Größe ist für die allermeisten Seiten völlig ausreichend. Mehrere Größen sind nur nötig, wenn du sehr alte Geräte pixelgenau bedienen willst.

Reicht es, die Datei ins Wurzelverzeichnis zu legen?

Ja, das beseitigt die meisten 404, weil iOS genau diesen Standardpfad zuerst abfragt. Sauberer ist es aber, das Icon zusätzlich im Head mit einer Link-Zeile anzugeben. Dann lädt das Gerät gezielt diese Datei und probiert keine weiteren Namensvarianten mehr durch.

Muss ich das Icon für SEO haben?

Nein, ein fehlendes Touch-Icon schadet deinen Google-Rankings nicht. Der Nutzen liegt im sauberen Server-Log und im professionellen Auftritt, wenn jemand deine Seite auf den Homescreen legt oder in einer Vorschau verlinkt.

Warum sehe ich mehrere verschiedene apple-touch-icon-404 gleichzeitig?

Ohne Angabe im HTML arbeitet iOS eine Liste fester Dateinamen ab, darunter die precomposed- und die größenspezifischen Varianten. Deshalb stehen oft mehrere 404 kurz hintereinander im Log. Sobald du ein Icon im Head verlinkst, hört das Erraten auf und alle Varianten-404 verschwinden.

Verwandte Artikel

• .htaccess - Anleitung mit Beispielen - Weiterleitungen, Dateien sperren und Fehler beheben
• HTTP-Statuscode ermitteln - prüfen, was dein Server wirklich zurückgibt
• Google Calendar 404 Error - ein weiterer harmloser 404, den viele im Log finden

Quellen

• Apple Human Interface Guidelines: App Icons - Vorgaben zu Icon-Größe und Gestaltung
• MDN: das link-Element - Referenz zu rel="apple-touch-icon" und rel="icon"
• RealFaviconGenerator - Icon-Paket inklusive HTML-Code erzeugen