Was ist ein Favicon? Definition und Beispiele

Die Bedeutung des Favicons für Websites geht weit über das einfache Design hinaus. Die kleinen Bildmarken dienen unter anderem auch zur Orientierung und haben positive Auswirkungen auf SEO.

Kleines Symbol mit großer Wirkung: Ein Favicon ist ein kleines Icon, das zum Beispiel im Browser-Tab links angezeigt wird und dafür sorgt, dass Sie auch bei zahlreichen geöffneten Websites den Überblick behalten. Es zeigt in der Regel ein vereinfachtes Logo oder eine Bildmarke und lässt sich der entsprechenden Website klar zuordnen. Daher kommt dem Favicon eine besondere Bedeutung zu: Es dient als Orientierungshilfe und stärkt die Präsenz einer Website.

Was genau ein passendes Favicon ist oder was sich dafür anbietet, hängt vom Auftritt Ihrer Marke ab. Da das Symbol selbst nur wenige Pixel groß ist, können anspruchsvolle und detaillierte Logos häufig nicht zufriedenstellend dargestellt werden. In diesem Fall empfiehlt sich eine vereinfachte Abwandlung des eigentlichen Erkennungszeichens.

Die große Bedeutung des Favicons lässt sich bereits aus seinem Namen erahnen: Dieser ist ein Kofferwort aus den Begriffen „favorite“ und „Icon“, also sinngemäß ein „Icon für Favoriten“. Die kleinen Bilder tauchen nämlich nicht nur in Browser-Tabs auf, sondern auch in den Lesezeichen, wo man seine favorisierten Websites abspeichert. Darüber hinaus findet man Favicons inzwischen aber auch als App-Symbole, in Suchmenüs, oder Browserverläufen.

Die große Bedeutung des passenden Favicons für Ihre Website erklärt sich durch verschiedene Aspekte:

• Professionalität: Das Favicon gehört zu einer professionellen Website dazu. Es stärkt das Vertrauen Ihrer Besucherinnen und Besucher in Ihre Marke und zeigt, dass Ihnen auch die vermeintlich kleinen Details wichtig sind. Auch wenn die meisten Menschen vielleicht nicht benennen könnten, was genau ein Favicon ist, so würden sie aber sofort bemerken, wenn eine Website auf die Grafik verzichtet.
• Identifizierung: Auch aus praktischen Gründen kommt dem Favicon eine besondere Bedeutung zu. Nutzer und Nutzerinnen finden Ihre Website durch das kleine Symbol deutlich schneller wieder, auch wenn zahlreiche Tabs gleichzeitig geöffnet sind. Auch in Suchmaschinen oder in einer App-Liste macht das Icon Ihre Marke unverwechselbar.
• Stärkung Ihrer Marke: Ein gutes Logo sorgt für Wiedererkennung und kann bei der Entscheidungsfindung eine Rolle spielen. So wichtig die Logogestaltung für Ihr Startup oder Ihre Marke ist, so bedeutsam ist auch das passende Favicon.

Zumindest indirekt hat das Favicon auch eine Bedeutung für die Suchmaschinenoptimierung. Zwar beeinflussen die kleinen Grafiken das Ranking nicht unmittelbar, ein gutes Favicon wirkt sich allerdings dennoch positiv auf SEO aus. Dafür sprechen vor allem die folgenden Gründe:

Was ein gutes Favicon ist, lässt sich nicht verallgemeinern. Natürlich hängt der passende Ansatz stark von der Marke und ihrem Design ab. Viele Unternehmen nutzen ihr Logo auch als Favicon, was aber nur dann funktioniert, wenn dieses auch bei geringer Größe und Auflösung ansprechend aussieht. Ein paar grundsätzliche Regeln für die Erstellung einer passenden Mini-Grafik sind allerdings diese:

• Corporate Identity: Gelungene Beispiele für Favicons passen immer zur Corporate Identity eines Unternehmens. Selbst wenn es nicht möglich ist, das eigene Logo als Symbol zu verwenden, sollte das gewählte Motiv trotzdem schon auf den ersten Blick zum Rest des Designs passen. Nur so wird die Unverwechselbarkeit der Marke gewahrt.
• Weniger ist mehr: Favicons sind sehr klein, weshalb aufwendige Verzierungen und Details bei der tatsächlichen Nutzung des Icons insbesondere auf dem Smartphone nicht zur Geltung kommen. Das Ergebnis wirkt dann überladen und nicht mehr ansprechend. Eine Möglichkeit ist es daher auch immer, die Initialen einer Marke zu verwenden. Da in den seltensten Fällen der gesamte Titel im Favicon abgebildet werden kann, sind der Anfangsbuchstabe oder ein simples, aber aussagekräftiges Icon sinnvoller.
• Die passenden Farben: Auch die verwendeten Farben sollten natürlich zu Ihrer Corporate Identity passen. Wenn Sie hier noch Spielraum haben, bieten sich Kontrastfarben an, da diese schneller ins Auge springen. Beachten Sie dabei allerdings immer, dass unterschiedliche Browser die Favicons ein wenig anders darstellen. So werden die kleinen Bilder zum Beispiel weiß oder grau hinterlegt, was den Eindruck ein wenig verändern kann.

Wenn Sie ein Favicon einbinden möchten, müssen Sie die passende Favicon-Größe beachten. Diese liegt zwar normalerweise bei 16 x 16, 32 x 32 oder 48 x 48 Pixeln, einige Browser weichen davon aber leider ab. Die Ausnahmen finden Sie hier:

Grundsätzlich können Favicons in unterschiedlichen Formaten angelegt werden. Am häufigsten ist allerdings .ico, ein Container für Bilddaten, der unterschiedliche Bittiefen und Auflösungen ermöglicht. Das Format wird von den meisten Browsern unterstützt. Auch .png, .gif oder .svg können genutzt werden. Diese drei Formate sind allerdings nicht mit allen Browsern kompatibel. Gegen das ebenfalls mögliche .jpg-Format spricht hingegen die geringere Auflösung.

Im Digital Guide finden Sie zahlreiche Artikel, die auch Ihrem Online-Auftritt helfen. Hier gibt es neben einem Ratgeber für einen gelungenen Website-Styleguide auch eine nützliche Anleitung zur Einbindung von Favicons in WordPress sowie andere Tipps und Tricks zur Logo-Erstellung warten auf Sie.