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.
- Auf unseren Konverter hochladen — wählen Sie ICO als Ausgabeformat. Der Konverter erzeugt automatisch ein ICO mit mehreren Auflösungen.
- In kleinen Größen testen — betrachten Sie Ihr Favicon in 16x16. Komplexe Designs müssen für kleine 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.
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.