Favicon

Stand: 20.09.2022

Ein Favicon bezeichnet ein quadratisches Symbol von 16 × 16 oder 32 × 32 Pixel Größe. Sein Zweck ist das Branding einer Website, das im Browser-Tab zu sehen ist. Es hilft Nutzern dabei, die Seite wiederzufinden, wenn Sie mehrere Tabs offen haben. Da sie ziemlich klein sind, sollten sie sehr einfach gestaltet sein. Einfache Grafiken oder maximal 3 Schriftzeichen sind ausreichend. Zwar ähnelt es in seinem Zweck dem Logo einer Firma, doch es gibt neben der Größe einen weiteren grundlegenden Unterschied: die Auflösung. Zusammen erlauben sie oftmals nicht, das gesamte Logo abzubilden, daher ist – wenn überhaupt – nur ein Ausschnitt davon zu sehen.

Die Bedeutung von Favicons

„Favicon“ ist eine Zusammensetzung aus den Begriffen „favorite“ und „icon“. Beide komme aus dem Englischen und bedeuten so viel wie „bevorzugtes Symbol“. Da sie eindeutig einer Website zugeteilt sind, tauchen sie überall auf, wo wenig Platz zur Identifikation ist. Mobile Endgeräte, die meistens kleine Displays haben, profitieren besonders davon, denn ein Favicon folgende Bereiche kennzeichnet:

• Lesezeichen
• Suchmenüs
• Registerkarten
• App-Symbole
• Verkaufsergebnisse
• Browserverläufe

Obwohl das Favicon selbst klein ist, kommt ihm also eine große Bedeutung bei. Es zu erstellen ist wichtig, um der Firma Authentizität zu verleihen. Darüber hinaus verbessert es das Vertrauen der Kunden und das Online-Branding. Sie dienen als optischer Anker, der dem Verbraucher klar signalisiert, mit welcher Website er es zu tun hat. Dadurch erleichtern sie ihm die Navigation und das Zurechtfinden im Browser.

Favicons in der Suchmaschinenoptimierung

Zwar spielen die Icons keine direkte Rolle in der SEO, aber sie haben einen indirekten Einfluss darauf. Das macht sie zu wichtigen Helfern, um das Ranking der Website zu verbessern. Das kann auf unterschiedliche Arten erfolgen, von denen wir im Folgenden ein paar vorstellen:

• verstärkte Nutzung dank Nutzerfreundlichkeit
• versieht die Website mit einem Lesezeichen
• verbessert die Sichtbarkeit durch Branding

Nutzerfreundlichkeit steigert Nutzung

Benutzerfreundlichkeit wirkt sich positiv aus, indem sie das Ranking einer Website indirekt verbessert. Ein Favicon hilft den Nutzern dabei, sich zurechtzufinden und schnell eine gesuchte Seite wiederzufinden. Das spart ihnen Zeit und erhöht letztlich die Chance, dass sie mit der Website interagieren. Im Endeffekt besuchen so mehr Leute länger die Seite und tragen dadurch zur SEO bei.

Lesezeichen für die Website

Google und der Chrome-Browser ziehen es vor, wenn eine Website mit einem Lesezeichen versehen ist. Dadurch erhält der Algorithmus spezielle Suchranking-Signale, die bei Websites ohne Lesezeichen nicht vorhanden sind. Favicons erfüllen den Zweck eines Lesezeichens für die Seite und lassen sie so hervorstechen. Visuell wie auch für Google. Wenn es fehlt, schlägt sich das womöglich direkt im Ranking nieder. Favicons helfen Besuchern dabei, die Seite wiederzufinden und nochmal zu besuchen, was die Nutzung erhöht und die SEO verbessert.

Sichtbarkeit dank Branding

Favicons repräsentieren visuell eine Website, eine Firma oder Person. Sie sind wie ein Markenzeichen und lassen sich immer eindeutig zuordnen. Das hilft dabei, eine Website eindeutig zu identifizieren. Das Icon fördert dadurch das Branding der Website und erhöht ihre Sichtbarkeit, was sich beides positiv auf die SEO auswirkt. Denn je sichtbarer die Website, desto mehr Nutzer klicken darauf und desto mehr erinnern sich an das Branding.

Erstellen eines Favicon

Nicht jedes kleine Icon eignet sich als Favicon. Bei der Gestaltung gibt es ein paar Dinge zu beachten, damit es den gewünschten Effekt hat. Im Prinzip besitzt das Symbol trotz der geringen Größe und Auflösung eine große Wirkung – im Idealfall. Benutzer sollten es leicht wiedererkennen können und mit der Marke in Verbindung bringen. Daher erklären wir Ihnen einige der wichtigsten Faktoren bei der Erstellung.

Viele Details vermeiden

Das klingt im ersten Moment widersprüchlich, doch um einen hohen Wiedererkennungswert zu erhalten, sollte das Favicon einfach gestaltet sein. Bei der geringen Größe und Auflösung gehen viele Details sowieso verloren und sehen am Ende nur chaotisch aus. Damit das Icon dennoch gut erkannt werden kann, sind Farben und Formen die wichtigsten Faktoren. Sie helfen dabei, die Aufmerksamkeit der Nutzer zu erhalten.

Marke repräsentieren

Die Hauptaufgabe des Favicon ist es, den Nutzer das Unternehmen oder eine Marke wiedererkennen zu lassen. Im Ideal gibt sie dazu noch Informationen darüber: Wer ist es und was tun sie? Hier ist Kreativität gefragt, um sich von der Masse abzuheben und einen Eindruck beim Benutzer zu hinterlassen.

