Favicon-UX: Was ein gutes Favicon ausmacht

Ein gutes Favicon ist ein einfaches, kontrastreiches Zeichen, meist Ihre Bildmarke oder ein bis zwei Buchstaben, das bei 16x16 Pixeln sowohl auf hellen als auch auf dunklen Browser-Tabs lesbar bleibt, zu Ihrer Marke passt und sich nur selten ändert. Alles andere in diesem Leitfaden (Pixelausrichtung, Farbe, Abstände, Transparenz, Dateigröße) dient diesen Zielen: Ihre Website soll unter Dutzenden geöffneter Tabs sofort auffindbar sein.

Ein Favicon ist winzig, taucht aber an vielen Stellen auf: in Browser-Tabs, Lesezeichenleisten, Verlaufslisten, der Tab-Suche, in Google-Suchergebnissen auf Mobilgeräten und Desktop sowie auf den Startbildschirmen von Smartphones. Bei vielen geöffneten Tabs wird der Titel oft komplett abgeschnitten, und das Icon ist der einzige verbleibende Anhaltspunkt. Damit ist es ein echtes Navigationselement und keine Dekoration.

1. Lesbarkeit bei 16x16

Die klassische Favicon-Größe beträgt 16x16 CSS-Pixel. Auf einem Standarddisplay sind das buchstäblich 256 Pixel; auf einem Retina-Display mit 2x wählt der Browser für denselben Platz meist ein 32x32-Bild. Alles, was Sie gestalten, muss diese Verkleinerung überstehen.

Halten Sie es einfach

• Eine Form oder ein bis zwei Buchstaben. Ein einzelner fetter Buchstabe, ein Kreis mit Symbol oder ein einfaches geometrisches Zeichen funktioniert. Drei Buchstaben oder ein ganzes Wort werden zu Rauschen.
• Ein Blickfang. Wenn Sie das Icon nicht in fünf Wörtern beschreiben können, ist es zu kompliziert.
• Keine Verläufe, Schatten oder feinen Texturen. Sie werden bei kleinen Größen zu unscharfen Flecken.

Am Pixelraster ausrichten

Bei 16x16 wird eine Linie, die einen halben Pixel neben dem Raster liegt, über zwei Pixelreihen geglättet und wirkt grau und weich. Legen Sie Kanten auf ganze Pixelgrenzen und verwenden Sie bei symmetrischen Formen gerade Breiten. Wenn Sie aus einem Vektorprogramm exportieren, aktivieren Sie das Pixel-Snapping oder prüfen Sie das verkleinerte Ergebnis und korrigieren Sie es von Hand.

Dünne Linien vermeiden

Linien, die bei 16x16 dünner als 2 Pixel sind (etwa 12 Prozent der Icon-Breite), verschwinden oder flackern tendenziell zwischen den Größen. Verstärken Sie Linien, entfernen Sie innere Details und schließen Sie kleine Lücken. Ein fettes, leicht kräftiges Zeichen ist meist besser lesbar als eine originalgetreue Miniatur eines detailreichen Logos.

Von Hand nachjustieren

ICO- und PNG-Dateien haben kein Hinting wie Schriften, daher ist manuelle Pixelbearbeitung das Äquivalent: Sie passen einzelne Pixel an, damit Rundungen, Diagonalen und Punzen (die Löcher in Buchstaben wie "a" oder "e") scharf bleiben. Automatische Verkleinerung ist ein guter erster Entwurf, aber ein paar von Hand gesetzte Pixel machen oft den Unterschied zwischen einem Klecks und einem erkennbaren Buchstaben. Der MakeFav-Pixeleditor ist genau dafür gebaut: Öffnen Sie die 16x16-Zeichenfläche, korrigieren Sie die problematischen Pixel und exportieren Sie.

2. Kontrast auf hellen und dunklen Tabs

Browser laufen heute häufig im Dark Mode, und bei vielen Nutzern unterscheidet sich die Tab-Leiste vom Seitenthema. Ein dunkelblaues Icon mit transparentem Hintergrund kann auf einem weißen Tab perfekt und auf einem dunkelgrauen fast unsichtbar sein. Testen Sie immer beides.

Praktische Lösungen

