Zurück zu den Anleitungen

Favicon-Best Practices

Was sich beim Favicon-Design bewährt: Leitlinien, technische Empfehlungen und typische Fehler — für alle Plattformen und Browser.

Gestaltungsleitlinien

Textlänge

Ein Zeichen funktioniert am besten. Favicons erscheinen sehr klein (16×16 bis 32×32 Pixel); ein oder zwei Zeichen bleiben lesbar. Längerer Text wird unleserlich und unruhig.

Schriftwahl

Schriften wählen, die in Miniatur noch lesbar sind:

  • Fette Schriften: Wirken klarer als dünne oder Light-Schnitte
  • Sans-Serif: In kleinen Größen meist besser lesbar
  • Dekor- und Schreibschriften vermeiden — verkleinert sind sie oft unlesbar
  • Sichtbarkeit prüfen: Vor dem Abschluss immer in Originalgröße (16×16 Pixel) ansehen

Farbkontrast

Starker Kontrast zwischen Text und Hintergrund. Favicons liegen auf hellen, dunklen und farbigen Browser-Hintergründen. Ähnliche Farben laufen in Miniatur ineinander.

Einfachheit

Schlicht halten. Komplexe Details verschwinden. Ein klares Motiv, das Marke oder Site trägt, reicht.

Gute Favicon-Beispiele: einfach, mit hohem Kontrast

Gute Beispiele: einfach, hoher Kontrast

Schlechte Favicon-Beispiele: zu komplex oder kontrastarm

Vermeiden: zu komplex oder kontrastarm

Technische Empfehlungen

Formatwahl

SVG (Scalable Vector Graphics): Am besten für moderne Browser. Auflösungsunabhängig und in jeder Größe scharf. Empfohlen für hohe Qualität.

PNG: Weit unterstützt, mit Transparenz. Für 16×16, 32×32, 48×48, 96×96, 180×180, 192×192, 512×512.

ICO: Klassisches Format mit breiter Browser-Unterstützung. Für maximale Kompatibilität, besonders ältere Browser, behalten.

Benötigte Größen

Mehrere Größen anbieten, damit Anzeige auf allen Geräten und in allen Kontexten stimmt:

  • 16×16 Pixel: Standardgröße im Browser-Tab
  • 32×32 Pixel: High-DPI-Displays und einige Browser-Kontexte
  • 180×180 Pixel: Apple Touch Icon für iOS-Startbildschirme
  • 192×192 und 512×512 Pixel: Android-Startbildschirm und PWA

Hinweis: Immer in der größten Größe (512×512) gestalten und verkleinern, nie von klein auf vergrößern. So bleibt die Qualität in allen Größen am besten.

Browser-Kompatibilität

In Chrome, Firefox, Safari, Edge und auf Desktop, Mobil und Tablet testen. Browser behandeln Favicons leicht unterschiedlich; nur Tests machen das Erscheinungsbild konsistent.

Typische Fehler

Das ganze Logo verwenden

Das volle Firmenlogo nur, wenn es extrem schlicht ist. Die meisten Logos haben zu viel Detail für 16×16 Pixel. Besser eine Vereinfachung, ein Monogramm oder ein zentrales Markenzeichen.

Zu wenig Kontrast

Geringer Kontrast macht Elemente in Miniatur unsichtbar. Genug Kontrast für verschiedene Browser-Themes und Hintergründe einplanen.

Dateien am falschen Ort

Dateien gehören meist nach public oder static, und die HTML-link-Tags müssen auf die richtigen Pfade zeigen.

Fehlende Größen

Nur eine Größe begrenzt die Kompatibilität. Mehrere Größen mitliefern (16×16, 32×32, 180×180, 192×192, 512×512).

Nicht testen

Vor dem Livegang in mehreren Browsern und auf mehreren Geräten prüfen. Was in einem Browser stimmt, kann in einem anderen fehlen. Mit den Entwicklertools laden überprüfen.

Markenkonsistenz

Das Favicon sollte zur restlichen Marke passen:

  • Markenfarben nutzen, damit das Bild zusammenhält
  • Erkennbare Elemente aus Logo oder Marke aufnehmen
  • Persönlichkeit und Stil der Marke sollen durchscheinen
  • Über alle Kontaktpunkte gleich halten (Website, Social Media, Apps)

Fazit

Ein wirksames Favicon balanciert schlichtes Design und technische Anforderungen. Einfach halten, Kontrast setzen, mehrere Größen liefern und in Browsern testen — dann trägt das Symbol Marke und Nutzung.

Ein gutes Favicon ist ein kleines Detail mit großer Wirkung darauf, wie Nutzer die Website wahrnehmen und finden.