3 einfache Möglichkeiten zum Hinzufügen eines WordPress-Favicons im Jahr 2024 (anfängerfreundliche Anleitung)

Sind Sie bereit, alles über Ihr WordPress-Favicon zu erfahren?

Falls Sie damit nicht vertraut sind: Das Favicon Ihrer Website ist das kleine Symbol, das auf der Registerkarte Ihres Webbrowsers erscheint. Unser Favicon sieht zum Beispiel so aus HeroThemes:

Manche Leute bezeichnen Favicons auch als "Website-Symbole". Keine Sorge - das ist dasselbe.

In diesem Beitrag erfährst du es:

• Warum Sie sich um so etwas Kleines wie Ihr WordPress-Favicon kümmern sollten
• Wie Sie ein Favicon für Ihre WordPress-Website erstellen (und welche Größe und welches Format Sie verwenden sollten)
• Wie man ein Favicon in WordPress mit drei verschiedenen Methoden hinzufügt

Warum Sie sich um Ihr WordPress Favicon kümmern sollten

Ich weiß, ich weiß. Ein kleines Bild, das nur in der Browser-Registerkarte erscheint, ist wahrscheinlich nicht entscheidend für Ihr Geschäft. Aber es gibt zwei Gründe, warum Sie sich etwas Zeit nehmen sollten, um ein Favicon für WordPress zu erstellen.

Erstens hilft die Verwendung eines Favicons bei der Markenbildung und hebt Ihre Website in den Browsern Ihrer Besucher hervor. Welche Registerkarten fallen Ihnen zum Beispiel auf dem folgenden Screenshot auf?

Es ist HeroThemes und Twitter, richtig?

Das ist wichtig, denn die Menschen lieben es, mehrere Tabs zu öffnen(nein - Sie sind nicht der Einzige, der Tabs hortet!). Schon 2009 hatten die Menschen im Durchschnitt mehr als 3 Tabs geöffnet, unter jungen Menschen sogar noch mehr. Ich kann zwar keine neueren Daten finden, aber ich wette, dass der Durchschnitt nicht gesunken, sondern gestiegen ist!

Ihr Favicon dient nicht nur dazu, Ihre Website in Browsern zu kennzeichnen und hervorzuheben, sondern ist auch für mobile Nutzer hilfreich. Wenn ein Nutzer Ihre Website auf seinem Startbildschirm speichert, wird Ihr Favicon auf vielen Geräten als Symbol angezeigt.

Wenn man bedenkt, wie einfach es ist, ein WordPress-Favicon hinzuzufügen, sind diese Vorteile es auf jeden Fall wert, sich ein paar Minuten Zeit zu nehmen.

So erstellen Sie ein Favicon-Bild mit der richtigen Größe und dem richtigen Format

Bevor Sie die Schritt-für-Schritt-Anleitung in den nächsten Abschnitten zum Hinzufügen eines Favicons zu WordPress befolgen können, müssen Sie...das Bild, das Sie für Ihr Favicon verwenden möchten, tatsächlich haben!

Und das bedeutet, dass Sie die richtigen Bildabmessungen und das richtige Format für Ihr Favicon kennen müssen.

Mit der Vielzahl der Geräte ist dies komplizierter geworden, als es früher war. Aber um diese Komplexität zu bewältigen, gibt es auch einige Tools, die ein Starter-Favicon nehmen und es automatisch für alle verschiedenen Geräte formatieren.

Um Ihr Favicon zu erstellen, brauchen Sie nur das Folgende:

• Ein quadratisches Bild. Die optimale Größe eines WordPress-Favicons ist 512×512 px, aber auch etwas kleineres wie 260×260 px ist akzeptabel. Bei allen Methoden, die ich Ihnen zeige, wird die Größe nach Bedarf angepasst.
• Ein png-Bild, das für das moderne Web die beste Wahl ist.

Um Ihr Bild zu erstellen, können Sie ein Tool wie Adobe Photoshop oder GIMP verwenden. Oder Sie können auch etwas wie Favicon.io verwenden, um ein Favicon-Bild aus Text oder einem Emoji zu erstellen.

