Was ist ein Favicon?

Als Favicon werden die kleinen Grafiken bezeichnet, die im Browser links neben der URL beziehungsweise im Browser-Tab angezeigt werden, wenn eine Website aufgerufen wird. Die kleinen Icons und Piktogramme sind meistens eine verkleinerte oder abstrakte Version des Logos und fördern den Wiedererkennungswert der Website.

Der Begriff Favicon selbst setzt sich dabei aus den englischen Wörtern „favourite“ und „icon“ zusammen. Manchmal wird auch das Wort „Favoriten-Symbol“ verwendet.

20 Profi-Tipps für die perfekte Unternehmens-Website

Für Ihren erfolgreichen Internetauftritt müssen Sie viel beachten. Wir geben Ihnen kostenfrei Tipps für Ihre perfekte Website.

  • Aufbau
  • Inhalt
  • Technik
  • Rechtliches
Kostenfrei anfordern!
20 Tipps für die perfekte Untenrehmens-Website Vorschaubild

Ursprung und Geschichte des Favicon

Das Favicon geht auf den Launch des Internet Explorers 5 im Jahr 1999 zurück. Mit diesem Browser-Update veröffentlichten die Entwickler von Microsoft erstmals ein Feature, das es erleichtern sollte, bestimmte Websites schneller wieder zu finden, die zuvor in einer unübersichtlichen Favoriten-Liste abgespeichert worden waren.

Zu diesem Zweck hatte der Entwickler Bharat Shyam die Idee, neben den Website-Namen nun auch noch ein Icon in der Größe von 16 x 16 Pixel in den HTML-Code einzubinden, um die verschiedenen Internetseiten besser voneinander zu unterscheiden. Auf Shyam geht nicht nur das Feature selbst, sondern auch der Name „Favicon“ zurück.

Wo ist das Favion?

1. Favicons in der Desktop-Ansicht

Favicons werden an verschiedenen Schnittstellen einer Internetsuche sowohl in der Desktop-Ansicht als auch im Browser auf mobilen Endgeräten angezeigt. So finden sich die kleinen Symbole nicht nur neben der URL und im Browser-Tab, sondern auch in der Browser-History, den Lesezeichen und in der Toolbar eines Browsers. Darüber hinaus erscheinen sie außerdem in den Suchergebnissen von Google und Co. Beispiele sind das stilisierte „W“ der Enzyklopädie Wikipedia oder das bunte „G“ von Google.


Beispiel für ein Favicon im Browser-Tab

2. Favicons in der mobilen Ansicht

Eine fast noch größere Rolle als am Desktop spielen Favicons auf mobilen Endgeräten. Dort werden sie nämlich als App-Icon auf dem Home Screen und in der eigenen App-Bibliothek angezeigt. Darüber hinaus finden sie sich außerdem in Apples App-Store oder dem Android Playstore. Damit sind sie quasi an sämtlichen Stellen, an denen ein User oder eine Userin mit einer App interagieren will, der erste Touchpoint.

3. Favicons im Windows-Startmenü

Neben der Sichtbarkeit am Desktop und auf Smartphones und anderen mobilen Geräten können die kleinen Icons auch im Windows-Startmenü angezeigt werden. Wird eine Website dort abgelegt, wird das Favicon als Verknüpfung platziert. Damit funktioniert das Symbol, ähnlich wie das App-Icon, als Link zur Website oder App.

Kostenfreie Online Marketing Beratung

Steigern Sie Ihre Reichweite und werden Sie sichtbar für Ihre Kunden!

Kostenfrei beraten lassen!

Wie mache ich ein Favicon?

Um für eine Website oder App ein Favicon für HTML zu erstellen, ist es am leichtesten, mit dem Unternehmenslogo zu starten. Bestenfalls kann es einfach in ein kleineres Format konvertiert werden. Bei aufwendigeren Logos bietet es sich an, eine stark vereinfachte oder abstrakte Version zu erstellen, am besten in den Farben des Corporate Designs. Ein gutes Beispiel dafür ist das kleine weiße „f“ auf blauem Hintergrund der Social-Media-Plattform Facebook. Während der ausgeschriebene Name deutlich zu groß für ein Favoriten-Symbol ist, hat allein der erste Buchstabe in Kombination mit der Unternehmensfarbe einen enormen Wiedererkennungswert.

Auch wenn es auf den ersten Blick kompliziert scheint, ist das Erstellen eines Favicons heutzutage dank diverser (kostenfreier) online Generator-Tools nicht mehr nur Grafikdesignern vorbehalten. Solche Generatoren oder Converter können beispielsweise Dateien wie JPEG, PNG oder GIF eines vorhandenen Logos in eine ICO-Datei umwandeln. ICO ist dabei eines der Dateiformate, in denen Favoriten-Symbole abgespeichert werden können, um sie später in Websites zu integrieren.

Neben dem standardmäßigen .ico Format gibt es noch einige weitere, die in verschiedenen Szenarien sinnvoll sein können:

  • SVG: diese Vektorgrafik kann ohne Qualitätsverlust beliebig klein oder groß skaliert werden
  • JPG: dieses komprimierte Dateiformat spart Speicherplatz, geht aber mit Qualitätsverlust einher
  • GIF: spart Speicherplatz und ermöglicht schnelle Ladezeiten
  • PNG: besonders geeignet für kleine Dateien mit hoher Qualität und bei Bedarf transparentem Hintergrund

Am einfachsten ist die Umwandlung des existierenden Logos in ein quadratisches Favicon, wenn es selbst ebenfalls bereits quadratisch ist. Hat das Logo ein anderes Format, müssen gegebenenfalls Teile abgeschnitten oder ein kleinerer Ausschnitt ausgewählt werden.

Online-Marketing für KMU – E-Book kostenfrei anfordern!

So einfach gelingt kleinen und mittleren Unternehmen der Einstieg ins Online-Marketing!

  • Online-Strategien erfolgreich planen

  • Checkliste für Ihre perfekte Website

  • Bausteine für Ihren Social-Media-Erfolg

  • Tipps für profitable Online-Werbung

Mehr erfahren
Vorschaubild E-Book Einstieg ins Online-Marketing

Wie groß muss ein Favicon sein?

Die ideale Größe richtet sich nach den jeweiligen Anforderungen von Browsern sowie den mobilen Betriebssystemen Android und iOS. Damit das Symbol an allen Schnittstellen angezeigt werden kann, werden heutzutage viele verschiedene Auflösungen benötigt.

Diese Bildgröße in Pixel sollte ein Favicon je nach Verwendungszweck haben:

  • Browser: 16 x 16, 32 x 32, 48 x 48, 96 x 96
  • Microsoft Windows: 70 x 70, 150 x 150, 310 x 150, 310 x 310
  • Android: 36 x 36, 48 x 48, 72 x 72, 96 x 96, 144 x 144, 192 x 192
  • iOS: 57 x 57, 60 x 60, 72 x 72, 76 x 76, 114 x 114, 120 x 120, 152 x 152, 180 x 180

Zwar erscheint es sehr aufwendig, ein so kleines Icon in so vielen Auflösungen zu generieren. Mithilfe eines Converters oder Generators kann jedoch einfach die gewünschte Größe sowie das Zielformat angegeben und das Favoriten-Symbol entsprechend automatisch erstellt werden. Unter dem Stichwort „Favicon free“ finden sich bei Google diverse kostenlose Tools.