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.
Ich schneide meist meine Icons mit Photoshop zu und erstelle das Favicon zum Schluss mit einem der vielen Onlinedienste.
Ich verlinke jetzt bewusst keinen bestimmten. Am besten bei Google „favicon generator“ eingeben und prüfen welches Tool einem zusagt.
Deine Empfehlung geht leider nicht weit genug. Das .ico Format kann mehr als eine Größe enthalten. Daher würde ich dazu raten, dass man mit einem Favicon-Generator wie z.B. dem von Dynamic Drive ein Icon mit allen drei Größen erzeugt.
Mit dem im Text erwähnten X-Icon Editor kann man seine Favicons nicht nur grafisch bearbeiten, sondern auch in vier Formaten als .ico downloaden. Leider veralten Artikel, die an der Schwelle zu Retina und responsive Design geschrieben worden sind, sehr schnell, ich komme mit dem Updaten der Inhalte kaum noch hinterher, da so extrem schnell neue Tools und neue Methoden entstehen … Vielen Dank für deinen Tipp! Ich werde mir den Generator ansehen.