Was ist ein Favicon?
Ein Favicon ist ein kleines Symbol mit 16 x 16 oder 32 x 32 Pixel, das zum Branding einer Webseite dient. Dieses Zeichen erleichtert Besuchern das Auffinden und Wiedererkennen einer Seite, wenn zum Beispiel im Browser mehrere Registerkarten geöffnet sind. Aufgrund ihrer geringen Größe eignen sich Favicons am besten als einfache Bilder oder als ein bis drei Zeichen Text. Favicons sind nicht mit Logos zu verwechseln, auch wenn sie manchmal gleich aussehen. Aufgrund seiner geringen Größe und Auflösung kann das Favicon möglicherweise nur ein kleineres Abbild oder Teil des ursprünglichen Logos eines Unternehmens sein. [1]
Warum sind Favicons wichtig?
Das Wort Favicon setzt sich aus den englischen Begriffen „favorite“ und „icon“ zusammen. Favicons dienen zum eindeutigen Identifizieren einer Webseite, deshalb werden sie oft als Lesezeichen, auf Registerkarten, in Suchmenüs, als App-Symbol, Browserverlauf oder in Verkaufsergebnissen abgebildet. Besonders nützlich sind diese Zeichen auf Smartphone- und Tablet-Displays, sowie auf anderen mobilen Endgeräten.
Das Erstellen eines Favicons ist ein kleiner, aber wichtiger Schritt zum Einrichten einer Unternehmenswebsite. Es verleiht der Website Legitimität und stärkt das Online-Branding sowie das Vertrauen potenzieller Verbraucher. Favicons sind eine visuelle Markierung für die Website. Diese Zeichen ermöglichen eine einfache und schnelle Identifizierung der Seite für Webbenutzer. Sie vereinen alle verschiedenen Browser-Komponenten zu einem gut markierten Browser-Erlebnis. [2]
Ein Favicon hilft bei der Suchmaschinenoptimierung
Favicons sind nicht direkt für die Suchmaschinenoptimierung verantwortlich, sie sind jedoch indirekt verantwortlich und ein wichtiges Instrument zur Verbesserung des Rankings in Suchmaschinen. Hier sind einige Beispiele, wie ein Favicon bei der SEO helfen kann:
Benutzerfreundliche Websites führen zu einer verstärkten Nutzung
Eine benutzerfreundliche Website verbessert indirekt das Suchmaschinen-Ranking. Wird auf Browser-Registerkarten, Lesezeichen, Verlaufsarchiven usw. ein Favicon angezeigt wird, können Benutzer Zeit sparen, indem sie eine Website problemlos identifizieren und durchsuchen können. Dadurch erhöht sich die Wahrscheinlichkeit einer Benutzerinteraktion mit einer Website. Dies verbessert den Zeitaufwand und die Interaktion mit einer Website. Das bedeutet, dass mehr Augen länger auf eine Website gerichtet sind, wodurch die SEO verbessert wird. [3]
Ein Favicon dient als Lesezeichen
Ein Favicon auf einer Webseite bietet einen Vorteil gegenüber Websites, die keine verwenden. Der Chrome-Browser von Google zieht bestimmte Suchranking-Signale für Websites ab, die im Web mit Lesezeichen versehen sind. Anbieter, die kein Favicon auf ihrer Website haben, verpassen die Chance, im Chrome-Browser mit einem Lesezeichen versehen zu werden. Das macht sich unter Umständen direkt im Suchranking bemerkbar. Durch gut platzierte Favicon-Lesezeichen sticht eine Seite visuell hervor, wodurch Besucher besser in der Lage sind sich an eine Seite zu erinnern und erneut zu besuchen. Das erhöht den Traffic einer Webseite und die SEO.
Branding und Sichtbarkeit
Ein Favicon ist eine visuelle Darstellung der Website und eines Unternehmens, Organisation oder Privatperson. Anhand dieses Zeichens kann sich ein Benutzer eine Marke wiedererkennen und mit einer Marke identifizieren. Beim SEO dreht sich alles um Branding und Marketing. Je sichtbarer eine Website ist, desto mehr Benutzer klicken wahrscheinlich auf diese Website und erinnern sich, zu wem das Branding gehört. [4]
Ein gutes Favicon erstellen
Bei der Erstellung und Gestaltung eines Favicons für eine Website müssen einige Dinge berücksichtigt werden. Obwohl das Zeichen klein und einfach ist, kann (und sollte) es eine große Wirkung haben. Ebenso wichtig ist es, dass bestmögliche Favicon zu erstellen, da sich Benutzer mit der Marke identifizieren. Hier sind einige Kriterien, die bei der Erstellung eines Favicons zu beachten sind:
Einfachheit
Obwohl das Favicon das visuelle Gesicht einer Marke ist, sollte das Design so einfach wie möglich gehalten werden. Die besten Favoriten sind die einfachsten. Aufgrund der geringen Größe des Favicons und der Einfachheit der verwendeten Formen sind Farben entscheidend, um die Aufmerksamkeit potenzieller Verbraucher auf sich zu ziehen und aufzufallen. Zu viele Details lassen das Favicon nur überladen und chaotisch aussehen.
Markenidentität
Das Favicon ist das visuelle Symbol für eine Marke und sollte den Benutzern visuell mitteilen, was ein Unternehmen darstellt. Dieses Zeichen sagt ihnen sofort, worum es bei einer Marke geht und was sie tut. Obwohl dies mit einem so kleinen und einfachen Design sehr schwierig ist, sollten Entwickler versuchen, kreativ zu sein. Kleine, kreative Icons besitzen eine große Kraft.
Abkürzung
Das perfekte Bild zu finden, ist für das, was ein Unternehmen tut, möglicherweise nicht praktikabel. Eine gängige Lösung hierfür ist die Verwendung des ersten Buchstabens des Firmennamens oder der Akronyme. Entwickler können auch eine Abkürzung für den Firmennamen verwenden. Spielen Sie mit verschiedenen Variationen und wählen Sie die für Sie am besten geeignete aus.
Farbabstimmung
Auch die Farbauswahl ist sehr wichtig. Kontrastfarben erleichtern dem Auge das Erkennen von Formen und den Schwerpunkt des Favicons. Aufgrund der geringen Anzahl von Favoriten müssen Entwickler ein Unternehmen dem Benutzer gegenüber klar darstellen. Dabei kann die Verwendung von Farben kann von entscheidender Bedeutung sein. Zu beachten ist, dass alle Browser die Farben leicht unterschiedlich darstellen. Einige haben beispielsweise einen grauen, schwarzen oder weißen Hintergrund, über das Favicon gelegt wird. [5]
Welche Größe sollte ein Favicon haben?
Im Allgemeinen haben diese Zeichen eine Größe von 16 x 16 oder 32 x 32 Pixel. So können sie in allen Browsern verwendet werden. Es gibt jedoch Ausnahmen:
- 24 x 24 px – für Internet Explorer 9
- 32 x 32 px – Neue Registerkarte in Internet Explorer, Taskleistenschaltfläche in Windows 7+ und Safari-Seitenleiste „Später lesen“
- 57 x 57 px – Standard-iOS-Startbildschirm (iPod Touch, iPhone der ersten Generation bis 3G)
- 72 x 72 px – iPad-Startbildschirmsymbol
- 96 x 96 px – wird auf der Google TV-Plattform verwendet
- 114 x 114 px – iPhone 4 Startbildschirm (doppelte Standardgröße für das Retina-Display
- 128 x 128 px – Chrome Web Store
- 195 x 195 px – Opera Kurzwahl [6]
Verwendete Bildformate für Favicons
Windows ICO
Dieses Format ist die am häufigsten unterstützte Datei. Der Vorteil des ICO besteht darin, dass es mehrere Auflösungen und Bittiefen enthalten kann, was sehr gut funktioniert und besonders für Windows nützlich ist. ICO bietet auch ein 32-Pixel-Symbol, das für die Windows 7-Taskleiste von Internet Explorer nützlich ist. Es ist auch das einzige Format, das das -Element nicht verwendet. [6]
Portable Network Graphics (PNG)
Das PNG-Format ist aus verschiedenen Gründen nützlich. Zum Entwerfen werden keine speziellen Tools benötigt, was das Format sehr benutzerfreundlich macht. Es gibt uns die kleinstmögliche Dateigröße und unterstützt Alpha-Transparenz. Ein großer Nachteil dieses Stils ist jedoch, dass Internet Explorer keine PNG-Datei, sondern nur ICO-Dateien unterstützt.
Scalable Vector Graphics (SVG)
Dieses Format wird von Opera und einigen anderen Browsern unterstützt.
Graphics Interchange Format (GIF)
Dieses Format bietet keine Vorteile außerhalb der Verwendung in alten Browsern. Während animierte GIFs mehr Aufmerksamkeit auf Benutzer lenken sollen, neigen sie eher dazu, Besucher zu irritieren. Der allgemeine Konsens ist, dass sie in keiner Weise von Vorteil sind.
Joint Photographic Experts Group (JPG)
Kann überall verwendet werden. Die Auflösungsqualität ist jedoch geringer als bei PNG.
Animated Portable Network Graphics (APNG)
Dies ist eine animierte Version von PNG. Wird von Opera und Firefox unterstützt.
Die Verwendung eines Favicon-Generators
Im Web werden zahlreiche kostenlose und kostenpflichtige Favicon-Generatoren angeboten. Mit einem Favicon Generator können Benutzer Favicons für den persönlichen oder kommerziellen Gebrauch erstellen. Der Generator sollte ständig aktualisiert werden, um mit den neuesten HTML5-, CSS- und JavaScript-Techniken Schritt zu halten.
Ein Favicon für HTML zu erstellen, ist mit diesen Werkzeugen unkompliziert und dauert nur ein paar Minuten. In den meisten Fällen reicht es, das Bildformat und die Pixel-Größe anzugeben, einige Generatoren erlauben weitere Einstellungen. Die Bilder werden dann automatisch für die bekannten Desktop-Browser, Tablets und mobile Endgeräte generiert.
Sobald die Datei favicon.ico erstellt wurde, kann diese in das Stammverzeichnis der Website hochgeladen werden. Danach sollte der folgende Code in der Kopfzeile des HTML-Quelltexts eingebunden werden. [7]