Was ist ein Favicon?
Ein Favicon (favorite icon) ist das kleine Symbol, das in Browser-Tabs, Lesezeichen, Verlaufseinträgen und Desktop-Verknüpfungen erscheint. Es ist eines der ersten visuellen Elemente, die Besucher an Ihrer Website wahrnehmen. Ein fehlendes Favicon signalisiert eine unprofessionelle oder unfertige Website.
Favicons haben sich von einfachen 16x16-Pixel-Symbolen zu einem komplexen Satz von Größen entwickelt, die für verschiedene Geräte und Kontexte benötigt werden. Moderne Websites brauchen mehrere Favicon-Formate, um alle Anwendungsfälle abzudecken.
Das ICO-Format für Favicons
ICO ist das ursprüngliche Favicon-Format und bleibt das am universellsten unterstützte. Eine einzelne favicon.ico-Datei enthält mehrere Bilder in verschiedenen Größen (16x16, 32x32, 48x48 usw.), sodass Browser und Betriebssysteme automatisch die am besten geeignete Größe auswählen können.
Wenn ein Browser /favicon.ico anfordert, erhält er eine Datei mit allen benötigten Größen. Es ist kein zusätzliches HTML-Markup erforderlich — Browser prüfen automatisch im Stammverzeichnis nach favicon.ico.
Moderne Favicon-Anforderungen (2026)
| Datei | Größe | Zweck |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Ältere Browser, Windows-Verknüpfungen |
| apple-touch-icon.png | 180x180 | iOS-Homescreen-Lesezeichen |
| icon-192.png | 192x192 | Android Chrome, PWA-Manifest |
| icon-512.png | 512x512 | PWA-Splashscreen, Installationsdialog |
| favicon.svg | Skalierbar | Moderne Browser, unendliche Skalierung, Dark Mode |
So erstellen Sie ein Favicon aus einem PNG
- Starten Sie mit einem quadratischen Bild — mindestens 512x512 Pixel. Verwenden Sie Ihr Logo oder eine vereinfachte Version davon.
- Verwenden Sie PNG mit Transparenz — ein transparenter Hintergrund sorgt dafür, dass Ihr Favicon in jedem Browser-Theme (hell oder dunkel) sauber aussieht.
- In den PNG-zu-ICO-Konverter hochladen — er erzeugt eine favicon.ico mit sechs Größen: 256, 128, 64, 48, 32 und 16 Pixel.
- In kleinen Größen testen — betrachten Sie Ihr Favicon in 16x16. Komplexe Designs müssen für winzige Anzeigegrößen möglicherweise vereinfacht werden.
Transparenz in Favicons
PNG-Quelle = transparentes Favicon. Wenn Ihr Quellbild einen transparenten Hintergrund hat, bleibt dieser im ICO erhalten. Das ist wichtig für Favicons, die sowohl auf hellen als auch dunklen Browser-Themes gut aussehen sollen.
JPG-Quelle = einfarbiger Hintergrund. JPG unterstützt keine Transparenz, daher hat ein aus JPG erzeugtes Favicon immer einen einfarbigen Hintergrund. Verwenden Sie nach Möglichkeit PNG. Wenn Ihr Logo nur als JPG vorliegt, erfahren Sie, wie Sie den Hintergrund eines JPG transparent machen, bevor Sie das Favicon erstellen.
Bewährte Praktiken
- Halten Sie es einfach: Favicons werden mit 16x16 Pixeln dargestellt. Komplexe Logos werden unleserlich. Verwenden Sie eine vereinfachte Marke oder einen einzelnen Buchstaben.
- In Originalgröße testen: Betrachten Sie Ihr Favicon vor dem Deployment in einem Browser-Tab. Was bei 512x512 großartig aussieht, kann bei 16x16 unkenntlich sein.
- Kontrast sicherstellen: Testen Sie sowohl auf hellen als auch dunklen Browser-Themes. Ihr Favicon sollte vor jedem Hintergrund sichtbar sein.
- Vektorquelle verwenden: Wenn Sie eine SVG-Version Ihres Logos haben, liefert diese in allen Größen schärfere Ergebnisse.
HTML-Einbindung
Fügen Sie diese Zeilen zum <head> Ihres HTML hinzu, um vollständige Favicon-Unterstützung zu erhalten:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Schnellstart: Legen Sie mindestens eine favicon.ico (mit 16x16 und 32x32 Größen) im Stammverzeichnis Ihrer Website ab. Browser finden sie automatisch ohne jegliches HTML-Markup.
ICO vs. PNG vs. SVG: Welches Favicon-Format?
| Format | Funktioniert in | Verwenden für |
|---|---|---|
| favicon.ico | Allen Browsern, auch alten; wird unter /favicon.ico ohne HTML gefunden | Den Fallback, den jede Website haben sollte |
| PNG | Allen modernen Browsern über <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) und Icons im Web-App-Manifest (192 und 512) |
| SVG | Chrome, Edge und Firefox; ältere Safari-Versionen ignorieren es | Ein scharfes Icon in jeder Größe, mit Dark-Mode-Farben per CSS |
Ein gängiges Minimalset besteht aus favicon.ico, icon.svg, apple-touch-icon.png und den beiden Manifest-PNGs. Verzichten Sie auf SVG, wenn Ihr Logo feine Details hat, die bei 16 px zerfallen; zeichnen Sie stattdessen ein vereinfachtes Icon.