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">