Welche Größe sollte ein Favicon haben?
Die richtige Favicon-Größe ist entscheidend, damit Ihr Icon in allen Browsern, auf allen Geräten und Plattformen korrekt dargestellt wird.
Dieser Leitfaden erklärt empfohlene Favicon-Größen und zeigt, wann Sie welches Format verwenden sollten.
Alle Favicon-Größen auf einen Blick
Diese Tabelle fasst alle Favicon-Größen zusammen, die Sie mit Ihrer Website ausliefern sollten.
| Größe | Format | Zweck |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser-Tab |
| 32×32 | favicon-32x32.png | Taskleiste |
| 48×48 | favicon-48x48.png | Desktop-Verknüpfung |
| 180×180 | apple-touch-icon.png | iOS-Startbildschirm |
| 192×192 | android-chrome-192x192.png | Android / PWA |
| 512×512 | android-chrome-512x512.png | PWA-Installation & Splash |
| Beliebig | favicon.svg | Moderne Browser, skalierbar |
| Multi-Size | favicon.ico | Unterstützung älterer Browser |
Kurzantwort
Kurz gesagt:
Empfohlene Favicon-Größen sind 16×16, 32×32, und 48×48 für Browser, 180×180 für Apple-Geräte sowie 192×192 und 512×512 für Android- und PWA-Apps.
Favicon-Größen für Browser
Für Desktop- und Mobile-Browser sollten mehrere PNG-Größen sowie eine ICO-Datei mit mehreren Größen bereitgestellt werden, um eine hohe Kompatibilität zu gewährleisten.
| Größe | Datei | Verwendung |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser-Tabs |
| 32×32 | favicon-32x32.png | Taskleiste & Browser-UI |
| 48×48 | favicon-48x48.png | Desktop-Verknüpfungen |
| Multi-Size | favicon.ico | Unterstützung älterer Browser |
Apple-Touch-Icon-Größen
Apple-Geräte verwenden größere Icons, wenn eine Website zum Home-Bildschirm hinzugefügt wird.
| Größe | Datei | Gerät |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android- & PWA-Icon-Größen
Progressive Web Apps und Android Chrome verlangen bestimmte Icon-Abmessungen.
| Größe | Datei | Verwendung |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Startbildschirm-Icon |
| 512×512 | android-chrome-512x512.png | App-Launcher & Splash Screen |
Diese Größen sind erforderlich, um PWA-Installationsprüfungen zu bestehen.
SVG-Favicon-Größe
SVG-Favicons sind vektorbasiert und benötigen keine feste Pixelgröße.
Empfehlungen:
- Quadratischen viewBox verwenden (z.B. 0 0 100 100)
- Grafik zentriert halten
- Zu feine Details vermeiden
SVG-Favicons skalieren perfekt auf High-DPI- und stark vergrößerten Anzeigen.
Welche Favicon-Formate sollte ich verwenden?
| Format | Wann verwenden? |
|---|---|
| PNG | Standardfall, breite Unterstützung |
| ICO | Maximale Abwärtskompatibilität, ältere Browser |
| SVG | Moderne Browser, skalierbare Icons, Dark Mode |
Best practice: Use PNG + ICO + SVG together.
favicon.ico vs. PNG vs. SVG
Jedes Favicon-Format hat eine andere Aufgabe. So wählen Sie richtig.
| Format | Am besten geeignet für |
|---|---|
| favicon.ico | Maximale Kompatibilität mit älteren Browsern und Windows. Bündelt 16×16, 32×32 und 48×48 in einer Datei. |
| PNG | Der moderne Standard für Tabs und Lesezeichen. Scharf auf High-DPI-Displays und einfach zu erstellen. |
| SVG | Vektor-Favicon, das auf jede Größe skaliert, Dark Mode unterstützt und zukunftssicher ist. |
Empfehlung: Liefern Sie alle drei Formate aus: favicon.ico für ältere Browser, PNG für den Alltag und SVG für High-DPI-Displays und Dark Mode.
Favicon-Größen nach Plattform
Kurzübersicht, was jede Plattform erwartet.
- Chrome: 16×16 und 32×32 PNG; greift auf favicon.ico zurück
- Firefox: 16×16 PNG oder ICO
- Safari: 16×16 PNG; Pinned Tabs verwenden favicon.svg
- Edge: 16×16, 32×32 und 48×48 PNG oder ICO
- Windows: favicon.ico mit 16×16, 32×32 und 48×48; Taskleiste nutzt 32×32
- Android: 192×192 und 512×512 PNG über das Web Manifest
- iOS: apple-touch-icon.png mit 180×180 (152×152 iPad, 167×167 iPad Pro)
- PWA: 192×192 und 512×512 PNG sowie eine site.webmanifest
Empfohlener HTML-Code
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Häufige Favicon-Fehler
- Nur eine Favicon-Größe verwenden
- Apple-Touch-Icons vergessen
- PWA-Icons fehlen
- Zu niedrig aufgelöste Quelldateien verwenden
Alle Favicon-Größen automatisch generieren
Statt Icons manuell zu verkleinern, können Sie alle benötigten Favicon-Größen mit favicon.pub sofort erzeugen. Laden Sie ein Bild hoch und laden Sie ein Komplettpaket mit ICO, PNG, SVG, Apple-Touch-Icons, Android-Icons und PWA-Manifest herunter.
Interne Links
Häufige Fragen
Muss ich alle empfohlenen Größen bereitstellen?
Nicht zwingend, aber mehrere wichtige Größen plus eine Multi-Size-ICO-Datei sorgen für ein deutlich besseres Erscheinungsbild auf verschiedenen Geräten.
Reicht ein einziges 512×512-Icon aus?
Ein einzelnes großes Icon kann skaliert werden, kann aber in älteren Umgebungen unscharf oder verzerrt wirken. Besser ist es, mehrere Schlüsselgrößen bereitzustellen.
Was ist eine maskierbare Icon-Größe?
Maskierbare Icons für PWA-Installationsdialoge sollten 512×512 groß sein, wobei die wichtige Grafik im mittleren 80-%-Kreis bleiben sollte, damit nichts abgeschnitten wird.
Sollte ich favicon.ico oder PNG verwenden?
Am besten beide. Browser bevorzugen heute PNG, aber favicon.ico bleibt der kompatibelste Fallback für Windows und ältere Browser.
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.