Ein Favicon ist ein kleines Symbol, das Browser neben dem Seitentitel im Tab anzeigen. Auch in Lesezeichen, im Verlauf und teilweise in Suchergebnissen taucht es auf. Der Name setzt sich aus „favorite“ und „icon“ zusammen, weil das Symbol ursprünglich dazu diente, favorisierte Seiten in der Lesezeichenliste zu markieren. Heute ist es ein fester Bestandteil jeder Website. Wenn viele Tabs offen sind und die Titel abgeschnitten werden, ist es oft das Einzige, was von einer Marke sichtbar bleibt.
Geschichte und Technik
Eingeführt wurde das Favicon 1999 mit dem Internet Explorer 5. Zunächst lag eine Datei namens favicon.ico im Hauptverzeichnis einer Website, und der Browser holte sie automatisch ab. Heute binden Websites ihre Symbole über Verweise im Kopfbereich der Seite ein. Neben dem klassischen ICO-Format sind PNG und SVG verbreitet. SVG hat den Vorteil, dass es sich ohne Qualitätsverlust skalieren lässt und sogar auf die Farbeinstellung des Geräts reagieren kann, etwa mit einer hellen und einer dunklen Variante.
Je nach Einsatz sind verschiedene Größen üblich. Für Browser-Tabs genügen meist 16 mal 16 und 32 mal 32 Pixel. Apple-Geräte nutzen für Verknüpfungen auf dem Home-Bildschirm ein Symbol mit 180 mal 180 Pixeln, Android-Geräte erwarten über das Web-App-Manifest Größen wie 192 und 512 Pixel. Google zeigt Favicons in den Suchergebnissen an und verlangt dafür ein quadratisches Symbol mit mindestens 8 mal 8 Pixeln. Für eine scharfe Darstellung auf allen Oberflächen empfiehlt Google eine Größe über 48 mal 48 Pixeln.
Gestaltung eines Favicons
Ein Favicon ist keine verkleinerte Version des Logos, sondern eine eigene Gestaltungsaufgabe. Auf 16 Pixeln Kantenlänge verschwinden feine Linien, kleine Schrift und Verläufe. Am besten funktioniert ein einfaches Zeichen mit klarer Silhouette und starkem Kontrast. Meist eignet sich dafür die BildmarkeEine Bildmarke ist ein grafisches Zeichen, das eine Marke ohne Schrift repräsentiert. Sie besteht aus einem Symbol, einer abstrakten Form oder einer stilisierten Abbildung und soll allein erkennbar sein. Im Markendesign bildet sie neben der Wortmarke und der Kombination aus beidem einen der drei grundlegenden Logotypen. Merkmale einer Bildmarke Eine gute Bildmarke zeichnet sich durch eine klare Form, geringe Detailtiefe…
Weiterlesen: Bildmarke oder ein Teil davon, bei einer reinen WortmarkeEine Wortmarke ist ein Markenzeichen, das ausschließlich aus einer besonders gestalteten Schreibweise des Markennamens besteht, ohne begleitendes Bildzeichen oder Symbol. Anders als eine Bildmarke oder eine kombinierte Wort-Bild-Marke setzt eine Wortmarke allein auf Typografie: Schriftwahl, Laufweite, Strichstärke und individuelle Anpassungen einzelner Buchstaben machen den Namen selbst zum unverwechselbaren visuellen Zeichen einer Marke. Der Begriff stammt ursprünglich aus dem Markenrecht, wo…
Weiterlesen: Wortmarke oft nur der Anfangsbuchstabe. Dieses Prinzip kennen Gestalterinnen und Gestalter vom Responsive LogoEin Responsive Logo ist ein Logo, das nicht in einer einzigen festen Fassung vorliegt, sondern als Familie von Varianten, die sich an Größe, Platz und Einsatzumgebung anpassen. Der Begriff entstand in den frühen 2010er Jahren in Anlehnung an das Responsive Webdesign, bei dem sich Layouts an unterschiedliche Bildschirmgrößen anpassen. Übertragen auf Logos bedeutet das: Je kleiner oder schmaler der verfügbare…
Weiterlesen: Responsive Logo, das sich je nach Format vereinfacht.
Ein praktischer Test ist, das Zeichen auf 16 Pixel zu verkleinern und aus normalem Abstand zu betrachten. Bleibt die Form erkennbar, taugt sie als Favicon. Ebenfalls wichtig ist der Hintergrund: Ein transparentes Symbol kann auf dunklen Tab-Leisten verschwinden, wenn die Farbe zu dunkel ist. Eine eigene Fläche oder eine Variante für den Dunkelmodus löst das Problem.
Favicon, App-Icon und Web-App-Symbol
Favicon, App-Icon und Web-App-Symbol werden oft verwechselt, unterscheiden sich aber im Einsatz. Das Favicon ist für den Browser gedacht und bleibt klein. Ein App-Icon erscheint auf dem Home-Bildschirm eines Smartphones und ist quadratisch, wobei das Betriebssystem die Ecken je nach Gerät selbst abrundet. Gestalterinnen und Gestalter lassen deshalb am Rand eine Schutzzone frei, damit wichtige Teile des Zeichens nicht abgeschnitten werden. Das Web-App-Symbol schließlich wird über das Manifest einer Website festgelegt und kommt zum Einsatz, wenn Nutzer die Seite als Verknüpfung auf dem Gerät ablegen. Ein durchdachtes System aus wenigen Varianten, die alle von derselben Grundform abgeleitet sind, spart Aufwand und hält den Auftritt konsistent.
Typische Fehler
Häufig wird das komplette Logo mit Schriftzug auf Tabgröße gezwungen, sodass nur ein unleserlicher Fleck bleibt. Weitere Fehler sind zu viele Details, zu geringer Kontrast und ein Zeichen, das sich kaum von den Symbolen anderer Tabs unterscheidet. Auch fehlende Varianten fallen auf: Wer nur die kleinste Größe liefert, erhält auf Smartphones oder in Suchergebnissen ein verpixeltes Bild. Und wer das Favicon schlicht vergisst, zeigt im Tab ein graues Standardsymbol des Browsers.
Favicon im Rebranding
Bei einem RebrandingRebranding bezeichnet die grundlegende Neugestaltung des Markenauftritts eines Unternehmens, einer Organisation oder eines Produkts. Anders als ein einfaches Redesign, bei dem meist nur einzelne visuelle Elemente wie ein Logo oder eine Farbpalette aktualisiert werden, geht Rebranding typischerweise tiefer: Es verändert nicht nur, wie eine Marke aussieht, sondern auch, wofür sie steht, wie sie kommuniziert und wie sie von Kundinnen, Mitarbeitenden…
Weiterlesen: Rebranding gehört das Favicon auf die Checkliste, gemeinsam mit App-Icons, Profilbildern und Social-Media-Avataren. Zu beachten ist, dass Browser Favicons stark zwischenspeichern. Nach einem Wechsel kann es eine Weile dauern, bis das neue Symbol überall erscheint, selbst wenn die Datei auf dem Server schon ersetzt wurde. Manche Teams ändern deshalb den Dateinamen oder fügen einen Versionsparameter an. Außerdem sollte das neue Zeichen in den Vorgaben des Corporate Designs mit Größen und Varianten festgehalten werden.