Favicon kommt von "favorite icon" — dem Icon, das Browser zusammen mit den Lesezeichen speichern. Heute geht das Konzept weit darüber hinaus: das Favicon erscheint in Browser-Tabs, in der Adressleiste, bei Desktop-Verknüpfungen, auf dem Homescreen von iOS- und Android-Handys, in Google-Suchergebnissen und als Icon von Progressive Web Apps (PWAs). Jeder Kontext erfordert eine andere Größe.
Der häufigste Fehler ist, nur eine favicon.ico-Datei mit 16×16 Pixeln zu erstellen und die Arbeit als erledigt zu betrachten. Auf einem Retina-Monitor oder einem iPhone erscheint dieses Icon dann unscharf. Die Lösung ist, ein vollständiges Set an Größen zu generieren — was kompliziert klingt, aber mit dem richtigen Werkzeug in Sekunden erledigt ist.
Was die .ico-Datei ist und wann sie zu nutzen ist
Das Format .ico ist das ursprüngliche Favicon-Format, das Microsoft in den 90ern entwickelt hat. Es hat eine besondere Eigenschaft: es kann mehrere Größen innerhalb einer einzigen Datei enthalten — zum Beispiel 16×16 und 32×32 gleichzeitig. Der Browser wählt die passende Größe für jeden Kontext.
Die favicon.ico-Datei ist 2026 aus einem bestimmten Grund noch nötig: ältere Browser und manche Suchroboter versuchen automatisch, die Datei unter /favicon.ico im Root der Website aufzurufen. Existiert sie nicht, erzeugt das unnötige 404-Fehler in den Serverlogs. Deshalb ist es ratsam, auch wenn du überall modernes PNG verwendest, eine favicon.ico im Root zu haben.
Vollständige Tabelle der Favicon-Größen
Dies ist die Liste aller Größen, die ein vollständiges Favicon 2026 abdecken sollte:
| Größe | Format | Wo verwendet |
|---|---|---|
| 16 × 16 px | .ico / PNG | Browser-Tab (Standard) |
| 32 × 32 px | .ico / PNG | Desktop-Verknüpfung (Windows), Tabs auf HiDPI-Bildschirmen |
| 48 × 48 px | .ico / PNG | Verknüpfung im Windows Explorer |
| 57 × 57 px | PNG | iPhone (iOS 1–6, Nicht-Retina-Bildschirme) |
| 60 × 60 px | PNG | iPhone (iOS 7+, Nicht-Retina-Bildschirme) |
| 72 × 72 px | PNG | iPad (iOS 1–6, Nicht-Retina-Bildschirme) |
| 76 × 76 px | PNG | iPad (iOS 7+, Nicht-Retina-Bildschirme) |
| 96 × 96 px | PNG | Verknüpfung in Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), Windows-8-Kachel |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus und neuere Versionen |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Android-Chrome-Splash-Screen, hochauflösende PWA |
💡 Gute Nachricht: du musst nicht jede Größe manuell erstellen. Der Favicon-Generator von ImageTools erzeugt all diese Dateien automatisch aus einem einzigen Bild — inklusive der .ico mit mehreren Größen und einem ZIP mit allen PNGs.
Welches Bild als Basis für das Favicon verwenden
Das Ausgangsbild braucht mindestens 512×512 Pixel — das ist die größte benötigte Größe, und von einem großen Bild auszugehen garantiert, dass die kleineren Größen in guter Qualität erzeugt werden. Ein kleines Bild als Basis zu verwenden führt zu unscharfen Icons in den größeren Größen.
Als Eingabe akzeptierte Formate
- PNG mit transparentem Hintergrund — ideal. Das Icon wirkt sauber bei jeder Hintergrundfarbe von Tab oder Homescreen.
- PNG mit durchgehendem Hintergrund — funktioniert gut, wenn die Hintergrundfarbe zum Design deiner Website passt.
- JPG — wird akzeptiert, aber ohne Transparenzunterstützung.
- SVG — der beste Ausgangspunkt, falls verfügbar. Vektorbasiert, verlustfrei in jeder Größe.
Design-Tipps für Favicons
Ein Favicon ist ein sehr kleiner Raum — die 16×16-Version hat insgesamt nur 256 Pixel. Das bringt Design-Einschränkungen mit sich, die viele ignorieren:
- Nutze das einfachste Element deiner Marke. Das komplette Logo funktioniert meist nicht bei 16px. Bevorzuge nur den Anfangsbuchstaben, ein isoliertes Symbol oder eine vereinfachte Version des Icons.
- Vermeide feinen Text. Jeglicher Text unter 32px wird unlesbar.
- Nutze hohen Kontrast. Das Favicon konkurriert mit Dutzenden anderer offener Tabs — ein kontrastarmes Icon verschwindet visuell.
- Ein durchgehender Farbhintergrund funktioniert oft besser als transparent in vielen Fällen. Das stellt sicher, dass sich das Icon sowohl in hellen als auch dunklen Tabs abhebt.
- Teste das Ergebnis bei 16px, bevor du die Arbeit als abgeschlossen betrachtest. Ein Design, das bei 512px großartig aussieht, kann bei 16px unkenntlich werden.
Erstelle jetzt dein Favicon — alle Größen auf einmal
Lade dein Bild hoch und lade ein ZIP mit der .ico und allen benötigten PNGs für Browser, iPhone, Android und PWA herunter. Kostenlos, ohne Registrierung.
Favicon kostenlos erstellenWie du das Favicon auf deiner Website installierst
Nach dem Generieren der Dateien musst du sie im <head> des HTML referenzieren. Der für 2026 empfohlene vollständige Code ist:
<!-- Grundlegendes Favicon für Browser -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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 (iPhone und iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android und PWA -->
<link rel="manifest" href="/site.webmanifest">Die Datei favicon.ico muss im Root der Website liegen (im selben Verzeichnis wie index.html). Die restlichen PNG-Dateien können im Root oder in einem Unterordner liegen, solange die Pfade im HTML korrekt sind.
Die Datei site.webmanifest
Damit PWAs und Android Chrome dein Icon korrekt erkennen, brauchst du eine Datei site.webmanifest im Root der Website. Der grundlegende Inhalt ist:
{
"name": "Name deiner Website",
"short_name": "Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 Das ZIP des Favicon-Generators enthält bereits die vorkonfigurierte Datei site.webmanifest mit den korrekten Pfaden — einfach entpacken und die Dateien in den Root deiner Website hochladen.
Wie du es auf bestimmten Plattformen installierst
WordPress
In WordPress heißt das Favicon "Website-Icon". Zum Einrichten: gehe zu Design → Customizer → Website-Identität und klicke auf "Website-Icon auswählen". WordPress kümmert sich automatisch darum, die benötigten Größen aus dem hochgeladenen Bild zu erzeugen — nutze einfach ein quadratisches Bild mit mindestens 512×512 Pixeln.
Shopify
Unter Online-Shop → Einstellungen, scrolle zu "Shop-Icon" und lade ein quadratisches Bild mit mindestens 512×512 Pixeln in PNG oder JPG hoch.
Wix
Unter Einstellungen → Markenidentität → Favicon. Nutze ein quadratisches Bild in PNG oder JPG.
Squarespace
Unter Design → Browser-Stil, Abschnitt "Favicon". Empfohlen: quadratisches PNG mit 100×100 Pixeln (den Rest übernimmt Squarespace).
Reines HTML/CSS oder Frameworks
Lege alle generierten Dateien im Root des Projekts ab und füge die oben gezeigten <link>-Tags im <head> jeder Seite hinzu — oder im Basis-Layout, wenn du ein Framework wie Next.js, Nuxt oder ähnliches verwendest.
Überprüfen, ob das Favicon funktioniert
Öffne nach der Installation die Website in einem Browser-Tab und prüfe, ob das Icon im Tab erscheint. Falls es nicht sofort erscheint, versuche:
- Den Browser-Cache leeren (Strg+Shift+R unter Windows, Cmd+Shift+R unter Mac).
- Im Inkognito-Tab öffnen — der keinen Cache verwendet.
- Ein paar Minuten warten, da Browser Favicons oft für unterschiedlich lange Zeiträume im Cache speichern.
- Prüfen, ob der Dateipfad im HTML korrekt ist und die Datei wirklich auf dem Server existiert.