Favicons sind am häufigsten bekannt als das kleine Symbol, das neben dem Namen einer Website in einem Browser-Tab angezeigt wird. Und während sie dort entstanden sind, werden Favicons auch an anderen Orten wie Browser-Lesezeichen, iOS-Hauptbildschirmschaltflächen und mehr verwendet. Unten siehst du ein Beispiel für eine Seite mit einem Favicon vs. eine Seite ohne Favicon:

Ein Beispiel für ein WordPress-Favicon

Ein Beispiel für ein WordPress-Favicon

In diesem Artikel geben wir dir drei verschiedene Möglichkeiten, ein WordPress-Favicon zu deiner Website hinzuzufügen. Wenn du bereits weißt, welche Methode du bevorzugst, kannst du über die folgenden Links direkt zu einem bestimmten Abschnitt springen:

Wie man ein WordPress Favicon zur Seite hinzufügt über WordPress Customizer

Ab WordPress 4.3 verfügen alle WordPress-Seiten über ein Seitensymbol, das es einfach macht, ein Bild hochzuladen und zu beschneiden, um es als Favicon zu verwenden.

Für die meisten Benutzer ist dies die einfachste Methode, um WordPress ein Favicon-Symbol hinzuzufügen. Alles, was du benötigst, ist ein Bild mit einer Auflösung von mindestens 512×512 Pixel. WordPress übernimmt den Rest des Prozesses.

Um zu beginnen, gehe zu Appearance → Customizer in deinem WordPress Dashboard:

wie man auf WordPress Customizer zugreift

wie man auf WordPress Customizer zugreift

Navigiere von dort aus zur Registerkarte Site Identity:

So finden Sie die Registerkarte Site Identity

So finden Sie die Registerkarte Site Identity

Schaue dann unten den Abschnitt Site Icon an und klicke auf die Schaltfläche Select Image:

Auswahl eines Bildes für dein Favicon

Auswahl eines Bildes für dein Favicon

Die normale WordPress-Medienbibliotheksschnittstelle wird geöffnet. Du kannst entweder ein bestehendes Bild in deiner WordPress-Mediathek auswählen oder ein neues hochladen. Denke daran – WordPress empfiehlt die Verwendung eines Bildes, das mindestens 512x512px groß ist.

Sobald du ein Bild hast, das dir gefällt, klicke auf das Bild und wähle Auswählen in der rechten unteren Ecke:

Auswahl des Favicon-Bildes

Auswahl des Favicon-Bildes

Wenn dein Bild noch kein perfektes Quadrat ist (z.B. 512×512 px), gibt dir WordPress die Möglichkeit, dein Bild zu beschneiden. Verwende das Feld, um den Teil des Bildes hervorzuheben, den du für dein Symbol verwenden möchtest.

Du kannst eine Vorschau sehen, wie dein zugeschnittenes Bild auf der rechten Seite der Benutzeroberfläche aussehen wird.

Wenn du mit dem Aussehen zufrieden bist, klicke auf Bild zuschneiden, um deine Wahl zu treffen:

Zuschneiden des Favicon-Bildes

Zuschneiden des Favicon-Bildes

Und das ist es! Alles, was du tun musst, ist auf Speichern & Veröffentlichen zu klicken, um dein Favicon „zum Leben zu erwecken“.

Wenn du dein Favicon in Zukunft ändern möchtest, kannst du zu dieser Oberfläche zurückkehren und auf Bild ändern klicken:

So änderst du das Favicon-Bild zu einem späteren Zeitpunkt

So änderst du das Favicon-Bild zu einem späteren Zeitpunkt

Wie man WordPress Favicon zur Website mit einem Plugin hinzufügt

Wenn du eine Plugin-Lösung der WordPress-Seiten-Symbol-Funktionalität vorziehen möchtest, kannst du ein beliebtes kostenloses Plugin namens Favicons von RealFaviconGenerator verwenden. Das Plugin ist genauso einfach zu bedienen wie der native WordPress Customizer, bietet aber zusätzliche hilfreiche Kompatibilitätsoptionen für verschiedene Geräte und App-Icons.

Um es zu verwenden, installiere und aktiviere das kostenlose Plugin über dein WordPress Dashboard:

So installierst du das RealFaviconGenerator-Plugin

So installierst du das RealFaviconGenerator-Plugin

Sobald du das Plugin aktiviert hast, gehe zu Appearance Favicon, um dein Favicon-Set zu erstellen.

Alles, was du tun musst, ist, ein Bild auszuwählen oder hochzuladen, das mindestens 70×70 px (idealerweise 260×260 px) beträgt:

Wie man Favicon zu WordPress hinzufügt

Wie man Favicon zu WordPress hinzufügt

Sobald du dein Bild ausgewählt hast, klicke auf Favicon generieren. Nach dem Anklicken dieses Buttons wirst du weitergeleitet. Das Plugin wird außerhalb deiner WordPress-Seite auf der Webseite von RealFaviconGenerator angezeigt.

Scrolle auf der Webseite von RealFaviconGenerator nach unten und klicke auf Favicons und HTML-Code generieren:

Generiere deine Favicons

Generiere deine Favicons

Nach kurzer Zeit, während das Tool funktioniert, sendet Real Favicon Generator dich zurück zu deinem WordPress Dashboard. Dein Favicon ist nun eingerichtet und einsatzbereit. Du kannst in der Benutzeroberfläche des Plugins Vorschauen anzeigen, wie es auf verschiedenen Geräten aussieht:

Sehe dir eine Live-Vorschau deines Favicons an.

Sehe dir eine Live-Vorschau deines Favicons an.

