Favicon

Oleg Vöhringer · Zuletzt aktualisiert: März 12, 2026
3 Min. Lesedauer

Was ist ein Favicon?

Ein Favicon ist ein kleines Symbol, meist 16 × 16 oder 32 × 32 Pixel groß, das eine Webseite visuell kennzeichnet. Es wird in Browser-Tabs, Lesezeichen, Suchergebnissen und auf mobilen Geräten angezeigt, um die Wiedererkennung einer Marke zu erleichtern.

Favicons stärken das Branding und verbessern die Nutzerführung, indem sie eine schnelle Orientierung und Wiedererkennung in Browsern und Apps ermöglichen.

Bedeutung und Einsatzbereiche

Favicons sind mehr als dekorative Elemente. Sie unterstützen:

Markenwiedererkennung in Tabs und Lesezeichen
Schnelle Identifikation in Browser-Verlauf und Suchergebnissen
Optimierte Nutzererfahrung auf Desktop und Mobilgeräten
Indirekte Verbesserung der Suchmaschinenoptimierung

Vorteile von Favicons

Erhöhte Sichtbarkeit und Markenpräsenz
Besseres Nutzer-Feedback durch vertraute Symbole
Stärkung des Vertrauens in die Website
Einfachere Navigation bei mehreren geöffneten Tabs

Gestaltungsrichtlinien für Favicons

Einfachheit

Ein Favicon sollte klar und reduziert sein. Verzichten Sie auf zu viele Details, um auch bei kleiner Darstellung gut erkennbar zu bleiben.

Markenbezug

Nutzen Sie Elemente oder Farben, die Ihre Marke repräsentieren. Hohe Kontraste unterstützen die Sichtbarkeit auf verschiedenen Hintergründen.

Abkürzungen und Initialen

Verwenden Sie bei komplexen Logos den Anfangsbuchstaben oder ein prägnantes Symbol, um die Erkennbarkeit zu sichern.

Farbwahl

Setzen Sie auf kontrastreiche und markentypische Farben. Testen Sie das Favicon auf unterschiedlichen Hintergründen und in verschiedenen Browsern.

Größen und Auflösungen

Die Standardgrößen sind:

16 × 16 px – Browser-Tab und Lesezeichen
32 × 32 px – Hochauflösende Displays und Browser-Tab in Windows

Weitere Formate:

24 × 24 px – Internet Explorer 9
57 × 57 px – iOS (ältere iPhone-Modelle)
72 × 72 px – iPad-Startbildschirm
96 × 96 px – Google TV
114 × 114 px – iPhone 4 Retina-Display
128 × 128 px – Chrome Web Store
195 × 195 px – Opera Kurzwahl

Übliche Dateiformate

ICO

Das Windows-ICO-Format kann mehrere Auflösungen und Farbtiefen in einer Datei bündeln und ist in allen Browsern weit verbreitet.

PNG

PNG bietet geringe Dateigrößen und transparente Hintergründe, wird jedoch von älteren Internet Explorer-Versionen nicht als Favicon unterstützt.

SVG

Skalierbare Vektor-Grafiken sind ideal für hochauflösende Displays, werden aber nicht von allen Browsern als Favicon akzeptiert.

GIF

Animierte GIFs lenken zwar Aufmerksamkeit auf sich, gelten jedoch als störend und sollten vermieden werden.

JPG

JPG-Favicons sind möglich, liefern aber keine Transparenz und sind daher weniger flexibel.

APNG

Als animierte Alternative zu PNG wird APNG von einigen Browsern unterstützt, eignet sich aber selten für Favicons.

Favicon-Generatoren

Online-Tools erleichtern die Erstellung und Umwandlung von Bildern ins Favicon-Format. Nach der Generierung laden Sie die Datei favicon.ico ins Stammverzeichnis und binden sie im HTML-Head ein:

Fazit

Ein sorgfältig gestaltetes Favicon ist ein kleines, aber wirkungsvolles Element für Markenkommunikation und Nutzerführung. Mit einem klaren Design, passenden Formaten und korrekter Integration lässt sich der Wiedererkennungswert Ihrer Website deutlich steigern.