• Eine Hintergrundform hinzufügen. Ein einfarbiges abgerundetes Quadrat oder ein Kreis in einer Markenfarbe garantiert, dass das Zeichen unabhängig vom Tab seinen eigenen Kontrast hat.
• Eine dünne Kontur oder einen Halo verwenden. Ein 1 px hellerer Rand um ein dunkles Zeichen (oder umgekehrt) hält die Silhouette in beiden Themes sichtbar, muss aber bei 16x16 scharf bleiben, also testen Sie ihn.
• Mitteltönige Markenfarben wählen. Farben wie kräftiges Blau, Orange, Grün oder Magenta funktionieren in der Regel sowohl auf Weiß als auch auf fast schwarzen Flächen. Sehr helles Gelb oder sehr dunkles Marineblau sind riskant.
• Ein adaptives SVG-Favicon verwenden. Ein SVG kann eine prefers-color-scheme-Media-Query enthalten, sodass sich das Icon mit dem System-Theme ändert.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Beachten Sie, dass die Media-Query das Theme des Betriebssystems oder Browsers widerspiegelt, dem die Tab-Leiste meist, aber nicht immer folgt. Auch die Unterstützung für SVG-Favicons variiert: Chrome und Firefox unterstützen sie, Safari hinkte historisch hinterher, daher sollten Sie immer PNG- oder ICO-Fallbacks bereithalten. Ein Design mit einfarbigem Hintergrund ist die robusteste Option, da es ohne jede Theme-Logik auskommt.

3. Wiedererkennbarkeit und Markenkonsistenz

Verwenden Sie die Bildmarke (das Symbol oder Monogramm), nicht das komplette Logo mit Wortmarke. Text in einem 16x16-Icon ist unlesbar, und ein breites horizontales Logo, das in ein Quadrat gequetscht wird, hinterlässt nur einen winzigen Streifen in der Mitte.

• Wenn Ihre Marke ein Symbol hat, vereinfachen Sie es für kleine Größen, statt es nur zu verkleinern. Eine "Favicon-Version" mit weniger Details ist gängige Praxis.
• Wenn Ihre Marke nur aus einer Wortmarke besteht, nehmen Sie den ersten Buchstaben oder ein markantes Buchstabenpaar und setzen Sie es in Ihrer Markenschrift in einem kräftigen Schnitt.
• Halten Sie die Farben konsistent mit Ihrem Logo, Ihrem App-Icon und Ihren Social-Media-Avataren, damit Nutzer dieselbe Marke überall wiedererkennen.

Unverwechselbarkeit ist ebenso wichtig wie Originaltreue. Schauen Sie auf eine Reihe von Tabs: Wenn drei andere Websites ebenfalls einen blauen Kreis verwenden, fällt Ihre nicht auf. Eine andere Form oder Farbe nützt mehr als eine perfekt originalgetreue Verkleinerung.

4. Farbe: eine begrenzte, gesättigte Palette

Bei so wenigen Pixeln erhöht jede zusätzliche Farbe die Unruhe. Streben Sie eine oder zwei Farben plus höchstens Weiß oder Schwarz an. Gesättigte Farben tragen bei kleinen Größen besser als Pastelltöne, die leicht mit dem Tab-Hintergrund verschmelzen.

Nehmen Sie sich ein wenig aus dem Bereich der Barrierefreiheit zum Vorbild. Die WCAG verlangen für aussagekräftige grafische Objekte mindestens 3:1 Kontrast (Erfolgskriterium 1.4.11, Nicht-Text-Kontrast). Ein Favicon fällt formal nicht darunter, da es zum Browser-Chrome und nicht zum Seiteninhalt gehört, aber 3:1 zwischen Zeichen und Hintergrund sowie zwischen Icon und Tab ist ein sinnvolles Ziel. Vermeiden Sie außerdem, Informationen allein über den Farbton zu vermitteln: Rote und grüne Varianten desselben Icons sind für viele farbenblinde Nutzer nicht unterscheidbar, variieren Sie also die Form oder fügen Sie ein Symbol hinzu.

5. Form, Abstände und Sicherheitszonen

Das Quadrat füllen

