So fügen Sie 2025 ein WordPress-Favicon hinzu (3 einfache Wege)

Sind Sie bereit, alles zu lernen, was Sie jemals über Ihr WordPress-Favicon wissen möchten?

Falls Sie nicht vertraut sind, ist das Favicon Ihrer Website dieses kleine Symbol, das auf dem Tab Ihres Webbrowsers erscheint. Zum Beispiel sieht unser Favicon bei HeroThemes so aus:

Sie werden auch Leute sehen, die Favicons als "Website-Symbol" bezeichnen. Keine Sorge – es ist dasselbe.

In diesem Beitrag lernen Sie:

• Warum Sie sich um 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 Sie ein Favicon mit drei verschiedenen Methoden zu WordPress hinzufügen

Warum Sie sich um Ihr WordPress-Favicon kümmern sollten

Ich weiß, ich weiß. Ein kleines Bild, das nur im Browser-Tab erscheint, wird Ihr Geschäft wahrscheinlich nicht machen oder brechen. Aber es gibt zwei Gründe, warum Sie sich Zeit nehmen sollten, 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 Tabs ziehen zum Beispiel Ihre Aufmerksamkeit auf dem folgenden Screenshot auf sich?

Es sind HeroThemes und Twitter, richtig?

Das ist wichtig, weil die Leute es lieben, mehrere Tabs geöffnet zu haben (nein – Sie sind nicht der Einzige, der Tabs hortet!). Schon 2009 hatten die Leute durchschnittlich über 3 Tabs, bei jungen Leuten mehr. Und obwohl ich keine aktuelleren Daten finden kann, wette ich, dass der Durchschnitt gestiegen und nicht gesunken ist!

Abgesehen davon, dass Ihre Website in Browsern gebrandet wird und sie hervorsticht, hilft Ihr Favicon auch mobilen Nutzern. Wenn ein Nutzer Ihre Website jemals auf seinem Startbildschirm speichert, wird Ihr Favicon als Symbol auf vielen Geräten angezeigt.

Wenn man bedenkt, wie einfach es ist, ein WordPress-Favicon hinzuzufügen, sind diese Vorteile definitiv ein paar Minuten Ihrer Zeit wert.

So erstellen Sie ein Favicon-Bild in der richtigen Größe und im richtigen Format

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

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

Mit der Vielfalt an Geräten ist dies komplizierter geworden, als es einmal war. Aber um dieser Komplexität zu begegnen, 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, benötigen Sie also Folgendes:

• Ein quadratisches Bild. Die optimale WordPress-Favicon-Größe beträgt 512×512 Pixel, obwohl etwas Kleineres wie 260×260 Pixel immer noch akzeptabel ist. Alle Methoden, die ich Ihnen zeigen werde, passen dies bei Bedarf an.
• Ein PNG-Bild, das Ihre beste Wahl für das moderne Web ist.

Um Ihr Bild tatsächlich 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 generieren.

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

So fügen Sie ein Favicon zu WordPress hinzu (3 Methoden)

Sobald Sie Ihre Bilddatei haben, können Sie dieses Favicon zu Ihrer WordPress-Website hinzufügen.

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

Um Ihnen bei der Auswahl der richtigen Option für Ihre Website zu helfen, hier ist eine kurze Übersicht:

• Favicon mit Kernfunktionalität von WordPress hinzufügen – das ist super einfach und ermöglicht es Ihnen, Ihr Favicon über den WordPress Customizer hinzuzufügen. Der einzige Nachteil ist, dass keine Favicon-Formate für alle Geräte hinzugefügt werden. Für die meisten Websites ist das 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 das Plugin aktiv bleiben muss, was einigen Leuten vielleicht nicht gefällt.
• RealFaviconGenerator manuelle Methode – anstatt das Plugin zu verwenden, können Sie die Website von RealFaviconGenerator nutzen und den Code manuell hinzufügen. Diese Methode macht es überflüssig, ein Plugin aktiv zu halten, wird aber etwas komplizierter, da Sie einen Code-Schnipsel in den Header Ihres Themes einfügen müssen.

Wenn Sie Anfänger sind, empfehle ich, bei einer der ersten beiden Methoden zu bleiben. Fortgeschrittene Benutzer bevorzugen jedoch möglicherweise die dritte Methode.

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

Diese ist wirklich einfach, da sie eine Kernfunktion von WordPress nutzt.

Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Darstellung → Anpassen, um auf den WordPress Customizer zuzugreifen:

Sobald Sie sich im WordPress Customizer befinden, klicken Sie auf die Option Website-Identität:

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

Dies öffnet die normale WordPress-Mediathek, in der Sie Ihr Bild wie gewohnt hochladen können.

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

