Praktischer Leitfaden zur Bereitstellung von Website-Favicons: Dateien, Deklarationen und Cache-Aktualisierung

Ein Standard-Favicon-Paket enthält 5 Dateitypen, die sich an unterschiedliche Geräte und Browser anpassen. Das favicon.ico im ICO-Format ist ein traditionelles Format, meist in den Größen 16×16, 32×32 und 48×48. Die Platzierung im Stammverzeichnis der Website ermöglicht die automatische Erkennung durch ältere IE-Versionen.

Mehrgröße-Icons im PNG-Format werden für moderne Browser und mobile Geräte verwendet, gängige Größen sind 16×16, 32×32 und 180×180. Das apple-touch-icon ist speziell für iOS Safari konzipiert, um ein klares Icon anzuzeigen, wenn Benutzer die Website dem Startbildschirm hinzufügen. Die Web manifest-Datei stellt die Icon-Konfiguration für PWA-Anwendungen bereit und passt sich an das Szenario des Hinzufügens zum Startbildschirm auf Android-Systemen an.

Die Deklarationsreihenfolge folgt der Regel der Abwärtskompatibilität: zuerst werden hochprioritäre moderne Formate deklariert, dann wird auf traditionelle Formate zurückgegriffen. Die spezifische Reihenfolge lautet: zuerst wird das 32×32 Icon im PNG-Format deklariert, dann das apple-touch-icon und zuletzt das Favicon im ICO-Format.

Alle link-Tags benötigen ein korrektes rel-Attribut und ein size-Attribut. PNG-Icons erfordern das sizes-Attribut zur Kennzeichnung der entsprechenden Größe. Das apple-touch-icon hat standardmäßig die Größe 180×180, sodass eine zusätzliche Größenangabe entfallen kann. Die Manifest-Datei benötigt das rel="manifest" Attribut, das auf den entsprechenden Dateipfad verweist.

Bei Verwendung des App Router in Next.js 13+ muss favicon.ico auf der Stammebene des app-Verzeichnisses abgelegt werden, und Next.js handhabt die Routenausgabe automatisch. Mehrgröße-PNGs, das apple-touch-icon und die Manifest-Datei können im app/public-Verzeichnis abgelegt und mit einem absoluten Stammpfad referenziert werden. Bei Verwendung des Pages Router können alle Dateien direkt im public-Stammverzeichnis abgelegt werden.

Bei der Bereitstellung eines Favicons für ein benutzerdefiniertes WordPress-Theme können alle Favicon-Dateien im assets-Unterordner des Theme-Verzeichnisses abgelegt oder direkt im Website-Stammverzeichnis hochgeladen werden, anschließend werden die entsprechenden link-Tag-Deklarationen über die functions.php-Datei des Themes hinzugefügt. Einige WordPress-Versionen unterstützen das Hochladen von Favicons über das Menü Darstellung → Anpassen im Admin-Backend, und das System generiert die Deklarationen und Pfade automatisch.

Browser wenden eine langfristige starke Zwischenspeicherung für Website-Favicons an, bei den meisten Desktop-Browsern beträgt die Cache-Dauer mehr als 7 Tage. Nach der Änderung des Favicons führt ein einfaches Aktualisieren der Seite nicht dazu, dass der Browser die neue Datei erneut anfordert, wodurch das alte Icon weiterhin angezeigt wird.

Die zuverlässigste Aktualisierungsmethode besteht darin, der Favicon-Ressourcen-URL einen Versionsabfrageparameter hinzuzufügen. Zum Beispiel ändern Sie href="/favicon.ico" zu href="/favicon.ico?v=2". Nach der Änderung des Parameters behandelt der Browser die Ressource als neu und fordert direkt die aktuelle Datei an, wobei der ursprüngliche Cache umgangen wird. Alternativ kann der Browser-Cache gelöscht und die Seite erneut aufgerufen werden, aber diese Methode ist nur für das lokale Debugging durch Entwickler geeignet und kann den Cache von Endbenutzern nicht beeinflussen.

Nach der Bereitstellung muss der Icon-Anzeigestatus in mehreren Szenarien überprüft werden, um die Anpassungswirkung nacheinander zu bestätigen. Zuerst wird die Icon-Anzeige in der Desktop-Browser-Registerkarte überprüft und bestätigt, ob die Größen 16×16 und 32×32 klar sind. Zweitens wird die Icon-Anzeige in der Browser-Lesezeichenleiste überprüft und bestätigt, dass die Größenanpassung korrekt ist.

Auf mobilen Geräten müssen zwei Szenarien überprüft werden: die Icon-Anzeige nach dem Hinzufügen der Website zum Startbildschirm in iOS Safari sowie die Icon-Anzeige nach dem Hinzufügen eines Android-PWA zum Startbildschirm. Abschließend wird der Quellcode der Website überprüft, um zu bestätigen, dass alle link-Tag-Pfade korrekt sind und keine 404-Fehler durch falsche relative Pfade entstehen. Mit dem Netzwerkpanel in den Browser-Entwicklertools kann bestätigt werden, dass alle Icon-Dateien den Statuscode 200 zurückgeben.