Browser-Tabs zeigen das Favicon in einer festen kleinen Größe an, zusätzlicher Rand macht Ihr Zeichen also nur kleiner. Nutzen Sie bei Standard-Tab-Icons den größten Teil der Zeichenfläche und lassen Sie nur ein bis zwei Pixel Luft, damit das Zeichen so groß wie möglich ist.

Abgerundet oder eckig?

Browser beschneiden Tab-Favicons in der Regel nicht, die Form, die Sie zeichnen, ist also die Form, die Nutzer sehen. Ein Quadrat mit leicht abgerundeten Ecken wirkt ordentlich und bietet einen einheitlichen Hintergrund; ein freies Zeichen oder ein Kreis auf transparentem Grund kann leichter und markanter wirken. Beides ist in Ordnung. Wählen Sie eines und halten Sie Ihr gesamtes Icon-Set konsistent.

Apple Touch Icons

iOS fügt dem apple-touch-icon (180x180 ist die übliche Größe) eigene abgerundete Ecken hinzu. Liefern Sie ein vollflächiges Quadrat ohne vorab abgerundete Ecken, sonst können in den Ecken sichtbare dunkle oder weiße Streifen entstehen.

Maskable Icons für Android und PWAs

Maskable Icons werden vom Betriebssystem in Kreise, Squircles oder andere Formen zugeschnitten. Halten Sie alle wichtigen Inhalte innerhalb der Sicherheitszone: ein Kreis in der Mitte des Icons mit einem Radius von 40 Prozent der Icon-Breite. Erweitern Sie die Hintergrundfarbe bis zu den Rändern, damit jede Maske gut aussieht. Verwenden Sie ein knappes, randfüllendes Tab-Favicon nicht als Maskable Icon, da die Maske es abschneiden würde.

6. Transparenz

Transparenz ist bei Tab-Favicons in Ordnung und sorgt dafür, dass ein reines Zeichen-Icon sauber auf jeder Tab-Farbe sitzt. Für Apple Touch Icons ist sie ein Problem: iOS füllt transparente Bereiche mit einer einfarbigen Fläche (typischerweise Schwarz), was das Design ruinieren kann. Geben Sie dem apple-touch-icon immer einen deckenden Hintergrund in Ihrer Markenfarbe. Dasselbe gilt für Maskable Icons und die meisten Android-Startbildschirm-Anwendungsfälle, bei denen ein deckender Hintergrund vorhersehbare Ergebnisse liefert.

7. Stabilität: nicht zu oft ändern

Ein Favicon schafft Wiedererkennung durch Wiederholung. Wenn Sie es häufig ändern, müssen Nutzer neu lernen, welcher Tab Ihrer ist, und es verursacht auch technische Probleme. Browser cachen Favicons aggressiv, und Google ruft sie getrennt von Ihren Seiten ab und speichert sie, sodass ein neues Icon Tage oder Wochen brauchen kann, bis es in den Suchergebnissen erscheint. Google verlangt außerdem eine stabile Favicon-URL, ein Icon mit einer Größe, die ein Vielfaches von 48 Pixeln ist (48x48, 96x96 usw.), und eine Datei, die gecrawlt werden kann (nicht durch robots.txt blockiert). Behandeln Sie eine Favicon-Änderung als Entscheidung auf Rebranding-Niveau, nicht als saisonale Dekoration.

8. Benachrichtigungszustände und dynamische Favicons

Manche Web-Apps ändern das Favicon, um ungelesene Nachrichten, den Aufnahmestatus oder einen Fehler anzuzeigen. Gut gemacht ist das hilfreich, übertrieben wirkt es lästig.

• Ein kleines Badge verwenden (einen Punkt oder eine kurze Zahl) in einer Ecke, keine komplette Neugestaltung. Das Basis-Icon sollte erkennbar bleiben.
• Sparsam bleiben. Reservieren Sie Badges für Ereignisse, die eine Handlung des Nutzers erfordern. Animieren Sie das Icon nicht dauerhaft.
• Zahlen begrenzen. Bei 16x16 sind nur ein oder zwei Ziffern lesbar; zeigen Sie "9+" oder einen einfachen Punkt statt "137".
• Zügig zurücksetzen, sobald der Nutzer den Punkt erledigt hat, und das Standard-Icon wiederherstellen.
• Sich nicht allein auf Farbe verlassen. Ein roter Punkt sollte zusätzlich durch den Seitentitel gestützt werden, etwa "(3) Posteingang", damit die Information für alle verfügbar ist.