Wenn Sie ein hochauflösendes Logo herumliegen haben, ist es am einfachsten, eine quadratische Version Ihres Logos zu nehmen(das ist das, was wir bei HeroThemes verwenden).

Wie man ein Favicon zu WordPress hinzufügt (3 Methoden)

Sobald Sie Ihre Bilddatei haben, können Sie das Favicon in Ihre WordPress-Website einfügen.

Im Folgenden zeige ich Ihnen drei verschiedene Möglichkeiten, wie Sie Ihr Favicon zu WordPress hinzufügen können. Jede Methode ist jedoch ein wenig anders.

Um Ihnen bei der Auswahl der richtigen Lösung für Ihre Website zu helfen, finden Sie hier eine kurze Übersicht:

• Favicon mit der WordPress-Kernfunktionalität hinzufügen - das ist super einfach und lässt Sie Ihr Favicon über den WordPress Customizer hinzufügen. Der einzige Nachteil ist, dass nicht alle Favicon-Formate für alle Geräte hinzugefügt werden können. Für die meisten Websites ist dies jedoch völlig in Ordnung.
• RealFaviconGenerator WordPress Plugin - dies macht es super einfach, ein Favicon für alle Geräte hinzuzufügen. Der einzige potenzielle Nachteil ist, dass Sie das Plugin aktiv halten müssen, was einigen Leuten nicht gefallen könnte.
• Manuelle RealFaviconGenerator-Methode - anstatt das Plugin zu verwenden, können Sie die Website von RealFaviconGenerator nutzen und den Code manuell hinzufügen. Bei dieser Methode müssen Sie kein Plugin aktiv halten, aber es ist etwas komplizierter, weil Sie einen Codeschnipsel in die Kopfzeile Ihres Themes einfügen müssen.

Anfängern empfehle ich, sich an eine der ersten beiden Methoden zu halten. Fortgeschrittene Benutzer sollten jedoch die dritte Methode bevorzugen.

So fügen Sie ein Favicon zu WordPress mit der Kernfunktionalität hinzu

Diese Funktion ist wirklich einfach, da sie eine WordPress-Kernfunktion verwendet.

Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Erscheinungsbild → Anpassen, um den WordPress Customizer aufzurufen:

Sobald Sie sich im WordPress Customizer befinden, klicken Sie auf die Option Site Identity :

Suchen Sie dann den Abschnitt Site Icon und klicken Sie auf Bild auswählen, um Ihr Favicon-Bild hochzuladen:

Daraufhin wird die reguläre WordPress-Mediathek geöffnet, in die Sie Ihr Bild wie gewohnt hochladen können.

Sobald Sie Ihr Bild hochgeladen haben, klicken Sie auf die Schaltfläche Auswählen:

Von dort aus bietet WordPress Ihnen die Möglichkeit, Ihr Favicon-Bild zuzuschneiden, sowie eine Live-Vorschau Ihres Bildes sowohl im Browser als auch in einer App.

Stellen Sie den richtigen Ausschnitt ein und klicken Sie dann auf Bild zuschneiden:

Und schon sind Sie fertig! Stellen Sie sicher, dass Sie auf die Option "Veröffentlichen" oben im WordPress Customizer klicken und Ihr Favicon sollte live sein.

Wie man ein WordPress Favicon Plugin verwendet (deckt mehr Geräte ab)

Jetzt zeige ich Ihnen, wie Sie mit einem WordPress-Favicon-Plugin den gleichen Effekt erzielen können.

Nochmals - der Unterschied zwischen dieser Methode und der vorherigen ist, dass das Plugin optimierte Favicons für mehr Geräte hinzufügt. Es gibt Ihnen auch eine Schnittstelle, mit der Sie anpassen können, wie Ihr Favicon für verschiedene Geräte aussieht.

Sie können benutzerdefinierte Favicons für erstellen:

• iOS
• Android
• Windows-Phone
• usw.

Das ist nicht unbedingt notwendig - es geht eher darum, Randfälle abzudecken.

Für diese Methode müssen Sie das kostenlose Plugin Favicon by RealFaviconGenerator installieren.

