App-Icon: Wie es sich von einem Favicon unterscheidet
Ein App-Icon ist das Bild, das für eine installierte App auf einem Home-Bildschirm, im Launcher, im Dock oder App-Switcher steht, im Gegensatz zu einem Favicon, das für eine Website innerhalb eines Browsers steht. Im Web bedient dieselbe Grafik beides: iOS nimmt das App-Icon vom apple-touch-icon-Link-Tag, während Android und Desktop-PWAs es aus dem icons-Array im Web-App-Manifest nehmen. Jede Plattform beschneidet und maskiert es in ihre eigene Form, sodass die Grafik so gezeichnet sein muss, dass sie das übersteht.
Dieselbe Grafik, andere Aufgabe
Ein Favicon lebt innerhalb der Browser-Chrome, bei 16 bis 32 Pixeln, neben einem Seitentitel, der den Großteil der Bedeutung trägt. Ein App-Icon lebt auf einem Home-Bildschirm bei 100 Pixeln oder mehr, für sich allein, neben einem Dutzend Konkurrenten, und es ist das Einzige, das dich identifiziert. Es bekommt mehr Raum und mehr Aufmerksamkeit.
Der praktische Unterschied liegt darin, woher die Plattform es liest und was sie danach damit macht. Browser zeichnen ein Favicon so, wie es geliefert wird. Betriebssysteme beschneiden App-Icons auf eine Form, fügen einen Schatten hinzu und färben oder dimmen sie manchmal, sodass eine Bildmarke, die bis an den Rand der Fläche reicht, beschnitten wird.
Woher jede Plattform das App-Icon liest
| Plattform | Quelle | Auszuliefernde Größe |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG, deckend |
| Android | icons-Array im Manifest | 192x192 und 512x512 PNG |
| Desktop-PWA | icons-Array im Manifest | 512x512 PNG |
| Android-Launcher-Formmaske | Manifest-Eintrag mit purpose maskable | 512x512 PNG, 80-%-Safe-Zone |
| Windows-Verknüpfung | favicon.ico | 48x48-Eintrag |
Die zwei Deklarationen, die zählen
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS liest die erste, Android und Desktop-PWAs lesen das icons-Array in der Datei, auf die die zweite verweist. Zusammen decken sie jede Oberfläche installierter Apps ab.
FAQ zu App-Icons
Brauche ich getrennte Grafiken für App-Icon und Favicon?
Meist keine getrennten Grafiken, aber oft eine getrennte Aufbereitung. Das App-Icon will einen gefüllten Hintergrund und großzügigen Rand; das Favicon will die Bildmarke so groß und einfach wie möglich. Dasselbe Logo, zwei Exporte.
Warum sieht mein Home-Bildschirm-Icon wie ein Screenshot aus?
iOS greift auf einen Screenshot der Seite zurück, wenn es keinen apple-touch-icon-Link und keine /apple-touch-icon.png im Website-Root findet. Eines von beiden zu ergänzen behebt es, auch wenn das alte Icon bestehen bleiben kann, bis die Verknüpfung neu angelegt wird.
Welche Größe sollte die Quellgrafik haben?
1024x1024 oder größer, quadratisch, ohne eingebackene abgerundete Ecken. Jede Plattformgröße rechnet daraus sauber herunter, und Plattformen legen ihre eigenen Eckformen an.