Dynamische Favicons werden meist auf ein Canvas gezeichnet und durch Aktualisieren des href des Icon-Link-Elements eingetauscht. Drosseln Sie Aktualisierungen, denn ein ständig wechselndes Favicon kann CPU-Last verursachen und Nutzer ablenken.

9. Performance

Favicons sind klein, aber es sind dennoch Anfragen, die schlecht umgesetzt sein können.

• Dateien klein halten. Ein PNG-Favicon umfasst typischerweise einige hundert Bytes bis wenige Kilobytes. Ein einfaches SVG kann unter 1 KB liegen.
• Aufgeblähte ICO-Dateien vermeiden. Eine ICO mit mehreren Größen (16, 32 und 48 Pixel) genügt. Das Einbetten eines 256x256-Bildes vervielfacht die Dateigröße ohne sichtbaren Nutzen in Browser-Tabs.
• Caching-Header setzen. Liefern Sie Icons mit einer langen Cache-Control-Lebensdauer aus, zum Beispiel public, max-age=31536000, immutable, und verwenden Sie einen versionierten oder gehashten Dateinamen, wenn Sie sie ändern.
• Icons explizit deklarieren. Browser fragen standardmäßig /favicon.ico an, stellen Sie daher eine bereit, auch wenn Sie andere Icons deklarieren, um 404-Rauschen in Ihren Logs zu vermeiden.
• Komprimieren. Schicken Sie PNGs durch einen verlustfreien Optimierer und minifizieren Sie SVGs.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Wenn Sie all diese Dateien aus einem einzigen Quellbild erzeugen möchten, erstellt der MakeFav-Favicon-Generator das Standardset, und die Entwicklerseite beschreibt Integrationsmöglichkeiten.

10. Barrierefreiheit

Ein Favicon hat keinen Alternativtext, und Screenreader lesen es nicht vor, daher greifen die üblichen Barrierefreiheitswerkzeuge wie alt-Attribute nicht. Wichtig ist Folgendes:

• Der Seitentitel trägt die Bedeutung. Schreiben Sie eindeutige, aussagekräftige <title>-Elemente. Verlassen Sie sich nie darauf, dass das Icon einen Zustand vermittelt; spiegeln Sie jedes Badge im Titel.
• Sichtbarkeit für Nutzer mit Sehbehinderung. Hoher Kontrast, eine kräftige Form und ein großes Zeichen helfen Nutzern, die Tabs visuell überfliegen.
• Farbunabhängigkeit. Stellen Sie sicher, dass Formen oder Buchstaben Zustände unterscheiden, nicht nur der Farbton.
• Weniger Ablenkung. Vermeiden Sie blinkende oder animierte Favicons, die für bewegungsempfindliche Nutzer ein Problem sein können.

Favicon-UX-Checkliste

Testcheckliste

Vertrauen Sie nicht der großen Vorschau in Ihrem Designwerkzeug. Testen Sie das echte Icon unter realen Bedingungen:

1. Mehrere Browser. Prüfen Sie Chrome, Firefox, Safari und Edge, da jeder Icons und Größen etwas anders auswählt.
2. Heller und dunkler Modus. Wechseln Sie das Theme von Betriebssystem und Browser und werfen Sie jedes Mal einen Blick auf die Tab-Leiste.
3. Retina- und Standarddisplays. Prüfen Sie auf einem 1x-Monitor und einem 2x- oder 3x-Bildschirm und zoomen Sie im Browser.
4. Lesezeichenleiste. Setzen Sie ein Lesezeichen für die Seite und prüfen Sie, ob das Icon neben anderen Websites noch lesbar ist.
5. Viele Tabs. Öffnen Sie 20 Tabs und prüfen Sie, ob Sie Ihren auf einen Blick finden.
6. Google-SERP-Vorschau. Prüfen Sie ein mobiles Suchergebnis, nachdem das Icon neu gecrawlt wurde. Denken Sie daran, dass die Aktualisierung dauern kann.
7. Startbildschirm. Fügen Sie die Website zu den Startbildschirmen von iOS und Android hinzu und prüfen Sie, dass das Icon nicht abgeschnitten ist, keine schwarzen Ecken hat und innerhalb seiner Maske nicht zu klein ist.
8. Technische Prüfung. Lassen Sie Ihre Domain durch den MakeFav-Favicon-Checker laufen, um zu bestätigen, dass die Dateien existieren, den Status 200 zurückgeben, die richtigen Größen haben und in Ihrem HTML korrekt deklariert sind.

