Skip to main content

Favicon


PDF herunterladen

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.

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.

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.

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.

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.

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

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.

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:

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Cumulative Layout Shift (CLS)

Was ist der Cumulative Layout Shift (CLS)? Der Cumulative Layout Shift ist ein Wert, der Teil der Core Web Vitals von Google ist und angibt, wie stark sich eine Webseite während des Ladeprozesses der einzelnen Elemente im Browser verändert, ohne dass der Nutzer Einfluss darauf nimmt. Je besser (sprich: niedriger) […]

Page Experience

Was ist die Page Experience? Die Art und Weise, wie Google Webseiten im Internet sortiert, ändert sich im Juni 2021: Seit diesem Zeitpunkt gilt die Page Experience als neuer Ranking-Faktor im komplizierten Google-Algorithmus. Die Page Experience steht im engen Zusammenhang mit den Core Web Vitals von Google und bezieht moderne […]

W-Fragen

Die W-Fragen des digitalen Marketings Um an die notwendigen Informationen für eine gute Story zu bekommen, verwenden Journalisten die so genannten W-Fragen (zum Beispiel: wer, wo, was, wie, wann und warum). Die Beantwortung der grundlegenden Fragen, helfen den Journalisten, eine gute Geschichte zu schreiben. Auch im digitalen Marketing können diese […]

Künstliche Intelligenz (KI)

Was ist künstliche Intelligenz? Die künstliche Intelligenz (KI) ist ein Teilgebiet der Informatik, die sich mit der Automatisierung von intelligentem Verhalten und maschinellem Lernen beschäftigt. Mit der künstlichen Intelligenz wird versucht, menschliches Denken mithilfe selbstlernender Computer-Programme zu simulieren. In der Wirtschaft kommt KI bereits häufig zum Einsatz. Künstliche Intelligenz: Definition […]

Chatbot

Was ist ein Chatbot? Ein Chatbot ist ein textbasiertes Dialogsystem, mit dem User per Texteingabe oder Sprache kommunizieren können. Chatbots unterstützen User bei der Suche nach schnellen Informationen und werden deshalb zunehmend beliebter. Chatbot: Definition Der Begriff „Chatbot” setzt sich aus den Wörtern „Chat“ und „Roboter“ zusammen. Als Chatbot wird […]

Localhost

Was ist ein Localhost? Der localhost, auch als “Loopback-Adresse” bezeichnet, wird verwendet, um eine IP-Verbindung oder einen Anruf zu einem lokalen Computer herzustellen. Die Loopback-Adresse wird normalerweise im Zusammenhang mit Netzwerken verwendet und bietet einem Benutzer die Möglichkeit, den IP-Stack zu überprüfen. Die IP Adresse wird dazu verwendet, um mit […]