Sobald Sie das Plugin aktiviert haben, gehen Sie zu Erscheinungsbild → Favicon. Verwenden Sie die Schaltfläche Aus der Medienbibliothek auswählen, um Ihr Favicon aus der WordPress-Medienbibliothek hochzuladen oder auszuwählen.

Klicken Sie dann auf Favicon generieren:

Danach leitet Sie das Plugin auf eine externe Website weiter, auf der Sie das Aussehen Ihres Favicons für verschiedene Geräte anpassen können.

Sobald Sie diese Änderungen vorgenommen haben, scrollen Sie nach unten und klicken Sie auf die Schaltfläche Favicons und HTML-Code generieren :

Sobald Sie darauf klicken, werden Sie zu Ihrem WordPress-Dashboard zurückgebracht und sollten eine Erfolgsmeldung sowie eine Vorschau Ihres Favicons auf verschiedenen Geräten sehen:

Das war's! Sie sind fertig. Achten Sie nur darauf, dass das Plugin aktiv bleibt - sonst verschwinden Ihre Favicons.

Wie man ein Favicon zu WordPress manuell mit dem gleichen Tool RealFaviconGenerator hinzufügen

Auch bei der obigen Plugin-Methode müssen Sie das Plugin aktiv lassen, um Ihre Favicons weiter verwenden zu können.

Wenn das für Sie ein Problem ist, können Sie das gleiche Tool auch verwenden, um alles manuell zu erledigen.

The end result is exactly the same, you’ll just need to manually upload the images via FTP and add some code to your site’s <head> section.

Ich werde diese Aufgabe in mehrere Schritte unterteilen, weil sie etwas komplizierter ist...

Schritt 1: Erzeugen Sie Ihr Favicon-Paket

Um loszulegen, gehen Sie auf die RealFaviconGenerator-Website und klicken Sie auf Wählen Sie Ihr Favicon-Bild, um Ihr Favicon-Bild hochzuladen:

Sobald Sie Ihr Bild hochgeladen haben, sehen Sie die gleiche Schnittstelle wie beim Plugin, und Sie können Ihr Favicon für verschiedene Geräte anpassen.

Wie beim Plugin scrollen Sie nach unten und klicken Sie auf die Schaltfläche Favicons und HTML-Code generieren, wenn Sie Ihre Änderungen vorgenommen haben:

Schritt 2: Laden Sie Ihr Favicon-Paket auf Ihre Website hoch

Auf dem nächsten Bildschirm klicken Sie auf die Schaltfläche zum Herunterladen Ihres Favicon-Pakets:

Anschließend müssen Sie dieses Paket entpacken und per FTP in den Stammordner Ihrer Website hochladen(wenn Sie nicht wissen, was FTP ist, empfehle ich Ihnen, bei der Plugin-Methode aus dem vorherigen Abschnitt zu bleiben).

Vergewissern Sie sich, dass Sie alle Dateien in den Stammordner legen - sonst funktioniert das nicht.

Step 3: Add Code Snippet To <head> Of Your Theme

Um die Sache abzuschließen, müssen Sie den Codeschnipsel von RealFaviconGenerator in die Datei <head> Abschnitt Ihres WordPress-Themes:

Es gibt mehrere Möglichkeiten, dies zu tun.

Zunächst können Sie das kostenlose Plugin "Insert Headers and Footers " installieren und dort einfügen:

Oder Sie können den folgenden Code-Schnipsel in die Datei functions.php in Ihrem Child-Theme einfügen(Sie müssen ein Child-Theme verwenden):

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

Beide Methoden sind in Ordnung!

Wenn Sie das getan haben, sind Sie fertig und Ihr Favicon sollte jetzt funktionieren.

Fügen Sie Ihr WordPress Favicon noch heute hinzu

Es dauert nur ein paar Minuten, um Ihr Favicon hinzuzufügen und Ihren Besuchern ein besseres Markenerlebnis zu bieten.

Und das ist das Tolle daran:

Sobald Sie ein Favicon zu Ihrer WordPress-Website hinzugefügt haben, müssen Sie nie wieder darüber nachdenken!

Haben Sie weitere Fragen zum Hinzufügen eines WordPress-Favicons? Lassen Sie es uns in den Kommentaren wissen und wir werden Ihnen helfen!