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. [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]

Quellenangaben

Jetzt den SEO-Küche-Newsletter abonnieren

Ähnliche Artikel

Microsoft

Microsoft ist ein amerikanischer multinationaler Technologie-Konzern, der sich auf die Entwicklung von Software, Hardware und Cloud-Diensten spezialisiert hat. Das Unternehmen ist bekannt für seine Produkte wie Windows, Office und Azure. Geschichte von Microsoft Gründung: Microsoft wurde 1975 von Bill Gates und Paul Allen in Albuquerque (New Mexico) gegründet und hat […]

Sponsored Links

Was sind Sponsored Links? Sponsored Links umfassen sowohl kostenpflichtige Werbeanzeigen in Suchmaschinen als auch bezahlte Verweise, die durch einen Link von anderen Websites bereitgestellt werden. Sponsored Links werden im Online-Marketing eingesetzt, um beispielsweise Traffic, Conversions oder Reichweite zu erhöhen. Unternehmen bewerben damit ihre Produkte, Dienstleistungen oder Marken auf Webseiten, Suchmaschinen […]

Referral Marketing

Was ist Referral Marketing? Als Referral Marketing (auch Empfehlungsmarketing genannt) wird eine Maßnahme zur Kundengewinnung bezeichnet, die auf Kundenempfehlungen basiert. Hier empfehlen Bestandskunden die Produkte oder Dienstleistungen eines Unternehmens und beeinflussen so die Kaufentscheidung potenzieller Kunden. Im Gegensatz zur Mundpropaganda handelt es sich beim Referral Marketing um eine bewusste Strategie, […]

Fake News

Was sind Fake News? Fake News sind falsche oder irreführende Informationen, die vor allem über soziale Medien, Websites und andere digitale Plattformen verbreitet werden. Ziel dieser Fake News ist es, politische, soziale oder wirtschaftliche Diskurse zu beeinflussen und Unsicherheiten zu erzeugen. Fake News: Definition Unter dem Begriff „Fake News“ werden […]

GIF

Was ist ein GIF? Der Begriff „GIF“ steht für „Graphics Interchange Format“ und ist eine weit verbreitete Dateiform für digitale Bilder. GIFs wurden im Jahr 1987 von dem Unternehmen CompuServe eingeführt und sind seitdem ein wesentlicher Bestandteil des Internets. Dieses Grafikformat kann sowohl statische als auch animierte Bilder darstellen. GIF: […]

Darknet

Was ist das Darknet? Als „Darknet“ wird ein versteckter Teil des Internets bezeichnet, der nicht über herkömmliche Suchmaschinen wie Google oder Bing zugänglich ist. Mit einem speziellen Browser können User im Darknet anonym auf unzensierte und illegale Inhalte zugreifen. Darknet: Definition Unter Darknet wird ein versteckter Teilbereich des World Wide […]