The team behind OnlineTools4Free — building free, private browser tools.
Published Mar 11, 2026 · 7 min read · Reviewed by OnlineTools4Free
Favicon Größen Guide: Alle Benötigten Größen 2024
Was Ist ein Favicon und Warum Brauchen Sie Verschiedene Grössen?
Ein Favicon (Favorite Icon) ist das kleine Symbol, das im Browser-Tab, in der Lesezeichenleiste, auf dem Startbildschirm und in der Verlaufsliste neben dem Seitentitel angezeigt wird. Es ist ein wesentlicher Bestandteil der visuellen Markenidentität im Web.
Früher reichte ein einzelnes 16x16-Pixel-ICO-Bild. Heute benötigen Sie Favicons in zahlreichen Grössen für verschiedene Kontexte: Browser-Tabs, Touch-Icons für mobile Geräte, Windows-Kacheln, macOS-Dock-Icons und PWA-Icons.
Unser Favicon Generator erstellt aus einem Bild automatisch alle benötigten Grössen mit dem passenden HTML-Code zum Einbinden.
Alle Benötigten Favicon-Grössen im Überblick
Hier die vollständige Liste der Favicon-Grössen, die Sie 2024 bereitstellen sollten:
Standard-Favicons (Browser-Tab):
- 16x16 Pixel: Die klassische Favicon-Grösse für Browser-Tabs. Wird auch in der Lesezeichenleiste verwendet.
- 32x32 Pixel: Für hochauflösende Darstellung im Browser-Tab und in der Taskleiste. Auf Retina-Displays wird diese Grösse bevorzugt.
- 48x48 Pixel: Windows-Taskleiste und einige Browser verwenden diese Grösse.
Apple Touch Icons (iOS):
- 180x180 Pixel: Das ist die einzige Grösse, die Sie für Apple-Geräte bereitstellen müssen. iOS skaliert automatisch für verschiedene Geräte (iPhone, iPad). Kein Runden der Ecken nötig — iOS macht das automatisch.
Android und PWA:
- 192x192 Pixel: Standard-Icon für Android Chrome und Progressive Web Apps.
- 512x512 Pixel: Splash-Screen-Icon für PWAs und der Google Play Store, falls Ihre PWA dort gelistet ist.
Windows-Kacheln (optional):
- 150x150 Pixel: Mittlere Kachel im Windows-Startmenü.
- 310x310 Pixel: Grosse Kachel im Windows-Startmenü.
ICO, PNG, SVG: Welches Format für Welchen Zweck?
Verschiedene Formate haben verschiedene Stärken:
ICO (Internet Icon): Das traditionelle Favicon-Format. Kann mehrere Bildgrössen in einer Datei enthalten (z.B. 16x16, 32x32 und 48x48). Wird von allen Browsern unterstützt, einschliesslich dem eingestellten Internet Explorer. Immer noch empfohlen als favicon.ico im Stammverzeichnis.
PNG: Das moderne Format für Favicons. Bietet Transparenz und scharfe Darstellung. Wird über das <link>-Tag eingebunden und von allen modernen Browsern unterstützt.
SVG: Das neueste Favicon-Format. Vektorgrafik, die bei jeder Grösse scharf bleibt und sich an Dark-Mode anpassen kann (über CSS @media (prefers-color-scheme: dark) innerhalb der SVG). Unterstützung in Chrome, Firefox und Edge — Safari unterstützt SVG-Favicons bislang nicht vollständig.
Empfehlung: Stellen Sie favicon.ico (16+32 px) als Fallback bereit, PNG-Favicons in den gängigen Grössen, und optional ein SVG-Favicon für maximale Flexibilität.
HTML-Code zum Einbinden der Favicons
So binden Sie alle Favicon-Varianten korrekt in den <head>-Bereich ein:
<!-- Standard Favicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<!-- Web App Manifest (für PWA und Android) -->
<link rel="manifest" href="/site.webmanifest">
Die Datei site.webmanifest enthält die Referenzen auf die PWA-Icons (192px und 512px) sowie weitere App-Metadaten wie Name und Theme-Farbe.
Unser Favicon Generator erstellt nicht nur die Bilder, sondern auch den kompletten HTML-Code und die Manifest-Datei — kopieren und einfügen genügt.
Design-Tipps für Wirkungsvolle Favicons
Ein gutes Favicon muss bei 16x16 Pixel noch erkennbar sein. Das erfordert bewusstes Design:
- Vereinfachen: Verwenden Sie nicht Ihr vollständiges Logo. Meist funktioniert ein einzelner Buchstabe, ein Symbol oder ein vereinfachtes Bildelement besser. Das N von Netflix, das G von Google, das blaue f von Facebook — alle verwenden nur einen kleinen Ausschnitt ihrer Marke.
- Hoher Kontrast: Bei 16 Pixel ist jedes Pixel wichtig. Verwenden Sie starke Kontraste und vermeiden Sie feine Details oder dünne Linien.
- Wiedererkennbarkeit: Das Favicon sollte sofort mit Ihrer Marke assoziiert werden. Nutzen Sie Ihre Markenfarben konsequent.
- Transparenter Hintergrund: Verwenden Sie für PNG- und SVG-Favicons einen transparenten Hintergrund. So passt sich das Icon an helle und dunkle Browser-Themes an.
- Dark-Mode testen: Stellen Sie sicher, dass Ihr Favicon sowohl auf hellem als auch auf dunklem Hintergrund gut sichtbar ist. Ein weisses Icon auf weissem Tab verschwindet.
Favicon Generieren und Testen
Der Workflow für ein professionelles Favicon-Setup:
- Ausgangsbild erstellen: Starten Sie mit einem quadratischen Bild von mindestens 512x512 Pixel. SVG ist ideal, da es verlustfrei skaliert. PNG in hoher Auflösung funktioniert ebenfalls.
- Alle Grössen generieren: Nutzen Sie unseren Favicon Generator, um aus dem Ausgangsbild alle benötigten Varianten zu erstellen.
- Dateien platzieren: Legen Sie
favicon.icoundfavicon.svgins Stammverzeichnis Ihrer Webseite. Die PNG-Dateien können in einem Unterordner liegen. - HTML-Code einfügen: Kopieren Sie den generierten Code in den
<head>-Bereich. - Testen: Prüfen Sie die Darstellung in Chrome, Firefox, Safari und Edge. Testen Sie auch auf einem iPhone (Lesezeichen auf Startbildschirm) und einem Android-Gerät.
Erstellen Sie Ihr Favicon-Set jetzt mit unserem kostenlosen Favicon Generator — alle Grössen, alle Formate, inklusive HTML-Code.
Favicon Generator
Generate favicons in all required sizes from a single image.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.