Ein praktischer Workflow

1. Beginnen Sie mit Ihrer Bildmarke und vereinfachen Sie sie auf eine Form oder einen Buchstaben.
2. Erstellen Sie eine quadratische Zeichenfläche mit einem einfarbigen oder geformten Hintergrund, der in beiden Themes funktioniert.
3. Exportieren Sie die Größen 32x32 und 16x16 und verfeinern Sie die kleine Version von Hand im Pixeleditor.
4. Erzeugen Sie das komplette Set (ICO, PNG, apple-touch-icon, Manifest-Icons) mit dem Generator.
5. Fügen Sie die Link-Tags hinzu, setzen Sie Cache-Header, veröffentlichen Sie und prüfen Sie mit dem Checker.

Ein Favicon ist eines der kleinsten Assets Ihrer Website und eines der am häufigsten gesehenen. Ein paar sorgfältige Entscheidungen zu Kontrast, Einfachheit und Konsistenz sorgen dafür, dass es in jedem Tab, Theme und auf jedem Gerät funktioniert.

Häufig gestellte Fragen

Welche Größe sollte ein Favicon haben?

Gestalten Sie für Browser-Tabs in 16x16 und 32x32 (der Browser verwendet 32x32 auf Displays mit hoher Pixeldichte), stellen Sie ein 180x180 apple-touch-icon für iOS bereit sowie PNGs in 192x192 und 512x512 für Android und PWAs. Verwenden Sie für Google-Suchergebnisse ein quadratisches Icon, dessen Größe ein Vielfaches von 48 Pixeln ist, etwa 48x48 oder 96x96. Eine SVG-Quelle skaliert auf alle diese Größen.

Sollte ich mein komplettes Logo als Favicon verwenden?

In der Regel nicht. Vollständige Logos mit Wortmarke sind zu detailreich und zu breit für ein quadratisches 16x16-Icon. Verwenden Sie die Bildmarke oder ein Monogramm aus ein bis zwei Buchstaben und vereinfachen Sie es, damit es auch winzig erkennbar bleibt.

Wie sorge ich dafür, dass ein Favicon im Dark Mode funktioniert?

Der sicherste Weg ist, dem Icon eine eigene einfarbige Hintergrundform oder eine kontrastierende Kontur zu geben, damit es nicht von der Tab-Farbe abhängt. Alternativ verwenden Sie ein SVG-Favicon mit einer prefers-color-scheme-Media-Query, um Farben zu wechseln, und halten PNG- oder ICO-Fallbacks für Browser bereit, die SVG-Icons nicht unterstützen. Testen Sie immer in hellen und dunklen Themes.

Warum wird mein neues Favicon nicht angezeigt?

Browser cachen Favicons sehr lange, und Google speichert eine eigene Kopie, die es nach eigenem Zeitplan aktualisiert, oft erst nach Tagen oder Wochen. Laden Sie die Seite hart neu, leeren Sie den Browser-Cache, verwenden Sie einen neuen versionierten Dateinamen und stellen Sie sicher, dass die Link-Tags und eine /favicon.ico im Stammverzeichnis auf die richtige Datei verweisen. Sie können die Einrichtung mit dem MakeFav-Checker überprüfen.

Ist es sinnvoll, Benachrichtigungs-Badges auf einem Favicon anzuzeigen?

Ja, wenn sie sparsam eingesetzt werden. Ein kleiner Punkt oder eine ein- oder zweistellige Zahl hilft Nutzern, etwas zu bemerken, das eine Handlung erfordert, aber ständige Animationen oder große Zahlen beeinträchtigen Lesbarkeit und Aufmerksamkeit. Spiegeln Sie den Zustand immer im Seitentitel, stellen Sie das Standard-Icon wieder her, wenn der Punkt erledigt ist, und verlassen Sie sich nicht allein auf Farbe.