Ein Favicon im Webdesign – was bringt’s?

Was sind Favicons? – und was bringen die überhaupt? Das erfährst Du in diesem Beitrag.

Was ist ein Favicon?

Das Wort „Favicon“ setzt sich aus den englischen Wortteilen „fav(ourite)“ (zu Deutsch: bevorzugtes, Lieblings-) und „icon“ (Symbol) zusammen. Und es bezeichnet eine kleine quadratische Grafik, die in der Tableiste des Browsers erscheint, wenn die Website geöffnet wird. In der Regel handelt es sich um das Signet der Firma oder einen Teil der Corporate Identity. Bei Billomat ist es zum Beispiel ein Teil des Logos (siehe unteres Bild).

Ein Favicon muss entweder 16×16 Pixel oder 32×32 Pixel groß sein. Es sollte möglichst leicht zu erkennen sein, Wiedererkennungswert in Bezug auf deine Website haben und sich von anderen unterscheiden. Und es ist ganz einfach zu erstellen.

Wie kannst Du ein Favicon erstellen?

Man nimmt die Originalgrafik, im Fall von Billomat eine Grafik in Form einer Wolke, und verkleinert sie mit einem einfachen Grafikprogramm auf die Größe 16×16 oder 32×32 px. Im Windows Explorer oder im Finder (Mac) kann man die Dateiendung von Hand ändern. Statt bspw. der Endung „.jpg“ schreibt man die Datei einfach zu „.ico“ um. Anschließend lädt man sie in das Root-Verzeichnis der Website hoch. Möglichkeiten hierfür findest Du zum Beispiel in dieser Anleitung.

Das Favicon von Billomat ist zum Beispiel die grün-graue Wolke. Sie ist in derselben Farbe gehalten wie der Billomat Styleguide bzw. das Corporate Design.

Welchen Zweck erfüllt ein Favicon?

Wenn eine Website aufgerufen wird, dann ist sie an dem Favicon erkennbar, wenn du zum Beispiel mehrere Tabs geöffnet hast. Das Favicon stärkt den Wiedererkennungswert deiner Website und deines Logos, und deine Website hebt sich auf diese Weise von allen anderen ab.