Was ist ein Favicon?
Ein Favicon (Favorites Icon) ist das kleine Symbol, das im Browser-Tab, in Lesezeichen und in der Adressleiste neben der URL angezeigt wird. Der Name kommt aus der Zeit der Internet-Explorer-Lesezeichenleiste (Favorites), in der das Icon erstmals erschien.
Heute ist „Favicon" ein Sammelbegriff für alle App-Icons einer Website — vom 16×16-Pixel-Tab-Icon bis zum 512×512-Pixel-PWA-Splash-Screen-Icon.
⚡ Direkt loslegen: Unseren kostenlosen Favicon-Generator nutzen — Logo hochladen, alle Größen auf einmal generieren und als ZIP herunterladen. Wer kein fertiges Logo hat, baut sich im Icon Studio eins aus über tausend Symbolen.
Welche Größen brauche ich?
Je nach Verwendungszweck sind verschiedene Größen nötig:
| Größe | Verwendung | Dateiname |
|---|---|---|
| 16×16 | Browser-Tab (Standard) | favicon-16.png |
| 32×32 | Browser-Tab (scharf), Taskleiste Windows | favicon.png / favicon-32.png |
| 48×48 | Windows Taskleiste | favicon-48.png |
| 96×96 | Android / Shortcut | favicon-96.png |
| 180×180 | Apple Touch Icon (iPhone/iPad) | apple-touch-icon.png |
| 192×192 | Android PWA / Homescreen | icon-192.png |
| 512×512 | PWA Splash Screen, Google Play | icon-512.png |
Das traditionelle favicon.ico
Ältere Tutorials empfehlen favicon.ico im Root-Verzeichnis — ein Containerformat, das mehrere Größen (16×16, 32×32, 48×48) in einer Datei speichert. Heute ist favicon.ico nicht mehr zwingend nötig: Moderne Browser unterstützen PNG-Favicons vollständig, eine einzelne 32×32-PNG reicht für Browser-Tabs. Wie dieses betagte Format von 1985 überhaupt aufgebaut ist und warum wir es für unseren Generator byte-weise selbst bauen, steht im Werkstatt-Bericht zum ICO-Format.
Ausnahme: Wenn du maximale Kompatibilität mit sehr alten Browsern brauchst, kann eine favicon.ico-Datei (ohne HTML-Tag, einfach im Root) als Fallback sinnvoll sein.
Das Apple Touch Icon
Wenn ein iPhone-Nutzer eine Website zum Homescreen hinzufügt, wird das Apple Touch Icon angezeigt — ähnlich einer App. Die Standardgröße ist 180×180 Pixel. Apple rundet die Ecken automatisch ab, also kein manuelles Runden nötig.
Wichtige Details:
- Kein transparenter Hintergrund — Apple füllt Transparenz mit Schwarz
- Farbiger, opaker Hintergrund empfohlen
- Dateiname: apple-touch-icon.png (ohne Link-Tag sucht iOS automatisch danach)
- Mit Link-Tag explizit angeben für beste Kontrolle
PWA-Icons (Progressive Web App)
Für eine vollständige PWA-Installation (auf Homescreen hinzufügen unter Android, Windows etc.) sind zwei Kerngrößen nötig:
- 192×192 px — für Android-Homescreen-Icons
- 512×512 px — für Splash Screens und höhere Displays
Zusätzlich empfehlenswert: ein Maskable Icon — eine Version mit mehr Padding (safe zone), die Android automatisch in verschiedene Formen (Kreis, Quadrat, gerundetes Quadrat) schneidet. Unser PWA-Generator erstellt maskable Icons automatisch; die ganze Einrichtung erklärt der Beitrag PWA erstellen — Anleitung.
Der vollständige HTML-Code
Dieser Code gehört in den <head>-Bereich jeder Seite:
<link rel="icon" type="image/png" href="/favicon.png">— Standard-Favicon<link rel="apple-touch-icon" href="/apple-touch-icon.png">— iOS Homescreen<link rel="manifest" href="/manifest.json">— PWA Manifest<meta name="theme-color" content="#f97316">— Browser-UI-Farbe
Schritt-für-Schritt: Favicon erstellen
- 1. Logo als quadratisches SVG oder 512×512-PNG vorbereiten — je einfacher, desto besser (bei 16px werden Details unlesbar)
- 2. Alle Größen generieren — mit unserem Favicon-Generator in einem Schritt
- 3. Dateien ins public/-Verzeichnis kopieren
- 4. HTML-Code in <head> einfügen
- 5. Testen — Browser-Tab, iPhone-Homescreen, Chrome DevTools → Application → Manifest
Designtipps für Favicons
- Einfachheit schlägt Detail — bei 16px Größe gehen feine Details verloren
- Kontrastreicher Hintergrund, damit das Icon im Tab gut sichtbar ist
- Keine Buchstaben, die kleiner als 10px werden — unleserlich
- Teste dein Icon in verschiedenen Browser-Themes (Dark-Mode-Tab-Leiste!)
- Für Dark Mode kann ein zweites Icon per
media="(prefers-color-scheme: dark)"hinterlegt werden
Häufige Fragen
Brauche ich 2025 noch eine favicon.ico-Datei?
Für aktuelle Browser nicht mehr — ein 32×32-PNG reicht fürs Tab-Icon. Eine favicon.ico im Wurzelverzeichnis schadet aber nicht als Fallback für sehr alte Software und wird von manchen Diensten automatisch gesucht. Ein modernes Setup kombiniert PNG-Favicons mit Apple Touch Icon und PWA-Icons.
Welche Favicon-Größen sind Pflicht?
Das Minimum: 32×32 (Tab), 180×180 (Apple Touch Icon) und 192×192 plus 512×512 (PWA/Android-Homescreen). 16×16 und 48×48 sind sinnvolle Ergänzungen. Ein Generator erzeugt alle Größen auf einmal aus einer Vorlage.
Warum sieht mein Favicon bei 16 Pixeln matschig aus?
Weil zu viele Details in 16 Pixel gepresst werden. Erfolgreiche Favicons sind stark reduziert — ein Buchstabe, eine Grundform, zwei Farben. Kein Algorithmus rettet ein filigranes Logo bei dieser Größe; die Vereinfachung muss vorher passieren.
Muss das Apple Touch Icon transparent sein?
Im Gegenteil — es sollte einen opaken, farbigen Hintergrund haben. Apple füllt Transparenz mit Schwarz, was selten gewünscht ist. Die Ecken rundet iOS automatisch ab, ein eckiges 180×180-PNG ist also korrekt.
Fazit
Ein professionelles Favicon-Setup braucht heute mehr als nur eine 16×16 favicon.ico. Mit unserem Favicon-Generator oder dem PWA-Generator lassen sich alle nötigen Größen automatisch erstellen — inklusive Apple Touch Icon, PWA-Icons, maskable Icons, manifest.json und fertigem HTML-Code.
Quellen
MDN — rel="icon" · Apple — App Icons (Human Interface Guidelines) · web.dev — Web App Manifest.