Was ist ein WordPress Favicon und wie fügt man es hinzu? 4 schnelle Methoden

Ein Favicon ist ein kleines Bild, das in der Registerkarte des Webbrowsers angezeigt wird, wenn ein Benutzer auf Ihre WordPress-Website zugreift. Es hilft den Nutzern, Ihre Website schnell zu erkennen, wenn mehrere Tabs geöffnet sind, insbesondere wenn der Titel Ihrer Website nicht sichtbar ist.

In diesem Tutorial wird erklärt, was ein WordPress Favicon ist, wie wichtig es ist und wie man es erstellt. Wir werden auch verschiedene Möglichkeiten erkunden, wie Sie ein Favicon zu Ihrer Website hinzufügen können, damit Sie eines nach Ihren Vorlieben auswählen können.

Ein Favicon hilft Nutzern bei der Verwaltung mehrerer Registerkarten und erhöht die Sichtbarkeit Ihrer Website auf den Ergebnisseiten von Suchmaschinen (SERPs). Dieses Icon begleitet die URL Ihrer Website und ermöglicht es den Nutzern, die Webseite schnell zu identifizieren.

Dieses Bild wird auch auf den Startbildschirmen der Nutzer als App-Icon angezeigt, wenn sie Ihre Webseite auf ihrem Gerät als Lesezeichen speichern. Ein eindeutiges Favicon lässt Ihre Website nicht nur professioneller erscheinen, sondern hilft auch beim Aufbau des Brandings.

Wie man ein Favicon-Bild erstellt

Um ein WordPress Favicon zu erstellen, können Sie eine beliebige Grafikdesign-Software oder ein Online-Tool wie Real Favicon Generator nutzen. Ihre Wahl hängt von Ihrer Erfahrung mit visuellen Designkonzepten und Ihren Fähigkeiten ab, diese Tools zu bedienen.

Berücksichtigen Sie also Folgendes:

• Auflösung. Da Ihr Icon nur auf SERPs und Browser-Tabs erscheint, ist ein übermäßig hoch aufgelöstes Bild nicht unbedingt notwendig. Die ideale Größe eines WordPress-Favicons ist 512 x 512 Pixel.
• Seitenverhältnis. Das Favicon auf Ihrer WordPress-Seite muss in einem 1:1-Seitenverhältnis richtig angezeigt werden. Andernfalls könnte es abgeschnitten oder verzerrt werden, was das Aussehen der Webseite beeinträchtigt.
• Farbpalette. Wenn Sie einen transparenten Hintergrund verwenden, hebt sich Ihr Favicon besser ab, insbesondere wenn Sie weiße Elemente oder Icone verwenden. Denken Sie daran, die gleiche Palette wie Ihre Marke zu verwenden, um eine konsistente Website-Identität zu erhalten.
• Dateiformat. Das PNG-Format ist erforderlich, wenn die Favicon-Datei Ihrer WordPress-Website einen transparenten Hintergrund enthält. Andernfalls können Sie Erweiterungen wie ICO, JPEG oder GIF verwenden, die WordPress unterstützt.
• Anforderungen für Suchmaschinen. Ihr WordPress-Website-Icon muss den Google-Richtlinien für Favicons entsprechen, um in den SERPs korrekt angezeigt zu werden.

Die Schritte zur Erstellung von WordPress Favicons variieren stark, je nach Grafiksoftware und gewünschtem Bild. Wenn Sie eine einfachere Lösung wünschen, verwenden Sie den Hostinger KI Logo Maker, um das Bild kostenlos zu erstellen!

Methoden, um Favicons in WordPress hinzuzufügen

In diesem Abschnitt werden vier gängige Methoden zum Hinzufügen eines benutzerdefinierten Favicons zu Ihrer WordPress-Website vorgestellt. Da sie alle den gleichen Zweck erfüllen, wählen Sie einfach eine nach Ihren Vorlieben und Bedürfnissen.

1. Den Gutenberg-Block-Editor verwenden

Der einfachste Weg, ein Favicon zu Ihrer WordPress-Seite hinzuzufügen, ist die Verwendung des Gutenberg-Editors. Beachten Sie, dass diese Funktion nur für Block-Themes und WordPress 5.9 oder neuere Versionen verfügbar ist.

Und so geht’s:

