404er vermeiden: Apple Touch Icon

Da ich Better WP Security für meine Seiten verwende und dort eine 404 Erkennung laufen habe – neben meiner Apache 404 Erkennung – hatte ich mich kürzlich selbst ausgesperrt. Hintergrund: Wenn ein gewisses Level an falschen Anfragen pro IP innerhalb einer Zeitspanne erreicht ist, wird derjenige für 15 Minuten bei mir aus Sicherheitsgründen ausgesperrt (Brute Force Attacke).

Das Problem war nun: Der Browser auf meinem Smartphone hat automatisch nach Bildern gesucht, die gar nicht vorhanden waren: apple-touch-icon.png und apple-touch-icon-precomposed.

Da ich ein Samsung Galaxy S2 nutze, hat mich das zunächst verwundert und ich vermutete eine Plugin-Altlast. Nach etwas Googlen fand ich heraus, dass alle Apple-Geräte (gerade mobil) diesen Standard haben, um so App-Icons auf dem Smartphone darstellen zu können, da Apple gerne Web Content wie Apps ästhetisieren möchte.

D.h. alle Apple Geräte, die mobil im Internet surfen, suchen beim Abruf einer Webseite automatisch nach diesen zwei Bildern und produzieren damit im Großteil der Fälle 404-Errors. Scheinbar macht das aber auch schon Chrome auf Android.

Wie nun also lösen?

[AdSense-A]

Der beste und einfachste Weg ist: Erstelle jeweils eine PNG-Bilddatei mit dem Namen apple-touch-icon.png und apple-touch-precomposed.png (am besten mit der Größe 128×128) und lade sie ins Hauptverzeichnis von z.B. WordPress hoch, so dass die Dateien auf folgende Weise erreichbar sind: “http://www.yoursite.com/apple-touch-icon.png“. Zusätzlich gibt es die Möglichkeit, diese Icons im Header mit Meta-Anweisungen zu definieren, was aber meines Erachtens überflüssig ist, da die Browser automatisch nur nach dem genannten Dateipfad suchen.

Das WordPress Plugin Multicons löst das gesamte Problem der Dateipfade und Meta-Anweisungen in HTML zwar komfortabel, allerdings habe ich die Erfahrung gemacht, dass abweichende Dateipfade für die Icons, die man dort festlegen kann – z.B. einen Link aus der WP Mediathek – trotzdem weiterhin zu 404ern führten, da mein Chrome auf Android weiterhin im Hauptverzeichnis der Domain nach den Bildern gesucht hatte.

Und zum Thema zusätzliches Plugin: So wenig Plugins wie irgend möglich – potenzielles Sicherheitsleck!

Fazit: Wenn Großkonzerne Standards setzen, kommt sowas dabei raus.

404Apple Touch IconChromemobiler BrowserSmartphoneWebseiten
Comments (1)
Add Comment
  • Michael Altmann

    Ganz überflüssig ist die Definition der Icons mit Meta-Anweisungen m. E. nicht, man kann auf verschiedene Auflösungen verweisen (iPhone und iPad mit und ohne Retina-Display).

    Mit einem weiteren Meta-Tag (apple-mobile-web-app-title) kann man einen kurzen Titel vergeben, ohne diesen Tag verwendet iOS den Inhalt von , der wegen der Optimierung für Google meistens viel zu lang ist.