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.
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. 2025 ist favicon.ico nicht mehr nötig. Moderne Browser unterstützen PNG-Favicons vollständig. Eine einzelne PNG-Datei in 32×32 Pixel reicht für Browser-Tabs.
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.
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
Fazit
Ein professionelles Favicon-Setup braucht heute mehr als nur eine 16×16 favicon.ico. Mit unserem Favicon Generator oder 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.