Was ist ein Favicon? De­fi­ni­ti­on und Beispiele

Die Bedeutung des Favicons für Websites geht weit über das einfache Design hinaus. Die kleinen Bild­mar­ken dienen unter anderem auch zur Ori­en­tie­rung und haben positive Aus­wir­kun­gen 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 zahl­rei­chen ge­öff­ne­ten Websites den Überblick behalten. Es zeigt in der Regel ein ver­ein­fach­tes Logo oder eine Bildmarke und lässt sich der ent­spre­chen­den Website klar zuordnen. Daher kommt dem Favicon eine besondere Bedeutung zu: Es dient als Ori­en­tie­rungs­hil­fe 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 an­spruchs­vol­le und de­tail­lier­te Logos häufig nicht zu­frie­den­stel­lend dar­ge­stellt werden. In diesem Fall empfiehlt sich eine ver­ein­fach­te Ab­wand­lung des ei­gent­li­chen Er­ken­nungs­zei­chens.

Die große Bedeutung des Favicons lässt sich bereits aus seinem Namen erahnen: Dieser ist ein Kof­fer­wort 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 Le­se­zei­chen, wo man seine fa­vo­ri­sier­ten Websites ab­spei­chert. Darüber hinaus findet man Favicons in­zwi­schen aber auch als App-Symbole, in Suchmenüs, oder Brow­ser­ver­läu­fen.

Die große Bedeutung des passenden Favicons für Ihre Website erklärt sich durch ver­schie­de­ne Aspekte:

• Pro­fes­sio­na­li­tät: Das Favicon gehört zu einer pro­fes­sio­nel­len Website dazu. Es stärkt das Vertrauen Ihrer Be­su­che­rin­nen und Besucher in Ihre Marke und zeigt, dass Ihnen auch die ver­meint­lich kleinen Details wichtig sind. Auch wenn die meisten Menschen viel­leicht nicht benennen könnten, was genau ein Favicon ist, so würden sie aber sofort bemerken, wenn eine Website auf die Grafik ver­zich­tet.
• Iden­ti­fi­zie­rung: Auch aus prak­ti­schen Gründen kommt dem Favicon eine besondere Bedeutung zu. Nutzer und Nut­ze­rin­nen finden Ihre Website durch das kleine Symbol deutlich schneller wieder, auch wenn zahl­rei­che Tabs gleich­zei­tig geöffnet sind. Auch in Such­ma­schi­nen oder in einer App-Liste macht das Icon Ihre Marke un­ver­wech­sel­bar.
• Stärkung Ihrer Marke: Ein gutes Logo sorgt für Wie­der­erken­nung und kann bei der Ent­schei­dungs­fin­dung eine Rolle spielen. So wichtig die Lo­go­ge­stal­tung 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 Such­ma­schi­nen­op­ti­mie­rung. Zwar be­ein­flus­sen die kleinen Grafiken das Ranking nicht un­mit­tel­bar, ein gutes Favicon wirkt sich al­ler­dings dennoch positiv auf SEO aus. Dafür sprechen vor allem die folgenden Gründe:

Was ein gutes Favicon ist, lässt sich nicht ver­all­ge­mei­nern. Natürlich hängt der passende Ansatz stark von der Marke und ihrem Design ab. Viele Un­ter­neh­men nutzen ihr Logo auch als Favicon, was aber nur dann funk­tio­niert, wenn dieses auch bei geringer Größe und Auflösung an­spre­chend aussieht. Ein paar grund­sätz­li­che Regeln für die Er­stel­lung einer passenden Mini-Grafik sind al­ler­dings diese:

• Corporate Identity: Gelungene Beispiele für Favicons passen immer zur Corporate Identity eines Un­ter­neh­mens. 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 Un­ver­wech­sel­bar­keit der Marke gewahrt.
• Weniger ist mehr: Favicons sind sehr klein, weshalb auf­wen­di­ge Ver­zie­run­gen und Details bei der tat­säch­li­chen Nutzung des Icons ins­be­son­de­re auf dem Smart­phone nicht zur Geltung kommen. Das Ergebnis wirkt dann überladen und nicht mehr an­spre­chend. Eine Mög­lich­keit ist es daher auch immer, die Initialen einer Marke zu verwenden. Da in den sel­tens­ten Fällen der gesamte Titel im Favicon ab­ge­bil­det werden kann, sind der An­fangs­buch­sta­be oder ein simples, aber aus­sa­ge­kräf­ti­ges Icon sinn­vol­ler.
• Die passenden Farben: Auch die ver­wen­de­ten Farben sollten natürlich zu Ihrer Corporate Identity passen. Wenn Sie hier noch Spielraum haben, bieten sich Kon­trast­far­ben an, da diese schneller ins Auge springen. Beachten Sie dabei al­ler­dings immer, dass un­ter­schied­li­che Browser die Favicons ein wenig anders dar­stel­len. So werden die kleinen Bilder zum Beispiel weiß oder grau hin­ter­legt, 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 nor­ma­ler­wei­se bei 16 x 16, 32 x 32 oder 48 x 48 Pixeln, einige Browser weichen davon aber leider ab. Die Ausnahmen finden Sie hier:

Grund­sätz­lich können Favicons in un­ter­schied­li­chen Formaten angelegt werden. Am häu­figs­ten ist al­ler­dings .ico, ein Container für Bilddaten, der un­ter­schied­li­che Bittiefen und Auf­lö­sun­gen er­mög­licht. Das Format wird von den meisten Browsern un­ter­stützt. Auch .png, .gif oder .svg können genutzt werden. Diese drei Formate sind al­ler­dings nicht mit allen Browsern kom­pa­ti­bel. Gegen das ebenfalls mögliche .jpg-Format spricht hingegen die geringere Auflösung.

Im Digital Guide finden Sie zahl­rei­che Artikel, die auch Ihrem Online-Auftritt helfen. Hier gibt es neben einem Ratgeber für einen ge­lun­ge­nen Website-Sty­le­gui­de auch eine nützliche Anleitung zur Ein­bin­dung von Favicons in WordPress sowie andere Tipps und Tricks zur Logo-Er­stel­lung warten auf Sie.