Immer Ärger mit dem Favicon

Dieser Artikel ist ursprünglich am 16. 09. 2013 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Das Favicon, das kleine Mini-Logo oben links in der Adressleiste, ist bei unseren Kunden sehr beliebt. Ein Favicon steht deshalb meistens ganz oben auf der Wunschliste.
Leider ist es nicht ganz einfach, ein Favicon über alle Browser hinweg konsistent anzeigen zu lassen. Theoretisch genügt es, ein 16×16 Pixel großes Bildchen namens favicon.ico ins oberste Verzeichnis (Root) der Seite zu legen. Dann finden es alle Browser von ganze alleine. Theoretisch.

Manche Browser halten sich nicht an diese Regel. Nicht nur der Internet-Explorer ist da etwas eigen, auch Safari, Firefox und Chrome tun nicht immer das, was man erwartet. Auch der Browser-Cache ist in Sachen Favicon ziemlich zäh, oft tauchen Favicons auch nach mehrfachem Cache-Löschen nicht auf. Man kann sich behelfen, indem man eine Versionbezeichnung (z. B. ?v=1) an den Dateinamen anhängt. Damit überlistet man den Caching-Mechanismus.

Angaben im <head>-Bereich

Ich verwende inzwischen diesen Schnipsel in der header.php.

<!--[if IE]>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico?v=1">
<![endif]-->
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.png">
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/touch-icon.png">

HINWEIS Die Pfadangaben beziehen sich auf ein WordPress-Childtheme.
Wenn Ihr kein Childtheme benutzt, müsst Ihr den Pfad korrigieren. Anstatt ‚get_stylesheet_directory_uri‘ müsste es dann ‚get_template_directory_uri‘ heißen.

Die Pfadangaben beziehen sich auf das Verzeichnis, in dem das aktuelle Stylesheet (style.css) liegt.  ‚get_stylesheet_directory_uri‘  verweist auf dieses Verzeichnis.

Die Erklärung zum Code

Zeile 1: Internet-Explorer

Hier steht die Version für den Internet-Explorer. Der Code für den IE ist ein kleines bisschen anders als für den Rest der Welt, deshalb steht er in einem conditionial comment. Sprich: Wenn der anfragende Browser sich als Internet Explorer zu erkennen gibt, werden die Angaben in der if-Abfrage ausgeliefert.

Der Internet Explorer bis einschließlich Version 9 kann ein Favicon nur darstellen, wenn es ein spezielles Dateiformat (ico) hat. Alle anderen Browser und Internet Explorer 10 können auch png-Dateien lesen. Für den IE braucht man also das Favicon als favicon.ico-Datei.

favicon.ico wird nicht angezeigt?

Vielleicht liegt’s am Konverter. Das Dateiformat ico ist nicht sehr gebräuchlich und man muss daher in der Regel eine png-Datei in eine ico-Datei konvertieren. Leider funktionieren nicht alle Konverter gleich gut. Ich habe eine ganze Weile eine Fireworks-Extension genutzt und die ico-Dateien damit exportiert. Aber das klappte nicht immer, das Favicon wurde im IE häufig nicht angezeigt.

Ich habe lange gerätselt woran das liegen könnte. Die Lösung: Die ico-Datei muss den richtigen content-type haben. Manche Konverter liefern zwar Dateien mit der richtigen Endung (.ico) aus, aber der content-Type steht weiter auf ‚png‘. Resultat: Der IE sieht nichts.
Tipp: Mit diesem Konverter klappt’s, hier wird auch der content-Type richtig gesetzt: www.convertico.com
Das mit dem content-type war offensichtlich eine Ente. Wie Torsten unten in den Kommentaren schreibt, ist der Mechanismus ein ganz anderer. Mea culpa. Man sollte nicht alles glauben, was im Internet steht ;o)

Zeile 4: Alle anderen Browser

Hier wird das Favicon für alle anderen Browser geladen. Es ist eine png-Datei.

Zeile 5: Apple Touch-Icon