Firmenkürzel

In einigen Fällen passen bunte Icons nicht zum Image eines Unternehmens. In diesem Fall bietet es sich an, auf Schriftzeichen zu setzen. Typischerweise kommen hier der Anfangsbuchstabe der Marke beziehungsweise Firma oder Akronyme zum Einsatz. Auch Abkürzungen sind nicht ungewöhnlich. Dabei bieten sich auch viele Kombinationen, sodass Sie eine individuelle Variante finden können.

Farbwahl

Gerade auf so kleinen Icons ist es wichtig, für Kontraste zu sorgen. So lassen sich Formen einfacher erkennen. Bei einem Favicon kommt es darauf an, mit wenigen Möglichkeiten viele Informationen zu geben und klar herauszustellen. Die Farbwahl spielt dabei eine wichtige Rolle. Zu berücksichtigen ist aber, dass jeder Browser Farben anders darstellt. Außerdem muss das Icon sowohl auf dunklem als auch auf weißem Hintergrund gut zu erkennen sein.

Die richtige Größe für ein Favicon

Standardmäßig benötigen Favicons eine Größe von 16 × 16 oder 32 × 32 Pixel, womit sie sich für alle Browser eignen. Es gibt jedoch davon abweichend andere Standards, die in bestimmten Situationen verwendet werden. Sie alle sind grundsätzlich quadratisch:

• 24 × 24: Internet Explorer 9
• 32 × 32: Internet Explorer Registerkarten, Windows 7+ Taskleistenschaltfläche, Safari „Später lesen“
• 57 × 57: iPad Touch und iPhone erste Generation bis 3G der iOS-Standard-Startbildschirm
• 72 × 72: iPad Symbol auf Startbildschirm
• 96 × 96: TV-Plattformen von Google
• 114 × 114: Startbildschirm von iPhone 4
• 128 × 128: Webstore von Chrome
• 195 × 195: Kurzwahl in Opera

Formate für Favicons

Die vielfältigen Icons können in mehreren Formaten gespeichert und verwendet werden. Dazu gehören:

• ICO
• PNG
• SVG
• GIF
• JPG
• APNG

ICO für Windows

Bei ICO handelt es sich um ein spezielles Format von Windows, in dem Icons gespeichert werden. Das Format unterstützen die meisten Browser und Anwendungen. Es zeichnet sich dadurch aus, dass es mehrere Auflösungen und Bittiefen speichern kann. Außerdem verfügt es über das 32 Pixel große Symbol, das sowohl die Taskleiste von Windows 7 als auch der Internet Explorer nutzen. Darüber hinaus verzichtete es auf das minusElement.

PNG als Allrounder

Bei dem Format handelt es sich um ein besonders benutzerfreundliches, weil es kein spezifisches Tool benötigt. Es erreicht kleine Dateigrößen und ermöglicht Alpha-Transparenzen. Allerdings unterstützt der Internet Explorer keine PNG-Dateien, was seine Nützlichkeit einschränkt.

SVG für Vektorgrafiken

Anders als die anderen Optionen, ist SVG nicht sehr weit verbreitet. Es wird eher von weniger weit verbreiteten Browsern unterstützt. Dazu gehören neben Opera noch einige weitere.

GIF als zu vermeidende Alternative

Das Format für animierte Icons soll in der Theorie mehr Aufmerksamkeit auf sich ziehen. In der Praxis erwies es sich jedoch eher als verwirrend. Zwar unterstützen das Format vor allem alte Browser, aber darüber hinaus weisen sie keine Vorteile aus.

JPG für alle Browser

Zwar ist die Qualität der Auflösung geringer als bei PNG, dafür unterstützt auch der Internet Explorer JPG. Allerdings sind keine Alpha-Transparenzen möglich.

APNG als Nischen-Format

Ähnlich wie GIFs sind die Icons in diesem Format animiert. Es hat daher dieselben Probleme. Außerdem wird es lediglich von Opera und Firefox unterstützt.

Favicons schnell mit Generator erstellen

Wenn es schnell gehen soll, sind Favicon-Generatoren im Web eine nützliche Alternative. Sie sind sowohl kostenlos als auch gegen Gebühr verfügbar. Damit können Sie ein eigenes Icon sowohl für den privaten als auch kommerziellen Gebrauch erstellen. Achten Sie bei der Wahl darauf, dass er möglichst aktuell ist. So kommt er mit den gegenwärtigen Standards von HTML5, CSS und JavaScript zurecht.

Die meisten Generatoren verlangen lediglich die angestrebte Pixel-Größe sowie das Format. Anschließend generieren in kurzer Zeit sie ein Favicon für HTML. Manchmal sind weitere Einstellungen möglich, sodass Sie Ihr Icon individualisieren können. Die Erstellung erfolgt automatisch für die Browser für Desktop-PCs, Tablets und mobile Endgeräte. Sie müssen sie im Anschluss lediglich noch in das Stammverzeichnis Ihrer Website laden.

Steffen Pfeiffer

Senior SEO Manager, SEO Scientist

Sie interessieren sich für das Thema "Favicon"

Löwenstark bietet als Full-Service-Marketing-Agentur umfassende Beratung und professionelle Leistungen. Lassen Sie sich von Steffen Pfeiffer kostenfrei beraten.

Jetzt Kontakt aufnehmen