Wie man WordPress Favicon manuell zur Website hinzufügt

Wenn du es vorziehst, Dinge manuell zu erledigen, ist es auch möglich, manuell ein Favicon zu deiner WordPress-Seite über FTP und einige kleinere Codeausschnitte hinzuzufügen. Wenn du mit dieser Methode arbeitest, musst du auch dein eigenes Favicon-Image erstellen, da du keine WordPress-Hilfe mehr hast.

So erstellst du ein Favicon-Bild

In der Vergangenheit musstest du für dein Favicon eine bestimmte ICO-Datei verwenden. Aber heutzutage unterstützen alle modernen Browser die Verwendung von ICO-, PNG– und GIF-Dateien für dein Favicon. JPEG wird weitgehend unterstützt (gelesen: JPG vs. JPEG), aber nicht in allen Internet Explorer-Versionen, was es weniger ideal für die Verwendung als Favicon macht.

Wenn du mit Photoshop vertraut bist, kannst du Photoshop verwenden, um ein Favicon manuell zu erstellen. In diesem Zusammenhang ist es oft einfacher, ein einfaches Cloud-basiertes Tool zu verwenden, um dein Favicon-Icon-Set aus einem vorhandenen Bild zu erstellen.

Real Favicon Generator (die Cloud-basierte Version des im vorherigen Abschnitt verwendeten Plugins) ist eine gute Option, weil:

  • – Es erstellt sowohl App-Icons als auch Favicons
  • -Es gibt dir Favicon-Icons als PNG- und ICO-Format.
  • -Du kannst dein Favicon anpassen, nachdem du dein Bild hochgeladen hast.
  • -Alles, was du tun musst, ist den Code einzufügen, den das Plugin dir gibt.

Andere gute Favicon-Generatoren sind:

  • Favicon.cc – ermöglicht es dir, ein Favicon von Grund auf neu zu erstellen und ein bestehendes Bild hochzuladen.
  • Favicon-Generator – funktioniert ähnlich wie bei Real Favicon Generator

Um Real Favicon Generator zu verwenden, lad zunächst das Bild hoch, das du für dein Favicon verwenden möchtest:

Wie man ein Favicon-Quellbild hochlädt

Wie man ein Favicon-Quellbild hochlädt

Auf dem nächsten Bildschirm kannst du (falls gewünscht) spezifische Details zu deinem Favicon-Set konfigurieren.

Wenn du fertig bist oder keine Änderungen vornehmen möchtest, scrolle einfach nach unten und klicke auf Favicons und HTML-Code generieren:

Generiere deine Favicons

Generiere deine Favicons

So installierst du dein WordPress Favicon

Klicke auf der nächsten Seite auf die Schaltfläche Favicon-Paket, um deine Favicon-Bilder herunterzuladen. Achte auch darauf, diese Seite offen zu lassen, da du den Code benötigst, um deine Favicons hinzuzufügen:

Favicon-Paket herunterladen

Favicon-Paket herunterladen

Verbinde dich per FTP mit deiner WordPress-Seite und lade den Inhalt deines Favicon-Pakets (favicons.zip) in den Stammordner deiner WordPress-Seite hoch:

Favicon per FTP hochladen

Favicon per FTP hochladen

Die Dateien sollten sich im gleichen Ordner wie die Ordner wp-admin und wp-content befinden.

Dann nehme den Code, den Real Favicon Generator dir zur Verfügung gestellt hat:

  • Verwende ein Plugin wie Insert Header und Footer, um es zum Header deines Templates hinzu.
  • Füge es direkt in den <head> Abschnitt deines Templates ein, indem du die header.php-Datei deines Templates bearbeitest.

Die Verwendung des Plugins „Insert Headers and Footers“ ist optimal, da es sicherstellt, dass du dein Favicon nicht verlierst, wenn du WordPress-Themes änderst.

Installiere und aktiviere dazu die Kopf- und Fußzeilen. Gehe dann zu Einstellungen Kopf- und Fußzeilen einfügen und füge den Code in den Abschnitt Scripts in den Header ein:

Favicon-Code zum WordPress-Header hinzufügen

Favicon-Code zum WordPress-Header hinzufügen

Vergewissere dich, dass du deine Änderungen speicherst, und schon bist du fertig.

Tipp 1: Einzigartige WordPress MultiSite Favicons

Wenn du möchtest, dass jede Webseite in deinem Multisite-Netzwerk ein einzigartiges Favicon hat, ist der einfachste Weg, ein Favicon-Plugin wie das oben beschriebene zu verwenden. Du kannst auch das Heroic Favicon Generator Plugin verwenden, solange du eine kleine manuelle Anpassung an den Code machst.

Es ist zwar möglich, die Dateien deines Templates zu bearbeiten, um eindeutige Favicons für jeden Netzwerkstandort zu ermöglichen, aber der Prozess ist wesentlich komplizierter als die Verwendung eines Plugins.

Tipp 2: Verwende ein Content Delivery Network, um Favicon Images zu bedienen.

Da alle drei oben beschriebenen Methoden deine Favicon-Images auf deinem Server speichern, kannst du deine Webseite weiter optimieren, indem du ein Content Delivery Network (CDN) verwendest, das deine Bilder bereitstellt.

Durch die Installation von Cloudflare oder einem Dienst wie KeyCDN kannst du deinen Besuchern die Möglichkeit geben, dein Favicon von deinem CDN statt von deinem Server zu laden. Wenn du ein Plugin wie CDN Enabler verwendest, sollte es automatisch deine WordPress Favicon URL neu schreiben, um mit den oben genannten Methoden zu arbeiten.

10
Mal geteilt