Ein Favicon ist das kleine Symbol in Browser-Tabs, Lesezeichen und auf dem Startbildschirm. Damit es überall passt, müssen mehrere Größen erzeugt und korrekt im HTML verlinkt werden – kennt man die Anforderungen, ist das einfach.

Was ist ein Favicon?

„Favicon“ steht für „favorites icon“. Ursprünglich war es ein 16×16-Pixel-Symbol für Lesezeichen im Internet Explorer. Moderne Browser und Geräte brauchen viele Größen:

| Datei | Größe | Verwendung |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Browser-Tabs, Windows-Taskleiste |
| favicon-16x16.png | 16×16 | Kleine Tab-Symbole |
| favicon-32x32.png | 32×32 | Standard-Browser-Tabs |
| apple-touch-icon.png | 180×180 | iOS-Startbildschirm |
| android-chrome-192x192.png | 192×192 | Android-Startbildschirm |
| android-chrome-512x512.png | 512×512 | Android-Startbild, PWA |

Alle Favicon-Größen mit ZapFile erzeugen

Öffnen Sie ZapFiles Favicon-Generator
Laden Sie ein quadratisches Bild hoch (PNG empfohlen, mindestens 512×512 Pixel)
Erzeugen Sie die Größen
Laden Sie das ZIP mit allen Größen und der .ico-Datei herunter

Favicons in die Website einbinden

Fügen Sie diese Tags in den -Bereich Ihres HTML ein:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Für Progressive Web Apps (PWA) fügen Sie zusätzlich eine site.webmanifest-Datei hinzu:

{
  "name": "Your App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ein gutes Favicon gestalten

Einfach halten

Bei 16×16 Pixeln werden komplexe Logos unkenntlich. Nutzen Sie den Anfangsbuchstaben Ihrer Marke, ein vereinfachtes Symbol oder eine einfarbige Fläche.

Starker Kontrast

Das Favicon erscheint auf hellen und dunklen Browseroberflächen. Testen Sie beides. Ein einfarbiger Hintergrund in Ihrer Markenfarbe mit weißem Symbol funktioniert in beiden Modi.

Mit 512×512 beginnen

Erzeugen Sie aus der höchsten verfügbaren Auflösung. ZapFile verkleinert sauber von 512 px, aber das Hochskalieren von 16 px ergibt unscharfe Ergebnisse.

SVG-Favicons (moderne Browser)

Chromium-basierte Browser unterstützen SVG-Favicons, die in jeder Größe scharf bleiben. Ergänzen Sie sie zu Ihren PNG/ICO-Varianten:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Häufige Favicon-Fehler

Quellbild in zu geringer Auflösung: Beginnen Sie immer mit 512 px oder mehr
Nur .ico anbieten: Moderne Geräte brauchen PNG-Größen; mit ICO allein fehlt iOS und Android ein ordentliches Symbol
Cache vergessen: Nach einer Änderung halten Browser das alte Favicon hartnäckig im Cache. Hängen Sie während der Entwicklung einen Versionsparameter an (favicon.ico?v=2)

Fazit

Favicons brauchen mehrere Größen für Browser, iOS, Android und PWA
Mit einem quadratischen PNG in 512×512 beginnen und alle Größen auf einmal erzeugen
ZapFiles Favicon-Generator erzeugt jede benötigte Größe plus ICO-Datei in Sekunden

Favicon für die eigene Website erstellen (alle Größen)