WordPress Default favicon PNG SVG

Ab 4.3 besteht die Möglichkeit ohne administrative Kenntnisse das Website Icon (favicon) unter Administration > Customizer > Website-Information anzupassen. Website-Icons sollten quadratisch und mindestens 512 × 512 Pixel groß sein. Die Informationen unter Creating a Favicon – WordPress.org Forums sind nicht umfassend genug, da alle modernen Browser bereits PNG und SVG unterstützen.

Dabei muss eine Konfiguration für jede Size nicht angegeben werden. Es ist schlicht ausreichend folgende Dateien im Root-Verzeichnis bereitzustellen:

  • apple-touch-icon.png
  • favicon.png
  • favicon.svg
  • manifest.json

Für eine optimale User Experience sollten die Bilddateien folgende Attribute aufweisen:

apple-touch-icon.png

  • Die Datei ist 180×180 Pixel groß
  • Der angegebene Pfad zur Datei ist gültig
  • Der Hintergrund der Datei ist nicht transparent

favicon.png

  • Die Datei ist 512×512 Pixel groß
  • Der angegebene Pfad zur Datei ist gültig
  • Der Hintergrund der Datei sollte transparent sein

favicon.svg

  • Die Datei sollte mit 300 DPI gerastert sein
  • Text sollte als schriftunabhängige Kurven exportiert werden
  • Der angegebene Pfad zur Datei ist gültig
  • Der Hintergrund der Datei sollte transparent sein

Für WordPress ist die effektivste Methode in der Datei functions.php folgende Konfiguration zu verwenden:

Die function add_favicon() stellt das favicon in admin_head, login_head und wp_head bereit.

Die function replace_favicon() ersetzt das standardmäßige favicon do_faviconico | Hook | WordPress Developer Resources von WordPress. Dieser Fall tritt ein, sobald eine Datei (webp, png, jpg, pdf, etc.) in einem eigenen Fenster bzw. Tab geöffnet wird.

Für die Datei manifest.json bei WordPress ist folgende Konfiguration die effektivste:

Die Parameter für die Datei manifest.json werden bei Web app manifests | MDN (mozilla.org) und Web Application Manifest (w3c.github.io) beschrieben.

Mit den DevTools kann unter anderem die Ladezeit kontrolliert werden.
Photo by sea waves crashing on shore during daytime photo – Free Art on Unsplash, Icon by WordPress Icon – Brands | Font Awesome v6 Beta

Neueste Beiträge

Neueste Kommentare

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.