Von dort aus gibt Ihnen WordPress die Möglichkeit, Ihr Favicon-Bild zuzuschneiden, sowie Live-Vorschauen Ihres Bildes als Browser und App.

Passen Sie den Zuschnitt richtig an und klicken Sie dann auf Bild zuschneiden:

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

So verwenden Sie ein WordPress-Favicon-Plugin (deckt mehr Geräte ab)

Jetzt zeige ich Ihnen, wie Sie ein WordPress-Favicon-Plugin verwenden, um denselben Effekt zu erzielen.

Nochmals – der Unterschied zwischen dieser Methode und der vorherigen besteht darin, dass das Plugin optimierte Favicons für mehr Geräte hinzufügt. Es bietet Ihnen auch eine Benutzeroberfläche, mit der Sie anpassen können, wie Ihr Favicon für verschiedene Geräte aussieht.

Sie können benutzerdefinierte Favicons für Folgendes erstellen:

• iOS
• Android
• Windows Phone
• usw.

Das brauchen Sie nicht unbedingt – es geht eher darum, Randfälle abzudecken.

Um diese Methode zu befolgen, müssen Sie das kostenlose Favicon by RealFavicongenerator Plugin installieren.

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

Klicken Sie dann auf Favicon generieren:

Danach bringt Sie das Plugin zu einer externen Website, auf der Sie anpassen können, wie Ihr Favicon für verschiedene Geräte aussieht.

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

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

Das war's! Sie sind fertig. Stellen Sie einfach sicher, dass das Plugin aktiviert bleibt – andernfalls verschwinden Ihre Favicons.

So fügen Sie manuell ein Favicon zu WordPress hinzu, indem Sie dasselbe RealFaviconGenerator-Tool verwenden

Wiederum müssen Sie bei der oben genannten Plugin-Methode das Plugin aktiviert lassen, um Ihre Favicons weiterhin nutzen zu können.

Wenn Ihnen das ein Problem bereitet, können Sie dasselbe Tool auch verwenden, um alles manuell zu erledigen.

Das Endergebnis ist genau dasselbe, Sie müssen nur die Bilder manuell per FTP hochladen und etwas Code in den <head>-Bereich Ihrer Website einfügen.

Ich werde diesen Teil in Schritte unterteilen, da er etwas komplizierter ist...

Schritt 1: Erstellen Sie Ihr Favicon-Paket

Gehen Sie dazu auf die Website von RealFaviconGenerator und klicken Sie auf Wählen Sie Ihr Favicon-Bild, um Ihr Favicon-Bild hochzuladen:

Sobald Sie Ihr Bild hochgeladen haben, sehen Sie dieselbe Benutzeroberfläche wie im Plugin und können Ihr Favicon für verschiedene Geräte anpassen.

Wie beim Plugin scrollen Sie nach unten und klicken Sie auf die Schaltfläche Generieren Sie Ihre Favicons und den HTML-Code, wenn Sie mit Ihren Anpassungen fertig sind:

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

Klicken Sie auf dem nächsten Bildschirm auf die Schaltfläche, um Ihr Favicon-Paket herunterzuladen:

Anschließend müssen Sie dieses Paket entpacken und es mit FTP in den Stammordner Ihrer Website hochladen (wenn Sie nicht sicher sind, was FTP ist, empfehle ich Ihnen, sich an die Plugin-Methode aus dem vorherigen Abschnitt zu halten).

Stellen Sie sicher, dass Sie alle Dateien in den Stammordner legen – sonst funktioniert es nicht.

Schritt 3: Fügen Sie den Code-Schnipsel in den <head>-Bereich Ihres Themes ein

Um die Sache abzuschließen, müssen Sie den Code-Schnipsel von RealFaviconGenerator in den <head>-Bereich Ihres WordPress-Themes einfügen:

Es gibt ein paar Möglichkeiten, dies zu tun.

Erstens können Sie das kostenlose Plugin Insert Headers and Footers installieren und es dort einfügen:

Oder Sie können den folgenden Code-Schnipsel zur Datei functions.php Ihres Child-Themes hinzufügen (Sie müssen ein Child-Theme verwenden):

/* Fügt den Favicon-Code-Schnipsel von RealFaviconGenerator hinzu */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
ERSETZEN SIE DIESE TEXTZEILE MIT FAVICON-CODE
<?php
};

Jede Methode ist in Ordnung!

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

Fügen Sie noch heute Ihr WordPress-Favicon hinzu

Es dauert nur wenige Minuten, Ihr Favicon hinzuzufügen und Ihren Besuchern ein stärker markenorientiertes Erlebnis zu bieten.

Und das ist das Tolle daran:

Sobald Sie Ihrer WordPress-Website ein Favicon 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 helfen Ihnen gerne weiter!