Wissensdatenbank & Anleitung
Favicon-Generierung: App-Symbole und Manifeste
Ein Favicon (Lieblingssymbol) ist das kleine Branding-Bild, das in Browser-Tabs, Lesezeichen und mobilen Startbildschirmen angezeigt wird. Moderne Progressive Web Apps (PWAs) erfordern einen hochspezifischen Satz skalierter Symbole, um unterschiedliche Gerätepixelverhältnisse zu unterstützen.
Das manuelle Generieren dieser verschachtelten Symbolpakete über Photoshop ist unglaublich mühsam. Dieses Tool nutzt die HTML5 Canvas API, um ein perfekt formatiertes „.zip“-Paket vollständig clientseitig zu skalieren und zu exportieren
Formel & Berechnungsmethode
Masterbild (512x512) ➔ Leinwandskalierung ➔ [16x16, 32x32, 192x192, 512x512]
Der Algorithmus nimmt eine hochauflösende Masterdatei und interpoliert sie mathematisch auf die genauen Abmessungen, die für Google Android (192 Pixel) und Apple iOS (512 Pixel) erforderlich sind.
Best Practices & Tipps
- Keep It Simple: Ein 16x16 Pixel großes Quadrat ist mikroskopisch klein. Verwenden Sie niemals Text oder komplexe Fotologos für ein Favicon. Verwenden Sie ein stark vereinfachtes, kontrastreiches Vektormonogramm oder ein einfarbiges Symbol.
- Verwenden Sie transparente PNGs: Laden Sie immer eine Masterdatei mit transparentem Hintergrund hoch. Dadurch kann das Betriebssystem des Geräts (wie iOS oder Android) seine eigenen nativen Rundungsmasken (wie Squircles) elegant anwenden.
- Vergessen Sie nicht das Manifest: Damit Android-Geräte Ihre App-Symbole erkennen, müssen Sie eine „site.webmanifest“-JSON-Datei in Ihr Stammverzeichnis einfügen, die auf die genauen Pfade der 192x192- und 512x512-PNGs verweist.
Häufig gestellte Fragen
Benötige ich noch eine .ico-Datei?
Obwohl dies in der Vergangenheit für den Internet Explorer erforderlich war, unterstützen moderne Browser (Chrome, Safari, Firefox) Standard-PNG-Favicons über das Tag „“ vollständig. .ico ist größtenteils veraltet.
Warum sieht mein Favicon auf Retina-Displays verschwommen aus?
Wenn Sie nur ein 16x16-Symbol bereitstellen, wird es auf einem Retina-Bildschirm mit hoher Dichte auf 32x32 gestreckt. Sie müssen immer mindestens die Größe 32x32 angeben, um eine gestochen scharfe Darstellung auf modernen Monitoren zu gewährleisten.
Was ist das Apple Touch-Symbol?
Wenn ein iOS-Benutzer auf „Zum Startbildschirm hinzufügen“ tippt, sucht Safari gezielt nach einem „“-Tag, das auf ein Symbol mit hoher Auflösung (normalerweise 180 x 180) verweist, das als App-Verknüpfung verwendet werden soll.