Favicons sind die kleinen Bildchen, die Sie im Browser neben den Lesezeichen und oben in den Tabs finden. Die Favicons werden in der Adressleiste eines Webbrowsers neben der URL einer Webseite angezeigt. Sie werden auch auf der Registerkarte angezeigt, wenn Sie mehrere Webseiten in einem Browser öffnen. Der Begriff „Favicon“ steht für „Favoriten-Ikon“ und ist eine Kombination aus den englischen Wörtern „favorite“ (Favorit) und „icon“ (Ikon).
Informationen gemäss Stand vom 17.12.2024
Favicons sind in der Regel eine grafische Darstellung des Logos oder eines anderen markanten Merkmals einer Website und helfen den Benutzern, die Website leichter in einer Reihe von geöffneten Tabs oder in ihren Lesezeichen zu identifizieren. Sie sind normalerweise im Format .ico, können aber auch in anderen Formaten wie .png oder .svg vorliegen.
Um ein Favicon zu erstellen, entwerfen Webdesigner ein kleines, quadratisches Bild, das dann in den HTML-Code der Webseite eingefügt wird. Der Webbrowser liest diesen Code und zeigt das Favicon entsprechend an.
Benötigt man diese Dinger überhaupt? Favicons sind praktisch zum Webdesign-Standard geworden. Sie zeugen nicht nur für die Liebe zum Detail, sondern sind ein kleines Stück Corporate Identity.
Grundlagen Favicons
Favicons sind lediglich 48 × 48 (oder ein mehrfaches davon) Pixel grosse Grafiken, die unter dem Namen favicon.ico gespeichert werden. Moderne Browser erkennen die Favicons nicht nur im ICO-Format, sondern auch PNG oder GIF.
Wie kommen Sie zu einem Favicon?
Hier gibt es verschiedene Möglichkeiten. Entweder Sie haben bereits eine Grafik, die sich als Favicon eignet oder Sie zeichnen eines. Da Sie jedoch nur wenige Pixel zur Verfügung haben, eignen sich nur sehr Detail-schwache Grafiken.
-
Generator nutzen
chami.com/html-kit/services/favicon/
sowie:
genfavicon.com
sowie
favicon-generator.org/editor/
sowie
www.xiconeditor.com -
Kreativität nutzen
Zeichnen Sie ihr eigenes Favicon. Dazu benötigen Sie nicht mal ein Bildbearbeitungsprogramm. Öffnen Sie in Ihrem Browser den Link degraeve.com/favicon/, wählen Sie jeweils eine Farbe aus und erfinden Sie Ihr eigenes Favicon.
Genauso geht das mit favicon.cc. Auf dieser Website finden Sie viele Favicons zum Ansehen, die Ihnen Inspiration für eigene Kreationen bieten. -
Eigenes Bildbearbeitungsprogramm verwenden
Geht natürlich auch. Zeichnen Sie Ihre Grafik und speichern Sie es im Format .ico. -
Profi einsetzen
Wer kein geeignetes Bild hat und keine Lust noch Zeit für die Gestaltung hat, fragt einfach einen Profi. Für Grafiker und Webdesigner sind die Herstellung eines Favicons kein Problem. -
Google Suchmaschine
Wenn es für Ihre Webpräsenz ein Favicon gibt, kann dieses in die Google-Suchergebnisse aufgenommen werden. Lesen Sie dazu die Google Richtlinien. -
Cross-Browser-Kompatibilität
Es ist wichtig, sicherzustellen, dass Ihr Favicon in verschiedenen Browsern korrekt angezeigt wird. Manche Browser haben spezifische Anforderungen oder unterstützen bestimmte Formate besser.
Wie wird ein Favicon manuell eingebettet?
Befördern Sie das favicon.ico per FTP in das Root Ihres Webservers. Die Anweisung ein Favicon einzubetten kommt in den Header einer jeden Internetdatei. Der Code lautet dafür:
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="favicon.png">
Favicon mit einem Content-Management-System
Moderne CMS bieten eigene Lösungen, um das Favicon einfach und schnell in das Design zu integrieren.
Fazit
„Favicons sind ein kleiner, aber wichtiger Teil der Online-Präsenz einer Website, der oft übersehen wird. Sie spielen eine wichtige Rolle in der visuellen Identität einer Marke im digitalen Raum.“
Autor: Walter B. Walser, kundennutzen.ch