1. Loggen Sie sich in Ihr WordPress Dashboard ein → Design → Anpassen.
2. Bewegen Sie den Mauszeiger über den Bereich, in dem Sie das Icon platzieren möchten und klicken Sie auf das Plus (+)-Icon. Sie können es überall platzieren, wir empfehlen jedoch eine der Ecken der Kopfzeile.
3. Suchen und wählen Sie den Block Seitenlogo.
4. Bewegen Sie den Mauszeiger über den Block und klicken Sie auf das Icon Hochladen.

5. Laden Sie Ihre Favicon-Datei hoch oder wählen Sie eine aus Ihrer WordPress-Medienbibliothek aus. Klicken Sie auf Auswählen, um zu bestätigen.

6. Klicken Sie auf das Favicon und navigieren Sie zum Abschnitt Blockeinstellungen in der rechten Seitenleiste. Wenn Sie die Option nicht sehen, klicken Sie auf die Schaltfläche Einstellungen oben rechts auf Ihrem Bildschirm.
7. Aktivieren Sie in der Seitenleiste die Funktion Als Website-Icon verwenden.

8. Klicken Sie oben rechts auf Speichern , um die Änderungen zu übernehmen.

Wenn Sie Ihre Website besuchen, sollten Sie das neue Favicon anstelle des Standard-WordPress-Logos sehen.

2. Über den WordPress Customizer zugreifen und konfigurieren

Benutzer des klassischen Themes können ein Favicon mit der WordPress-Funktion Customizer hinzufügen. Diese Methode ist nur möglich, wenn Sie WordPress 4.3 oder höher verwenden. So geht’s:

1. Gehen Sie in Ihrem WordPress-Dashboard zu Design→ Anpassen. Wenn Sie die Option nicht sehen können, fügen Sie wp-admin/customize.php zu Ihrer Website-URL hinzu, um sie manuell zu öffnen.
2. Navigieren Sie zur linken Seitenleiste → Website-Identität. Klicken Sie auf die Schaltfläche Website-Icon auswählen.

3. Laden Sie Ihr Bild hoch oder wählen Sie es aus der Mediathek. Bestätigen Sie mit Auswählen.
4. Passen Sie die Größe des Favicons an Ihre Bedürfnisse an und klicken Sie auf Bild zuschneiden. Um die Standardeinstellungen zu verwenden, wählen Sie Beschneiden überspringen.
5. Jetzt sollten Sie die Vorschau Ihres Website-Favicons unter dem Website-Icon-Abschnitt in der Seitenleiste sehen. Um die Änderungen zu speichern, klicken Sie auf Änderungen speichern.

3. Das RealFaviconGenerator-Plugin verwenden

Wenn Sie mehr Anpassungsmöglichkeiten und Vorschaubilder wünschen, verwenden Sie ein Plugin eines Drittanbieters, um ein Favicon in WordPress einzurichten. Es gibt mehrere Optionen, aber wir empfehlen Favicon by RealFaviconGenerator, da es die am häufigsten verwendete Option ist.

Nach der Installation und Aktivierung des Plugins folgen Sie diesen Schritten, um ein neues Favicon zu erstellen und hinzuzufügen:

1. Navigieren Sie in Ihrem WordPress-Administrations-Dashboard zu Design → Favicon.
2. Klicken Sie auf Aus der Mediathek auswählen und laden Sie ein neues Bild hoch oder wählen Sie ein vorhandenes Bild aus Ihrer WordPress-Bibliothek aus.

3. Klicken Sie auf Favicon generieren, und das Plugin leitet Sie auf eine separate Seite weiter.
4. Wenn Sie das Standardbild beibehalten möchten, wählen Sie die Option Das ursprüngliche Bild so verwenden, wie es ist. Andernfalls passen Sie Einstellungen wie die Hintergrundfarbe, den Radius und die Bildgröße an.

5. Scrollen Sie nach unten zu den Favicon-Generator-Optionen und klicken Sie auf Ihre Favicons und HTML-Code generieren, um zu bestätigen.

Das war’s! Sie werden zurück zum Favicon-Menü im WordPress Dashboard weitergeleitet. Klicken Sie auf die Schaltfläche Überprüfen Sie Ihr Favicon, um zu überprüfen, ob Ihr Website-Icon richtig funktioniert. Um das aktuelle Icon zu ersetzen, wiederholen Sie einfach die oben genannten Schritte.

Denken Sie daran, dass dieses Plugin aktiviert bleiben muss, um das Favicon anzuzeigen. Wenn Sie es deaktivieren oder deinstallieren, wird das Icon Ihrer Website nicht mehr angezeigt.

Aktualisieren Sie das Plugin regelmäßig, um Sicherheitsrisiken und Bugs zu vermeiden. Um diese Aufgabe zu vereinfachen, können Hostinger Managed WordPress Hosting-Nutzer die Auto-Update-Funktion im hPanel aktivieren.