Hier kann man ein spezielles Favicon für iPhone und iPad hinetrlegen. Das Bild ist etwas größer als die kleinen Favicons (128 x 128px). Hier der aktuelle Stand direkt von Apple. Das Icon kommt zum Einsatz, wenn ein Besucher Eurer Webseite sich Eure Seite als Icon auf dem iPad/iPhone-Desktop speichern möchte.

Es geht noch weiter

Damit ist das Thema Favicon längst noch nicht erschöpfend behandelt, der Code oben ist nur eine Näherung. Es gibt eine ganze Menge Darstellungsprobleme, die ich noch nicht verstehe.
Auch kann man heutzutage Favicons in verschiedenen Größen hinterlegen, für Bildschirme mit unterschiedlichen Auflösungen. Das sieht dann etwa so aus:

<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

4 Kommentare zu “Immer Ärger mit dem Favicon

  • Man kann das Favicon, dass ja bis auf die Identifizierung der Seite in den Bookmarks nicht wirklich einen Nutzen hat mit ein wenig Javascript auch aufwerten z.B. mit http://lab.ejci.net/favico.js/ oder ein paar anderen die auf der Seite auch verlinkt werden.

  • Ich kann gar nicht mehr sagen wie viele Male wir auf fehlende favicons hingewiesen wurden. Leider hat das Teil eine gewisse Sichtbarkeit, obwohl sich viele Logos überhaupt nicht zu einem favicon machen lassen…

  • Eine Datei hat keinen content-type (siehe: http://de.wikipedia.org/wiki/Internet_Media_Type). Der Webserver überträgt Dateien mit der Angabe des content-type (das oben im Code fehlende type-Attribut ist dafür unter anderem zuständig!). Wenn die Angabe fehlt, wird der Head der Datei ausgelesen (funktioniert bei vielen Dateiformaten), wenn auch das keine Hilfe ist, wird die Endung der Datei genutzt.

    Bei Problemen sollte also der type definiert werden:
    Zum Beispiel so: type=“image/x-icon“

    Laut Wikipedia-Seite (http://de.wikipedia.org/wiki/Favicon) gibt es dafür drei (bzw. vier) Möglichkeiten:

    Für ICO: image/x-icon (nicht sehr weit verbreitete andere Möglichkeit: image/vnd.microsoft.icon[2])
    Für GIF: image/gif
    Für PNG: image/png

    Sollte es immer noch nicht klappen, kann es sein, dass der Webserver nochmal explizit den Typ mit der Dateiendung verbinden muss. Dazu kann (sofern beim Hoster möglich) dieser Code in der .htaccess benutzt werden (GIF und PNG sollten kein Problem sein, aber ICO ist öfter mal „nachzurüsten“):
    AddType image/x-icon .ico

    Ein gutes Photosop-Plugin für die ICO-Erstellung gibt es hier:
    http://www.telegraphics.com.au/sw/product/ICOFormat

    Die Größe von 128×128 Pixel beim Apple-Touch-Icon ist meines Erachtens so nicht mehr aktuell (war glaube ich sowieso ein Kompromiss um nur eine Datei zu nutzen). Eine gute kleinteilige Erklärung findet sich bei Elmastudio in den Kommentaren:
    http://www.elmastudio.de/webdesign/ein-apple-touch-icon-fur-die-eigene-webseite-erstellen/comment-page-1/#comment-19504

    Und mit iOS 7 haben sich die Werte auch schon wieder geändert:
    https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    Der get_stylesheet_directory_uri-Code muss übrigens nicht geändert werden, wenn das Ganze in einem normalen Theme (also nicht in einem Child-Theme) Anwendung findet, denn dann führt diese Funktion ja immer noch zur aktuellen Stylesheet-Datei. Der einzige Grund für einen Wechsel zu get_template_directory_uri ist, wenn man verhindern möchte, dass ein Aufruf durch ein Child-Theme überschrieben werden kann.

    • Oh Mann.
      Danke! So viele Fehler in einem einzigen Artikel. Ich werd mich gleich mal ans Korrigieren machen.

Die Kommentare sind geschlossen.