App-Icon vs. Favicon: Was ist der Unterschied?
Sie sehen ähnlich aus, erfüllen aber unterschiedliche Zwecke. Hier erfährst du, wann du welches verwendest und wie sie zusammenspielen.
Vergleich nebeneinander
| Aspekt | Favicon | App-Icon |
|---|---|---|
| Hauptnutzung | Browser-Tabs, Lesezeichen, Suchergebnisse | Startbildschirm, App-Umschalter, App-Stores |
| Wo Nutzer es sehen | Desktop-Browser, mobile Browser | iOS-Startbildschirm, Android-Launcher |
| Typische Größen | 16x16, 32x32, 96x96px | 180x180, 192x192, 512x512px |
| Dateiformat | ICO, PNG, SVG | PNG (oft maskable) |
| Definiert in | HTML-<link>-Tags | manifest.json |
| Erforderlich für | Alle Websites | PWAs, installierbare Web-Apps |
Was jedes davon ist
Ein Favicon (kurz für "favorite icon") ist das kleine Icon, das in Browser-Tabs, Lesezeichen, im Browserverlauf und in Suchmaschinenergebnissen erscheint. Es ist der visuelle Identifikator deiner Site im Browser.
Ein App-Icon ist das größere Icon, das auf dem Startbildschirm eines Nutzers erscheint, wenn er deine Web-App als Progressive Web App (PWA) installiert. Es repräsentiert deine App als eigenständige Anwendung.
Wo jedes davon auftaucht
Favicon
Start hereJede Site braucht eins, PWA oder nicht
- Identifikation im Browser-Tab
- Visuelle Wiedererkennung in Lesezeichen
- Markenidentität im Suchergebnis
- Icons im Browserverlauf
- Desktop-Verknüpfungen (Windows)
- Deklariert im HTML: <link rel="icon" href="/favicon.ico">
App-Icon
Erscheint erst, wenn jemand die App installiert
- Launcher auf dem Startbildschirm
- App-Umschalter / Multitasking
- Benachrichtigungs-Badges
- Einträge in App-Stores
- Markenidentität auf dem Splash-Screen
- Deklariert in manifest.json: "icons": [{"sizes": "192x192"}]
Favicon-Größen neben App-Icon-Größen
1. Größenanforderungen
Favicons sind typischerweise klein (16x16 bis 96x96px), weil sie in kompakten Bereichen wie Browser-Tabs erscheinen. Sie müssen in winzigen Größen erkennbar sein.
App-Icons sind viel größer (180x180 bis 512x512px), weil sie prominent auf Startbildschirmen angezeigt werden. Sie können mehr Details enthalten und werden oft mit maskable Varianten für unterschiedliche Geräteformen gestaltet.
2. Nutzungskontext
Favicons sind beim Surfen immer sichtbar: Sie sind Teil der Browser-Oberfläche. Nutzer sehen sie ständig, während sie zwischen Tabs und Sites wechseln.
App-Icons erscheinen erst nach der Installation. Sie repräsentieren deine App als eigenständige Einheit, getrennt vom Browser. Nutzer tippen darauf, um deine App im Vollbildmodus zu starten.
3. Technische Umsetzung
Favicons werden im HTML mit <link>-Tags im Head des Dokuments deklariert. Für verschiedene Kontexte können mehrere Größen angegeben werden.
App-Icons werden in der manifest.json definiert, die vom HTML referenziert wird. Das Manifest enthält außerdem weitere PWA-Metadaten wie App-Name, Theme-Farben und Anzeigemodus.
Brauchst du beide?
Ja, du solltest beide haben. Hier ist der Grund.
Favicons sind für alle Websites unverzichtbar: Sie verbessern die Markenwiedererkennung in Browser-Tabs und Suchergebnissen.
App-Icons sind erforderlich, wenn Nutzer deine Site als PWA installieren sollen. Ohne sie erscheinen keine Installationsaufforderungen und das Erlebnis auf dem Startbildschirm ist schlecht.
Sie können dasselbe Design teilen, sollten aber für ihre jeweiligen Größen und Kontexte optimiert werden.
Design-Tipps für Favicons
Halte Designs schlicht: Details gehen bei 16px verloren.
Nutze hohen Kontrast für die Sichtbarkeit.
Teste in mehreren Größen (16x16, 32x32, 96x96).
Ziehe SVG für gestochen scharfe Skalierung in Betracht.
Stelle sicher, dass es auf hellen und dunklen Hintergründen funktioniert.
Design-Tipps für App-Icons
Gestalte für mindestens 192x192px (512x512px empfohlen).
Erstelle maskable Varianten für Android.
Stelle sicher, dass die sichere Zone (die inneren 80%) die kritischen Elemente enthält.
Verwende eine konsistente Markenidentität mit deinem Favicon.
Teste auf echten Geräten für die besten Ergebnisse.