Erstellen und Installieren eines Favicon

Das Favicon ist dieses winzige Bildchen, das in Ihrem Browserfenster auftaucht, wenn Sie eine Seite betrachten. Viel Browser nutzen es auch, wenn Ihre Seite als Lesezeichen gespeichert ist.

Bei der Gestaltung Ihres Favicons sollten Sie im Hinterkopf behalten, dass es trotz der winzigen Größe erkennbar und verständlich sein sollte. Eine geschrumpfte Version Ihres Logos wird meist nicht funktionieren. Sie sollten einen wiedererkennbaren Teil Ihres Markenzeichens hernehmen und vereinfachen. Manchmal reicht es schon, eine Grafik oder einen Buchstaben Ihres Markennamens herauszunehmen und als Favicon zu verwenden.

Aktuell ist das am Meisten unterstützte Favicon-Format das ico-Format. Sie müssen also Ihre png- oder jpg-Grafik nach .ico konvertieren. Am besten erstellen Sie ein Favicon in 32x32px (einige Browser werden es auf 16x16px herunterskalieren). Weitere Details zu verschiedenen Favicon-Format und -Größen finden Sie im Anschluss unter „Einen Schritt weiter“.

Wenn Sie nun also Ihre neue ico-Datei haben, können Sie sie in die WordPress-Medienbibliothek hochladen, die URL kopieren und sie direkt hier einfügen: Headway ► Options ► General ► Favicon URL:

Einen Schritt weiter

Wenn Sie mit Ihrem Favicon noch einen Schritt weiter gehen möchten, sollten Sie zunächst das Favicon etwas besser verstehen.

Jonathan Neal beleuchtet die verschiedenen Optionen, die Ihnen dabei zur Verfügung stehen. Hier finden sich einige Optionen, die Sie zusätzlich zur Favicon-Standardoption nutzen können, welche Headway bereits im Optionspunkt „General“ anbietet. Sie können diese Codeabschnitte unter Scripts/Analystics in den „Header“-Kasten einfügen.

Favicons für manche Browser im PNG-Format hinzufügen

Leider wird das nicht von allen Browsern unterstützt:

Chrome, Firefox, Opera 7+, und Safari 4+ unterstützen PNG-Favicons, aber Chrome und Safari werden das ICO-Favicon verwenden, wenn beide Optionen vorhanden sind – unabhängig von der Reihenfolge, in der sie aufgeführt werden. Der Internet Explorer wiederum unterstützt PNG-Favicons gar nicht, sondern wird das PNG ignorieren und stattdessen das ICO-Favicon nutzen – ebenfalls unabhängig von der Reihenfolge, in der sie aufgeführt werden.
—Jonathan Neal, Understand the Favicon

Die Browser aber, die es unterstützen, können wir mit nur einem kleinen bisschen Code davon überzeugen:

<link rel="icon" href="path/to/icon/favicon.png">

hinzufügen Eines speziellen Icons für IE10/Windows8-Nutzer, die Ihre Seite auf dem Desktop „pinnen“

Jonathan Neal fasst es handlich zusammen:

Mit IE10 Metro können wir ein unverwechselbares Icon darstellen, wenn der Besucher unsere Seite an seinen Startbildschirm pinnt. Diese Titel-Icons sind PNG-Dateien in 144×144 und sollten für die hübschesten Ergebnisse einen transparenten Hintergrund nutzen. Eine Hintergrundfarbe kann per Hexadezimal-RGB-Farbe definiert werden (mit der Notation #RRGGBB), per CSS-Farbname oder per RGB()-Funktion in CSS. Die Umsetzung ist ziemlich einfach.

<meta name="msapplication-TileColor" content="#D83434"> 
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

—Jonathan Neal, Understand the Favicon

Hinzufügen eines speziellen Icons, das IOS-Geräte für Lesezeichen nutzen

<link rel="apple-touch-icon" href="path/to/icon/apple-icon-touch.png">
Letztes Update: 20. Mai 2014