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.
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.
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:
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.
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:
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.
Hinterlasse einen Kommentar