So bereitest du 2025 ein Favicon vor

xguru · 2025-02-13T10:02:02+09:00

Da die Erstellung von Favicons immer komplexer geworden ist, werden oft mehr als 20 PNG-Dateien verwendet, nur um das Website-Logo in Browser-Tabs oder auf Touchscreens anzuzeigen Als Alternative wird ein Ansatz vorgeschlagen, der mit vergleichsweise wenigen Icon-Dateien und minimaler Konfiguration die meisten Umgebungen abdeckt Sehr einfache Version Ohne kompliziertes Setup reichen die fünf wichtigsten Icons und eine JSON-Datei aus Beispiel für die grundlegenden Links im HTML <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Wenn PWA (Progressive Web App) unterstützt wird, kommt noch Folgendes hinzu <link rel="manifest" href="/manifest.webmanifest"> Beispielhafte Struktur der Datei manifest.webmanifest { "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Bei maskierbaren Icons können Teile am Rand abgeschnitten werden, daher empfiehlt es sich, einen kreisförmigen Bereich von 409×409 als sichere Zone vorzusehen Schon mit dieser Konfiguration funktionieren Favicons in den meisten wichtigen Browsern und auf den meisten Geräten zuverlässig Ausführliche Erklärung Favicon leitet sich von „favorite icon“ ab und ist das kleine Icon, das unter anderem in Browser-Tabs angezeigt wird Auch Safari unterstützt Favicons inzwischen ordentlich Statt für jede Auflösung eigene Icon-Sets zu erstellen, lässt sich das effizient mit SVG, einigen PNG-Icons und einem einfachen Manifest lösen Die ultimative Favicon-Konfiguration Mit einer SVG-Datei, einigen wenigen PNG-Dateien und einer Web-Manifest-Datei lassen sich Icons in verschiedenen Browsern und auf unterschiedlichen Geräten konsistent anzeigen SVG ist ein Vektorformat und kann daher je nach Bedarf frei skaliert werden; dank Hintergrund-Download ist auch die Performance-Belastung gering Bei PNG werden nur die wirklich nötigen Größen vorbereitet, etwa für Apple (apple-touch-icon) und PWA-Icons Ältere Formate wie Windows-Tile-Icons, Safari Pinned Icon oder rel=“shortcut” sind in aktuellen Browsern weitgehend nicht mehr nötig Da ältere Browser oder Tools Icons teils direkt über den Pfad /favicon.ico abrufen, bleibt ein favicon.ico im Root-Verzeichnis weiterhin wichtig So erstellt man das Ultimate Favicon Set Die folgenden Schritte beschreiben den Prozess zum Erstellen und Optimieren der Icons Schritt 1: SVG vorbereiten Es wird eine Datei icon.svg mit quadratischem Seitenverhältnis benötigt Innerhalb von <svg> kann per CSS-Media-Query ein Farbwechsel für Hell- und Dunkelmodus umgesetzt werden Wie im Beispiel gezeigt, lässt sich mit @media (prefers-color-scheme: dark) eine Farbe für den Dunkelmodus festlegen Schritt 2: ICO-Datei erstellen icon.svg wird in ein Rasterbild mit 16×16 oder 32×32 umgewandelt, um favicon.ico zu erzeugen Dafür können Tools wie GIMP oder Inkscape+ImageMagick verwendet werden Achte darauf, dass das Logo bei kleinen Auflösungen nicht zu stark verwaschen wirkt Schritt 3: PNG-Bilder erstellen PNG-Icons werden in den Größen 512×512, 192×192, 180×180 und 512×512 (maskierbar) vorbereitet Für das iOS-apple-touch-icon wird mit 180×180 gearbeitet; ein Hintergrund oder passende Abstände sind dabei sinnvoll Bei maskierbaren Icons muss ein Bereich von 409×409 als sichere Zone freigehalten werden Schritt 4: PNG und SVG optimieren SVG wird etwa mit SVGO komprimiert, PNG lässt sich mit Squoosh stärker komprimieren Da Nutzer sich in Umgebungen mit eingeschränktem Datenvolumen befinden können, ist eine minimale Dateigröße vorteilhaft Schritt 5: Icons im HTML einbinden Standardmäßig werden favicon.ico, icon.svg und apple-touch-icon.png im Tag <head> eingebunden <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Wenn etwa Webpack verwendet wird, kann das Caching beim Build auch über Hashes verwaltet werden Um Staging-(Entwicklungs-)Umgebung und Produktionsumgebung zu unterscheiden, können auch unterschiedliche Favicons verwendet werden Schritt 6: Web Manifest erstellen In der Datei manifest.webmanifest werden die Icon-Informationen für PWA hinterlegt und über <link rel="manifest" href="/manifest.webmanifest"> eingebunden Das folgende Beispiel definiert Icons für 192×192, 512×512 (maskierbar) und 512×512 { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } In einer Webpack-Umgebung lässt sich das mit Plugins wie webpack-pwa-manifest automatisieren Mit einem solchen Vorgehen lassen sich schon mit wenigen Dateien in den meisten Browsern und auf den meisten Geräten passende Favicons anzeigen Noch bequemer wird es, wenn dafür ein Automatisierungs-Tool betrieben wird

(evilmartians.com)

50 Punkte von xguru 2025-02-13 | 4 Kommentare | Auf WhatsApp teilen

Da die Erstellung von Favicons immer komplexer geworden ist, werden oft mehr als 20 PNG-Dateien verwendet, nur um das Website-Logo in Browser-Tabs oder auf Touchscreens anzuzeigen
Als Alternative wird ein Ansatz vorgeschlagen, der mit vergleichsweise wenigen Icon-Dateien und minimaler Konfiguration die meisten Umgebungen abdeckt

Sehr einfache Version

Ohne kompliziertes Setup reichen die fünf wichtigsten Icons und eine JSON-Datei aus

Beispiel für die grundlegenden Links im HTML

&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;&lt;!-- 180×180 --&gt;

Wenn PWA (Progressive Web App) unterstützt wird, kommt noch Folgendes hinzu

&lt;link rel=&quot;manifest&quot; href=&quot;/manifest.webmanifest&quot;&gt;

Beispielhafte Struktur der Datei manifest.webmanifest

{  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

Bei maskierbaren Icons können Teile am Rand abgeschnitten werden, daher empfiehlt es sich, einen kreisförmigen Bereich von 409×409 als sichere Zone vorzusehen
Schon mit dieser Konfiguration funktionieren Favicons in den meisten wichtigen Browsern und auf den meisten Geräten zuverlässig

Ausführliche Erklärung

Favicon leitet sich von „favorite icon“ ab und ist das kleine Icon, das unter anderem in Browser-Tabs angezeigt wird
Auch Safari unterstützt Favicons inzwischen ordentlich
Statt für jede Auflösung eigene Icon-Sets zu erstellen, lässt sich das effizient mit SVG, einigen PNG-Icons und einem einfachen Manifest lösen

Die ultimative Favicon-Konfiguration

Mit einer SVG-Datei, einigen wenigen PNG-Dateien und einer Web-Manifest-Datei lassen sich Icons in verschiedenen Browsern und auf unterschiedlichen Geräten konsistent anzeigen
SVG ist ein Vektorformat und kann daher je nach Bedarf frei skaliert werden; dank Hintergrund-Download ist auch die Performance-Belastung gering
Bei PNG werden nur die wirklich nötigen Größen vorbereitet, etwa für Apple (apple-touch-icon) und PWA-Icons
Ältere Formate wie Windows-Tile-Icons, Safari Pinned Icon oder rel=“shortcut” sind in aktuellen Browsern weitgehend nicht mehr nötig
Da ältere Browser oder Tools Icons teils direkt über den Pfad /favicon.ico abrufen, bleibt ein favicon.ico im Root-Verzeichnis weiterhin wichtig

So erstellt man das Ultimate Favicon Set

Die folgenden Schritte beschreiben den Prozess zum Erstellen und Optimieren der Icons
Schritt 1: SVG vorbereiten
- Es wird eine Datei icon.svg mit quadratischem Seitenverhältnis benötigt
- Innerhalb von <svg> kann per CSS-Media-Query ein Farbwechsel für Hell- und Dunkelmodus umgesetzt werden
- Wie im Beispiel gezeigt, lässt sich mit @media (prefers-color-scheme: dark) eine Farbe für den Dunkelmodus festlegen
Schritt 2: ICO-Datei erstellen
- icon.svg wird in ein Rasterbild mit 16×16 oder 32×32 umgewandelt, um favicon.ico zu erzeugen
- Dafür können Tools wie GIMP oder Inkscape+ImageMagick verwendet werden
- Achte darauf, dass das Logo bei kleinen Auflösungen nicht zu stark verwaschen wirkt
Schritt 3: PNG-Bilder erstellen
- PNG-Icons werden in den Größen 512×512, 192×192, 180×180 und 512×512 (maskierbar) vorbereitet
- Für das iOS-apple-touch-icon wird mit 180×180 gearbeitet; ein Hintergrund oder passende Abstände sind dabei sinnvoll
- Bei maskierbaren Icons muss ein Bereich von 409×409 als sichere Zone freigehalten werden
Schritt 4: PNG und SVG optimieren
- SVG wird etwa mit SVGO komprimiert, PNG lässt sich mit Squoosh stärker komprimieren
- Da Nutzer sich in Umgebungen mit eingeschränktem Datenvolumen befinden können, ist eine minimale Dateigröße vorteilhaft
Schritt 5: Icons im HTML einbinden
- Standardmäßig werden favicon.ico, icon.svg und apple-touch-icon.png im Tag <head> eingebunden
```
&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;  
```
- Wenn etwa Webpack verwendet wird, kann das Caching beim Build auch über Hashes verwaltet werden
- Um Staging-(Entwicklungs-)Umgebung und Produktionsumgebung zu unterscheiden, können auch unterschiedliche Favicons verwendet werden

Schritt 6: Web Manifest erstellen

In der Datei manifest.webmanifest werden die Icon-Informationen für PWA hinterlegt und über <link rel="manifest" href="/manifest.webmanifest"> eingebunden

Das folgende Beispiel definiert Icons für 192×192, 512×512 (maskierbar) und 512×512

{  
  &quot;name&quot;: &quot;My website&quot;,  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

In einer Webpack-Umgebung lässt sich das mit Plugins wie webpack-pwa-manifest automatisieren

Mit einem solchen Vorgehen lassen sich schon mit wenigen Dateien in den meisten Browsern und auf den meisten Geräten passende Favicons anzeigen
Noch bequemer wird es, wenn dafür ein Automatisierungs-Tool betrieben wird

4 Kommentare

carnoxen 2025-02-15

SVG-Favicon wird in Firefox noch nicht unterstützt...

carnoxen 2025-02-15

Ah, es war Safari.

yeppyshiba 2025-02-13

In einem Projekt, das ich in einem früheren Unternehmen umgesetzt habe, habe ich ein Webgame entwickelt.
Aus Langeweile habe ich als Easter Egg ein animiertes Favicon eingebaut.
Da ich die Animation mit einem Spritesheet umgesetzt habe, wirkte sie ziemlich überzeugend.

xguru 2025-02-13

Favicon-Übersicht für 2021
Ich hatte das vor 4 Jahren schon einmal gepostet, jetzt wurde es an die heutigen Anforderungen angepasst aktualisiert.