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.
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.
Recommended HTML Markup
<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">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
Bild hochladen und ein komplettes Favicon-Paket generieren