Das Favicon und die .ico Datei

Das Favicon, die Krone jeder Website, soll ab heute auch meine Seite schmücken. Ich will den Granat, der das Logo von Granaton wurde, dafür verwenden. Dafür muss ich ein echtes Icon im .ico Format generieren, das ich in meine Seite einbaue. Warum brauche ich eine originäre .ico Datei und nicht einfach ein PNG Format? Weil nur ein echtes Favicon in allen Plattformen angezeigt wird. Die meisten Browsertabs verstehen zwar bereits andere Formate, doch wenn man die Seite verlinkt, beispielsweise in sozialen Profilen, so werden häufig nur Ico Dateien angezeigt.

Ein .ico Format offline erzeugen

Wer mit Adobe Photoshop arbeitet, kann für alle Versionen der Software von der Webseite Telegraphics ein kleines Plugin herunterladen, mit dem Photoshop auch .ico Dateien generieren kann. Einfach das entpackte Plugin in den Programmordner Adobe – Photoshop – Zusatzmodule – Dateiformat verschieben – et voilà! Nun kann Photoshop auch Dateien im .ico Format speichern. Das fertige Bild soll favicon.ico heißen und dort platziert werden, wo auch die wp-config.php Datei zu finden ist.

Favicon-Generatoren online

Wer online ein Favicon erzeugen möchte, dem empfiehlt Christian Feneberg in einem Kommentar zu diesem Beitrag, einen Favicon Generator zu verwenden. Ich gehe dem Vorschlag nach, probiere einige Generatoren aus und bin begeistert von Favicon.cc. Dieses hübsche Onlinetool hat alles, was man braucht, um ein auf allen Plattformen funktionierendes Favicon zu erzeugen. Entweder von einer hochgeladenen Bilddatei, oder auch ganz neu gestaltet. Einen Nachteil hat Favicon.cc allerdings: Dieses Tool kann nur traditionelle Favicons in der Größe von 16×16 Pixeln erzeugen. Wenn man lediglich horizontale und vertikale Linien im Logo hat, kann das völlig ausreichend sein. Doch bei diffizileren Grafiken oder Rundungen sollte man auf einen anderen Generator zurückgreifen: X-Icon Editor. Der Unterschied zu Facvicon.cc liegt in den download-Möglichkeiten begründet. Mit X-Icon Editor kann man auch Favicons in 32×32 Pixeln und größer erzeugen. In Zeiten von Retina und hohen Auflösungen ist dies notwendig, damit Favicons scharf, nicht pixelig dargestellt werden. Es ist ein minimaler Größenunterschied, den man nur dann in Kauf nehmen sollte, wenn man zarte Details oder Kurven in seinem Favicon hat. Dann lohnt es sich, seine Homepage ein paar minimale KB schwerer zu machen. Meine Empfehlung geht generell in die Richtung, nur noch 32×32 Pixel Favicons zu erzeugen.

Nun habe ich mein Favicon, jetzt muss ich es auch in meine Seite einbauen. Frank Bültge weiß, wie es geht.

Wenn ich schon dabei bin, Favicons zu generieren, dann mache ich auch gleich die Apple-Touch Varianten. Diese Icons müssen keine Favicons sein, sie sollen im PNG Format vorliegen. Das Apple Touch Icon (57×57 Pixel), benannt „apple-touch-icon.png“. Das Apple Touch Icon für iPads (72×72 Pixel) namens „apple-touch-icon-72×72.png“. Und dann noch das Apple Touch Icon für high-resultion iPads und iPhone Retina Displays (114×114 Pixel), mit dem Namen „apple-touch-icon-114×114.png“.

Alle meine Favicons bette ich über eine eigene Codezeile pro Datei in meine Header-Datei meines Themes ein. Viele Themes haben eine eigene Upload Option für den Einbau von Favicons, aber eigenartigerweise verstehen manche sozialen Plattformen keine Favicons, wenn sie nicht direkt im Rootverzeichnis liegen. Wenn ich meine Website beispielsweise in mein Google+ Profil integriere, wird das Favicon nicht angezeigt, sollte es in einem Unterordner platziert sein. Ich frage nicht, woran das liegt, sondern schreibe lieber den Code manuell direkt in den Header des Themes. Man kann Favicons auch über Plugins einbetten. Es gibt eine Reihe davon, die alle funktionieren. Leider habe ich bisher keines entdeckt, das alle drei Apple Touch Icons gleichzeitig einbetten kann. Und jedes Plugin beschwert die WordPress Installation, deshalb sollte man sie, wenn möglich, vermeiden.

Den Favicon-Code in der Header-Datei meines Themes gestalte ich folgendermaßen:

<!-- Favicons
==================================================
–>

<link rel=“Shortcut Icon“ type=“image/x-icon“ href=“<?php bloginfo(‚url‘); ?>/favicon.ico“ />
<link rel=“Icon“ type=“image/x-icon“ href=“<?php bloginfo(‚url‘); ?>/favicon.ico“ />
<link rel=“apple-touch-icon“ type=“image/x-icon“ href=“<?php bloginfo(‚url‘); ?>/apple-touch-icon.png“/>
<link rel=“apple-touch-icon“ sizes=“72×72″ type=“image/x-icon“ href=“<?php bloginfo(‚url‘); ?>/apple-touch-icon-72×72.png“/>
<link rel=“apple-touch-icon“ sizes=“114×114″ type=“image/x-icon“ href=“<?php bloginfo(‚url‘); ?>/apple-touch-icon-114×114.png“/>

Fertig ist mein Favicon. Hübsch, dieses kleine Ding da oben. :D

Das Logo einer Website sollte man übrigens, ebenso wie die Apple-Touch Icons, als PNG-Datei anlegen, um den Hintergrund transparent zu gestalten. Das Logo einer Website ist ein großes Thema, dem werde ich mich in späteren Artikeln widmen.