4. Theme-Dateien manuell bearbeiten

Sie können ein Favicon hinzufügen, indem Sie das Bild manuell in den WordPress-Rootordner hochladen und Ihre Theme-Datei bearbeiten. Da diese Methode etwas komplexer sein kann, empfehlen wir sie für Entwickler oder Personen mit Programmierkenntnissen.

Bevor Sie dies tun, erstellen und aktivieren Sie ein Child-Theme, um sicherzustellen, dass Ihr Favicon-Code nach einem Update intakt bleibt. Führen Sie dann die folgenden Schritte aus:

1. Öffnen Sie die Real Favicon Generator-Website, klicken Sie auf Pick your Favicon image und laden Sie die Favicon-Datei von Ihrem Computer hoch.
2. Scrollen Sie zum Abschnitt Favicon Generator Options und klicken Sie auf die Registerkarte Path. Wählen Sie aus, wo Sie das Favicon-Bild ablegen möchten. Idealerweise sollten Sie das root-Verzeichnis wählen.

3. Klicken Sie auf Generate your Favicons and HTML code.
4. Sie werden auf die Seite mit der Installationsanleitung weitergeleitet. Klicken Sie auf die Schaltfläche Favicon package, um die Favicon-Dateien herunterzuladen.
5. Kopieren Sie das Codesnippet und bewahren Sie es sicher auf, zum Beispiel in einer TXT-Datei. Alternativ können Sie diese Registerkarte geöffnet lassen, da wir sie später benötigen.

Jetzt, da die Dateien und der Code fertig sind, fügen Sie sie zu Ihrer WordPress-Website hinzu. So geht’s:

1. Greifen Sie auf das public_html-Rootverzeichnis Ihrer WordPress-Website zu, indem Sie einen File Transfer Protocol (FTP)-Client wie FileZilla oder den Dateimanager Ihres Hosting-Providers verwenden.
2. Laden Sie das heruntergeladene Archiv hoch und entpacken Sie es in das Verzeichnis public_html. Denken Sie daran, dass public_html nur die Favicon-Dateien enthalten sollte, nicht den Ordner.
3. Geben Sie die folgende URL in Ihren Webbrowser ein, um zu bestätigen, dass WordPress Ihr Favicon lesen kann. Ersetzen Sie domain.tld mit Ihrem tatsächlichen Domainnamen:

domain.tld/favicon.ico

4. Öffnen Sie Ihr WordPress-Dashboard und navigieren Sie zu Werkzeuge → Theme File Editor.
5. Im Menü Theme-Dateien auf der rechten Seite wählen Sie header.php aus. Falls Ihr Theme diese Datei nicht enthält, bearbeiten Sie stattdessen die Datei functions.php.
6. Fügen Sie den HTML-Code des Real Favicon Generator am Ende Ihrer Datei nach dem ?>-Tag ein. In unserem Fall sieht das Snippet wie folgt aus:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff">

7. Klicken Sie auf Datei aktualisieren, um die Änderungen zu speichern.

Um das benutzerdefinierte Favicon zu entfernen, löschen Sie den Code aus Ihrer Theme-Datei und entfernen Sie die Bilddateien aus dem WordPress-Rootverzeichnis.

Fazit

Ein WordPress Favicon ist ein kleines Bild, das auf der Browser-Registerkarte eines Benutzers erscheint, wenn dieser Ihre Website aufruft. Es hilft ihnen, zwischen den Tabs zu unterscheiden und fördert die Wiedererkennung der Marke.

Sie können ein Favicon mit einer Grafiksoftware oder einem Webtool wie dem Real Favicon Generator erstellen. Denken Sie daran, dass das Bild quadratisch sein muss, mindestens 512 x 512 Pixel groß sein muss und den Richtlinien für Suchmaschinen entspricht.

Der einfachste Weg, ein Favicon zu Ihrer Website hinzuzufügen, ist die Verwendung des Website-Icon-Blocks im Gutenberg-Editor. Wenn Sie klassische Themes verwenden, nutzen Sie die WordPress Customizer-Funktion im Design-Menü.

Alternativ können Sie ein Plugin wie Real Favicon Generator verwenden und das Bild über die Design-Einstellung hochladen. Entwickler können dies auch manuell tun, indem sie das Icon in das WordPress-Rootverzeichnis hochladen und HTML-Code in die PHP-Datei des Themes einfügen.

WordPress Favicon FAQ