So erstellst du ein retina-taugliches Favicon: die Grundlagen in aller Kürze

15.08.2014 von

So erstellst du ein retina-taugliches Favicon: die Grundlagen in aller Kürze

Oft simpel, manchmal ein kleines Kunstwerk aus Pixeln, häufig schweißtreibend und manchmal leider einfach vernachlässigt: Das Favicon.

Favicon ist ein Kunstwort aus den beiden Wörtern “Favorite” und  “Icon”. Es bezeichnet die kleinen Bildchen, die eine Website in der Adressleiste, den Browser-Tabs und anderen Stellen im Browser und dem Betriebssystem begleiten.


Wie euch vielleicht aufgefallen ist haben wir selbst vor Kurzem unser Favicon gewechselt. Das kleine weiße Männchen, ein Übrigbleibsel aus den Anfängen von smooster, ist einem schlichten S gewichen.

Wie euch vielleicht aufgefallen ist haben wir bei smooster selbst vor Kurzem unser Favicon gewechselt.


Für die Erstellung unseres neuen Favicon habe ich einige Daten und Tools recherchiert, die ich in diesem Artikel gerne mit euch teilen möchte. Los geht’s!


Favicon-Maße

Favicons in verschiedenen Größen dienen verschiedenen Zwecken. Hier die beiden wichtigsten Größen:

  • 16px x 16px - Wird von in der Adresszeile und den Tabs der bekannten Browser verwendet (Safari, Internet Explorer, Chrome usw)
  • 32px x 32px - Bildschirme mit hoher Auflösung (z. B. Retina) verwenden diese Größe


Wenn ihr auf Nummer Sicher gehen wollt, könnt ihr noch diese zwei Größen hinzunehmen und damit weitere Bereiche abdecken:

  • 24px x 24px - angeheftete Seiten in IE9
  • 64px x 64px - Safari Leseliste (Retina) und Windows Seiten Icons


Transparenz und Details - So erstellst du dein Favicon

Schaut man sich einmal die Favicons verschiedener Seiten an, dann fällt auf, dass es sich häufig um das Logo der Marke handelt. Aufgrund der geringen Größe von oft gerade einmal 16x16 Pixeln ist es aber ratsam komplexe Logos zu vereinfachen oder reine Wortmarken auf wenige Farben und Buchstaben mit Wiedererkennungswert herunterzubrechen. Hier  Beispiele bekannter Websites:

Favicons bestehen oft aus einer vereinfachten Form von dem Logo der Marke.


In unserem Fall habe ich das S zunächst in einer sehr hohen Auflösung als PNG mit transparentem Hintergrund erstellt und es dann für die kleineren Versionen angepasst. Dazu habe ich das Tool X-Icon Editor verwendet, das auch die Anpassung der Größen für mich übernommen hat:

Wir haben das Favicon mit dem Tool X-Iconeditor an die verschiedenen Größen angepasst.


Da es sich in diesem Fall um ein sehr simples Icon handelt, war das ohne große Verluste möglich. Bei einem komplexeren Logo empfiehlt es sich aber mit einem Bildbearbeitungsprogramm wie Photoshop oder Pixelmator nachzubessern. Dabei sind Transparenz und pixelgenaue Arbeit erforderlich um ein klares Ergebnis zu erzielen.


An dem Beispiel des Favicon von Google Drive kann man gut erkennen, wie viel Mühe in den Details eines Favicon stecken kann:

An dem Favicon von Google Drive kann man gut erkennen, wie viel Mühe in den Details eines Favicon stecken kann


Fast fertig - Speichern und Einbauen

Manche Browser akzeptieren zwar auch PNG-Dateien, die häufigste und sicherste Lösung ist aber dein Favicon mit der Dateiendung ICO abzuspeichern.  


Da es sich hierbei nicht um ein Standard-Dateiformat handelt, hast du verschiedene Möglichkeiten:

  • ICO (Windows Icon) Format - Mit diesem Plugin für Photoshop von Telegraphics kannst du dein fertiges Favicon als ICO abspeichern. 
  • Außerdem ermöglichen dir Tools wie X-Icon Editor (kostenlos) oder IcoFX (30 tägige Testversion) dein Favicon in mehreren Größen innerhalb einer Datei zu speichern

Ich habe selbst nur X-Icon Editor verwendet und war damit sehr zufrieden.


Da die Browser oder Betriebssysteme immer nur auf eine Datei mit dem Titel favicon.ico zugreifen, ist es wichtig die verschiedenen Größen als Ebenen innerhalb dieser einen ICO-Datei abzuspeichern.

Kümmerst du dich selbst um den Code deiner Website? Dann kannst du jetzt das fertige Icon in einem Ordner deiner Wahl ablegen. Abschließend musst du dann nur noch den folgenden Codeschnipsel in den HEAD-Bereich der Startseite einbauen:

<link rel="shortcut icon" href="pfad-des-bildes/favicon.ico" />

Wenn du smooster mit der Umsetzung deiner Website beauftragst, kannst du uns einfach dein Favicon zusammen mit den grafischen Entwürfen zuschicken - wir bauen es dann für dich ein.



Favicons für Fortgeschrittene

Dieser Artikel behandelt die Grundlagen zum Thema Favicon. Wenn du selbst mit HTML, CSS und JavaScript arbeitest und noch mehr wissen möchtest, empfehle ich dir einen Blick in den ausführlichen Favicon Cheatsheet von Audrey Roy Greenfeld auf Github (engl.)


Eine noch relativ neue Art von Favicons nutzt die die Möglichkeiten moderner Browsertechnologien um das Favicon durch Animationen zu erweitern. Bei Gmail z.B. gibt es eine Funktion um die Anzahl ungelesener Emails direkt im Tab innerhalb des Favicons anzuzeigen.

Eine noch relativ neue Art von Favicons nutzt die die Möglichkeiten moderner Browsertechnologien um das Favicon durch Animationen zu erweitern.


Auch Github verwendet eine ähnliche Animation und bietet den Code (favico.js) dafür hier frei zugänglich an. Leider werden diese erweiterten Favicons aber noch nicht von allen Browsern unterstützt.


Hast du noch Favicon-Tipps oder Tools mit denen du gute Erfahrungen gemacht hast? Erzähl mir davon in den Kommentaren.


zurück
comments powered by Disqus