Vollständige Konfigurationsspezifikationsanleitung für Frontend-Website-Favicons

Eine standardmäßige ICO-Datei unterstützt das Einbetten mehrerer Bitmaps unterschiedlicher Größen in einem einzigen Container, die gängige Konfiguration umfasst drei Größen: 16×16, 32×32 und 48×48. Verschiedene Nutzungsszenarien passen automatisch die entsprechende Größe an: 16×16 wird für Browser-Tab-Leisten verwendet, 32×32 für Lesezeichenleisten und 48×48 für Desktop-Verknüpfungen.

Die mehrgrößige Speicherung von ICO-Dateien folgt der ICO-Formatspezifikation, jede Größe entspricht einem unabhängigen Bitmap-Datenblock. Der Browser liest die Bitmap der entsprechenden Größe gemäß dem aktuellen Renderingszenario, sodass keine mehreren unabhängigen Dateien generiert werden müssen. Ältere IE-Browser unterstützen nur das Lesen von Favicons im ICO-Format. Daher kann die Speicherung von favicon.ico im Stammverzeichnis den Zugriff von älteren Versionen kompatibel machen.

Moderne Browser wie Chrome, Firefox und Edge unterstützen alle Favicons im PNG-Format. Bei der Deklarationsmethode wird das link-Tag verwendet, um das entsprechende size-Attribut hinzuzufügen. Die Kernkonfiguration erfordert zwei Spezifikationen: 32×32 und 192×192. 32×32 passt zum Hochauflösungs-Rendering von Tab-Leisten in modernen Browsern, 192×192 wird für native PWA-Anwendungssymbole auf Android verwendet.

Der standardmäßige Deklarationscode lautet <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> und <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">. Browser wählen automatisch die entsprechende Größe zum Laden gemäß dem Szenario aus.

Einige moderne Browser unterstützen Favicons im SVG-Format. SVG kann Farbanpassung unter verschiedenen Themen durch eingebaute Media Queries erreichen, um sich an System-Dunkelmodus-Wechsel anzupassen. Das Prinzip der SVG-Anpassung besteht darin, eine Media Query für prefers-color-scheme im SVG-Code hinzuzufügen und die Füllfarbe des Symbols für Hell- und Dunkelmodus getrennt zu definieren.

Für die Deklaration eines SVG-Favicons wird type="image/svg+xml" verwendet, um das Dateiformat anzugeben. Es hat eine höhere Priorität als traditionelles ICO und PNG, Browser laden zuerst das SVG-Format. Entwickler können einen SVG zu ICO Konverter verwenden, um das bearbeitete angepasste SVG in das ICO-Format umzuwandeln, um mehr Nutzungsszenarien kompatibel zu machen.

Apple iOS stellt ein spezielles Symbol für zum Startbildschirm hinzugefügte Webseiten bereit, nämlich apple-touch-icon. Die aktuelle Spezifikation erfordert ein 180×180 PNG-Symbol. Frühere Versionen unterstützten Deklarationen mehrerer unterschiedlicher Größen, ab iOS 12 wird die Größe 180×180 bevorzugt verwendet, um alle Apple-Geräte abzudecken.

Der standardmäßige Deklarationscode lautet <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. Es ist nicht erforderlich, das size-Attribut hinzuzufügen, das iOS-System erkennt automatisch die Größe 180×180 für die Anpassung. Abgerundete Ecken und Hervorhebungseffekte werden automatisch vom iOS-System verarbeitet, Entwickler müssen abgerundete Ecken nicht vorverarbeiten.

PWA-Anwendungen müssen die Datei manifest.json konfigurieren, um grundlegende Anwendungsinformationen zu deklarieren. Diese muss ein Icon-Feld mit der entsprechenden Größe enthalten, wobei ein 512×512 Anwendungssymbol deklariert wird, um die PWA-Installationsanforderungen zu erfüllen. theme-color muss sowohl im meta-Tag als auch in manifest deklariert werden und wird für die Farbanpassung der Browser-Adressleiste verwendet.

Für eine vollständige Konfiguration fügen Sie <meta name="theme-color" content="#ffffff"> hinzu und fügen ein Feld mit dem gleichen Namen in manifest.json hinzu, wobei der Wert konsistent mit dem des meta-Tags gehalten wird, um die Adressleisten-Renderlogik verschiedener Browser anzupassen.