Ein Favicon (kurz für „Favoriten-Symbol“) erscheint in Browser-Tabs, Lesezeichen und auf dem Startbildschirm von Mobilgeräten. Es ist ein kleines, aber wichtiges Branding-Element – und überraschend komplex in der korrekten Implementierung auf allen Browsern und Geräten. Hier erfahren Sie, wie es geht.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol, das mit einer Website verknüpft ist. Es sieht folgendermaßen aus:
- Im Browser-Tab neben Ihrem Seitentitel
- In den Lesezeichen und im Verlauf des Browsers
- Auf den iOS-/Android-Startbildschirmen, wenn ein Nutzer Ihre Website speichert (Apple-Touch-Symbol)
- In PWA-Installationsprogrammen als App-Symbol
- In den Suchmaschinenergebnissen (manchmal)
Für ein vollständiges Favicon-Setup werden verschiedene Größen und Formate benötigt, um alle diese Kontexte abzudecken.
Die erforderlichen Favicon-Größen
| Größe | Zweck |
|---|---|
| 16×16 px | Browser-Tab (Standard) |
| 32×32 px | Browser-Tab (hohe DPI), Taskleiste |
| 48×48 px | Windows-Website-Icons |
| 180×180 px | Apple Touch-Symbol (iOS-Startbildschirm) |
| 192×192 px | Android Chrome-Startbildschirm |
| 512×512 px | PWA-Startbildschirm, hochauflösende Kontexte |
| SVG | Moderne Browser (unendlich skalierbar) |
Schritt 1: Beginnen Sie mit einem hochauflösenden Quellbild
Erstellen oder exportieren Sie Ihr Logo/Symbol mit einer Mindestgröße von 512 × 512 Pixeln als quadratische PNG-Datei mit transparentem Hintergrund. Diese Datei dient als Grundlage für die Generierung aller kleineren Größen.
Tipps für ein faviconfreundliches Design:
- Halten Sie es einfach – komplexe Designs sind in 16×16 nicht lesbar.
- Hohen Kontrast verwenden – helle Hintergründe mit dunklen Symbolen oder umgekehrt
- Vermeiden Sie dünne Linien – sie verschwinden bei kleinen Größen.
- Testen Sie bei 16×16 – Verkleinern Sie die Ansicht in Ihrem Design-Tool, um die Lesbarkeit zu überprüfen.
Schritt 2: Alle Favicon-Größen generieren
Anstatt die Größe manuell an die jeweilige Anforderung anzupassen, verwenden Sie einen Favicon-Generator. Der Favicon-Generator von PicsSizer (/favicon-generator) nimmt Ihr Quellbild und erstellt daraus ein komplettes Paket.
- Laden Sie Ihre 512×512 (oder größere) PNG-Quelldatei hoch.
- Vorschau der Darstellung in jeder Größe
- Laden Sie das vollständige Favicon-Paket mit allen erforderlichen Größen herunter.
Schritt 3: HTML hinzufügen
Fügen Sie diese Tags in die <head> Ihres HTML-Codes ein:
<!-- Standard favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />
Schritt 4: Erstellen des Web-App-Manifests
Für Android-Startbildschirmsymbole und PWA-Unterstützung erstellen Sie eine site.webmanifest Datei:
{
"name": "Your Site Name",
"short_name": "SiteName",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Der SVG-Favicon-Ansatz
Für moderne Browser ist ein SVG-Favicon ideal:
- Unendlich skalierbar – gestochen scharf in jeder Auflösung
- Geringe Dateigröße – oft unter 2 KB
- Unterstützt den Dunkelmodus – Sie können CSS-Medienabfragen innerhalb von SVG verwenden.
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
Mit einer Media Query für den Dunkelmodus innerhalb des SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon { fill: white; }
}
.icon { fill: black; }
</style>
<rect class="icon" width="32" height="32" rx="4" />
</svg>
Alle modernen Browser (Chrome, Firefox, Safari 14+, Edge) unterstützen SVG-Favicons.
Häufige Favicon-Probleme beheben
Favicon wird nicht angezeigt:
- Prüfen Sie, ob die Datei unter dem in
hrefangegebenen Pfad existiert. - Aktualisieren Sie Ihren Browser (Strg+Umschalt+R / Cmd+Umschalt+R)
- Überprüfen Sie im Netzwerk-Tab der Entwicklertools Ihres Browsers auf 404-Fehler bei Favicon-Anfragen.
Favicon wird auf Desktop-Computern, aber nicht auf Mobilgeräten angezeigt:
- Stellen Sie sicher, dass
apple-touch-iconfür iOS konfiguriert ist. - Stellen Sie sicher, dass das Webmanifest für Android vorhanden und verknüpft ist.
Altes Favicon wird nach dem Update weiterhin angezeigt:
Browser speichern Favicons aggressiv im Cache. Fügen Sie eine Abfragezeichenfolge hinzu, die den Cache umgeht: href="/favicon.png?v=2"
Favicon unscharf oder pixelig:
- Regenerieren aus einem höher auflösenden Quellbild (mindestens 512×512 Pixel)
- Prüfen Sie, ob Sie für jeden Kontext die richtige Größe verwenden.
Vollständige Favicon-Checkliste
- Quellbild mit 512×512 Pixeln (transparentes PNG)
- favicon.ico (16×16 + 32×32 innerhalb des ICO-Formats, für ältere Internet Explorer-Versionen)
- favicon-16x16.png
- favicon-32x32.png
- apple-touch-icon.png (180×180)
- android-chrome-192x192.png
- android-chrome-512x512.png
- favicon.svg (optional, aber empfohlen)
- site.webmanifest
- HTML
<link>Tags in<head>
Verwenden Sie den Favicon-Generator von PicsSizer, um das gesamte Paket aus einem einzigen Bild zu generieren, oder sehen Sie sich den Favicon Size Guide für die vollständige Referenz an.
Häufig gestellte Fragen
- Welche Größe sollte ein Favicon haben?
- Das Favicon für den Browsertab sollte mindestens 16×16 Pixel groß sein. Moderne Favicon-Einstellungen bieten jedoch mehrere Größen: 16×16, 32×32 und 48×48 Pixel für Browser; 180×180 Pixel für das Apple-Touch-Icon; 192×192 und 512×512 Pixel für Android/PWA-Manifeste. Verwenden Sie ein 512×512 Pixel großes Quellbild und generieren Sie daraus alle Größen.
- Welches Format sollte ein Favicon haben?
- Moderne Browser unterstützen ICO-, PNG- und SVG-Favicons. Empfohlen wird folgendes Vorgehen: ein SVG-Favicon für moderne Browser (unbegrenzt skalierbar, sehr kleine Datei), ein 32×32-PNG-Bild als Fallback und ein 180×180-PNG-Apple-Touch-Icon. Eine ICO-Datei mit den Formaten 16×16 und 32×32 ist für ältere Browser geeignet.
- Warum wird mein Favicon im Browser nicht angezeigt?
- Häufige Ursachen: Die Favicon-Datei befindet sich nicht im richtigen Pfad, das HTML-Link-Tag fehlt oder hat das falsche Typ-Attribut, oder der Browser hat ein altes Favicon zwischengespeichert. Versuchen Sie, die Seite neu zu laden (Strg+Umschalt+R oder Cmd+Umschalt+R), um den Browser zum erneuten Laden des Favicons zu zwingen.
- Benötige ich eine ICO-Datei oder kann ich auch eine PNG-Datei verwenden?
- Moderne Browser (Chrome, Firefox, Safari, Edge) unterstützen PNG-Favicons. Eine ICO-Datei ist nur für die Unterstützung des älteren Internet Explorers erforderlich. Wenn Sie nicht den Internet Explorer als Zielplattform verwenden, reicht ein 32×32-PNG-Bild für den Browsertab vollkommen aus, und Sie können die ICO-Datei komplett weglassen.
- Wie sollte ein gutes Favicon aussehen?
- Ein gutes Favicon ist eine vereinfachte Version Ihres Logos oder Ihrer Marke, die in den Größen 16×16 und 32×32 Pixel gut lesbar ist. Vermeiden Sie kleine Schrift, komplexe Farbverläufe und feine Details – diese sind in kleinen Größen kaum erkennbar. Ein einzelner Buchstabe, ein einfaches Symbol oder eine markante Form eignen sich am besten.