Möchten Sie Ihrer Site ein WordPress-Favicon hinzufügen?
Ein Favicon ist das Symbol, das in den Browser-Tabs angezeigt wird, wenn Sie Websites besuchen.
In diesem Beitrag führen wir Sie durch die Schritte zum Hinzufügen eines Favicons in WordPress auf verschiedene Arten, von der Standardfunktion des Sitesymbols bis zur manuellen Methode.
4 einfache Möglichkeiten, Ihr WordPress-Favicon zu ändern
Sie können das Standard-Favicon, das viele neue WordPress-Sites verwenden, im folgenden Bild sehen:
Es ist das WordPress-Logo, obwohl einige Hosts, wie z. B. Bluehost, ihren neuen Sites, die auf ihren Servern gehostet werden, eigene Favicons hinzufügen.
Egal wie Ihr Favicon im Moment aussieht, wir zeigen Ihnen, wie Sie es ändern können.
Sie können eine von vier möglichen Methoden verwenden:
- WordPress-Customizer
- WordPress-Plugin
- Ihr Thema
- Manuelles Hinzufügen
Beginnen wir oben.
1. Nutze den WordPress Customizer
So ändern Sie Ihr WordPress-Favicon am einfachsten:
- Stellen Sie sicher, dass Sie ein WordPress-freundliches Favicon-Bild haben. Die Standardgröße für WordPress-Favicons beträgt 512 x 512 Pixel im PNG-, ICO- oder GIF-Format, wobei PNG empfohlen wird.
- Gehen Sie zu Darstellung → Anpassen.
- Öffnen Sie die Registerkarte „Site-Identität“.
- Klicken Sie auf das Site-Symbol.
- Laden Sie Ihre Favicon-Bilddatei hoch.
- Klicken Sie auf „Veröffentlichen“.
Lassen Sie uns diese Schritte durchgehen.
1.1 Stellen Sie sicher, dass Sie ein WordPress-freundliches Favicon-Bild haben
Ein WordPress-Favicon sollte ein quadratisches Bild sein, genauer gesagt 512 x 512 Pixel. Nachfolgend können Sie unsere Tipps zum Erstellen von WordPress-Favicons lesen.
Das Bild sollte im ICO-, PNG- oder GIF-Format vorliegen. Wir empfehlen jedoch die Verwendung eines 512 x 512 Pixel großen PNG-Bilds für eine rundum bessere Unterstützung.
Wenn Sie ein Symbol von einer Symbolbibliotheksseite heruntergeladen haben und es nur im SVG-Format verfügbar war, verwenden Sie eine Seite wie Favicon.io oder CloudConvert um es zu konvertieren.
Dort Ist ein Plugin namens SVG-Favicon Damit können Sie SVG-Favicons auf WordPress hochladen. Wir empfehlen jedoch die Verwendung einer der Methoden in diesem Beitrag (insbesondere der aktuellen Methode, Methode 1), da diese die beste Langzeitunterstützung bieten, sodass Ihr Favicon-Bild in Zukunft weniger wahrscheinlich kaputt geht.
1.2 Öffnen Sie den WordPress-Customizer
Öffnen Sie den WordPress-Customizer, indem Sie entweder beim Durchsuchen des WordPress-Dashboards im linken Admin-Menü auf Darstellung → Anpassen gehen oder indem Sie beim Anzeigen des Frontends Ihrer Site auf die Schaltfläche Anpassen in der oberen Admin-Leiste klicken.
1.3-4 Site-Symbol bearbeiten
Sie sollten jetzt den WordPress-Customizer sehen.
Öffnen Sie die Registerkarte „Site-Identität“ …
… und klicken Sie dort auf die Option „Site-Symbol auswählen“.
1.5 Laden Sie Ihre Favicon-Bilddatei hoch
Verwenden Sie die WordPress-Medienbibliothek, um Ihre Favicon-Bilddatei hochzuladen.
Wenn beim Versuch, eine ICO-Datei auf Ihre Site hochzuladen, die Fehlermeldung „Leider dürfen Sie diesen Dateityp nicht hochladen“ angezeigt wird, verwenden Sie stattdessen die PNG-Version.
Wenn Sie Favicon.io zum Konvertieren von SVG-Dateien verwenden, erhalten Sie mehrere Dateien in einem ZIP-Ordner, darunter auch eine PNG-Version im Format 512 x 512 Pixel.
Favicon.io nennt es „android-chrome-512×512“. Benennen Sie es einfach in „Favicon“ um und schon kann es losgehen.
Stellen Sie sicher, dass das Favicon-Bild ausgewählt ist, und klicken Sie dann auf „Auswählen“.
1.6 Speichern Sie Ihr neues Favicon-Bild
Jetzt sollte das ausgewählte Favicon-Bild im Browser-Tab für Ihre Site angezeigt werden.
Klicken Sie auf „Veröffentlichen“, um es zu speichern.
Jetzt sollten Sie Ihr neues Favicon-Bild im Browser-Tab sehen, in dem Ihre Site geöffnet ist.
2.1 Ein WordPress Favicon Plugin verwenden – Plugin 1
So fügen Sie mithilfe der Plugin-Methode ein Favicon zu WordPress hinzu:
- Installieren und aktivieren Sie Favicon mit RealFaviconGenerator.
- Gehen Sie zu Darstellung → Favicon.
- Klicken Sie auf „Datei aus Medienbibliothek auswählen“ und laden Sie sie bei Bedarf in die Medienbibliothek hoch.
- Klicken Sie auf „Favicon generieren“.
- Konfigurieren Sie das Erscheinungsbild Ihres Favicons.
- Klicken Sie auf „Favicons und HTML-Code generieren“.
2.1.1 Installieren des Plugins
Gehen Sie zu Plugins → Neu hinzufügen und suchen Sie nach „Favicon“.
Dann finden Favicon von RealFaviconGeneratorund klicken Sie auf „Jetzt installieren und aktivieren“.
2.1.2 Öffnen Sie die Einstellungen des Plugins
Gehen Sie zu Darstellung → Favicon.
2.1.3 Laden Sie Ihr Favicon-Bild hoch und wählen Sie es aus der Medienbibliothek aus
Klicken Sie auf die Schaltfläche „Aus Medienbibliothek auswählen“.
Wenn Sie ein vorhandenes Bild in der WordPress-Medienbibliothek haben, wählen Sie es aus. Wenn nicht, fahren Sie fort und laden Sie es hoch.
2.1.4-6 Generieren Sie Ihr Favicon
Klicken Sie auf Favicon generieren. Dadurch werden Sie auf die Site des Plugins weitergeleitet, wo Sie Änderungen an Ihrem Favicon vornehmen können, bevor Sie es auf Ihre Site anwenden.
Da Sie dies für eine Website und nicht für eine App verwenden, müssen Sie die Einstellungen eigentlich nur im Abschnitt „Favicon für Desktop-Browser und Google-Ergebnisseiten“ konfigurieren.
Wenn Sie eine Bilddatei mit der Größe 512 x 512 Pixel hochgeladen haben und mit der Darstellung Ihres Favicons in den Vorschaubildern zufrieden sind, müssen Sie keine Änderungen vornehmen.
Jedoch, falls Sie es wollenSie können mit den Einstellungen herumspielen, um das Erscheinungsbild Ihres Favicons anzupassen.
Wenn Sie fertig sind, scrollen Sie nach unten und klicken Sie auf „Favicons und HTML-Code generieren“.
Sie werden zurück zu WordPress geleitet, wo die endgültige Installation stattfindet. Anschließend sehen Sie eine Vorschau Ihres Live-Favicon-Erscheinungsbilds.
2.2 Verwenden Sie ein WordPress Favicon-Plugin – Plugin 2
Dies ist eine sekundäre Methode zu Methode 2, falls Sie Favicon von RealFaviconGenerator nicht verwenden möchten.
Befolgen Sie diese Schritte, um Ihrer WordPress-Site mithilfe eines Plugins ein Favicon hinzuzufügen:
- Installieren und aktivieren Sie „All in One Favicon“ auf Ihrer Site.
- Klicken Sie auf den Menüpunkt „All-in-One-Favicon“.
- Suchen Sie die Upload-Methode für die Frontend-Einstellungen, die Ihrem Bildtyp entspricht.
- Laden Sie Ihr Favicon-Bild hoch.
2.2.1 All-in-One-Favicon installieren
Installieren Alles in einem Favicongehen Sie zu Plugins → Neu hinzufügen und suchen Sie nach „All-in-One-Favicon“.
Klicken Sie anschließend auf „Jetzt installieren“, um das Plugin zu installieren, und dann auf „Aktivieren“, um es zu aktivieren.
2.2.2 Klicken Sie auf den Menüpunkt des Plugins
All in One Favicon fügt dem linken Admin-Menü einen neuen Menüpunkt hinzu.
Klick es.
2.2.3-4 Laden Sie Ihr Favicon-Bild hoch
All in One Favicon unterstützt vier Symboltypen: ICO, PNG, GIF und ein Apple Touch-Symbol.
Suchen Sie im Bereich „Frontend-Einstellungen“ nach der Datei, die dem Dateityp entspricht, den Sie hochladen möchten.
Wenn die Datei im SVG-Format vorliegt, konvertieren Sie sie erneut in den Dateityp ICO, PNG oder GIF.
Klicken Sie dann auf „Hochladen“ und laden Sie Ihr Favicon-Bild in das Plugin hoch.
Dabei sieht es so aus, als wäre nichts passiert, aber keine Sorge, das Plugin hat Ihr Favicon-Bild trotzdem auf die Site hochgeladen.
Klicken Sie einfach auf „Änderungen speichern“, damit es angezeigt wird.
Diese Methode fügt nur beim Anzeigen Ihrer Site vom Frontend aus ein Favicon zum Browser-Tab hinzu.
Wenn Ihr Favicon beim Anzeigen des WordPress-Dashboards angezeigt werden soll, laden Sie es auch in die Backend-Einstellungen hoch.
Eine Warnung zur Verwendung der Plugin-Methode
Diese Methode kann sicherlich in einer Zwickmühle helfen, wenn die allgemeine Methode zum Anpassen von WordPress nicht funktioniert, wir empfehlen jedoch dringend, eine Möglichkeit zu finden, diese Methode anstelle dieser Methode zu verwenden, und zwar aus einem einfachen Grund: Wenn Sie ein Favicon-Plugin löschen, löschen Sie auch Ihre Favicons.
Wenn Sie also jemals eines dieser Plugins löschen müssen, stellen Sie sicher, dass Sie eine alternative Möglichkeit wie Methode 1 finden, um Ihrer WordPress-Website ein Favicon hinzuzufügen.
Manchmal wird der Support für WordPress-Plugins verloren oder sie werden zu einer Brutstätte für Sicherheitsprobleme. Dies sind nur einige Beispiele für Szenarien, die viele WordPress-Benutzer dazu veranlassen, Plugins von ihren Websites zu entfernen.
3. Verwenden Sie Ihr Thema
Früher waren bei Designs die Favicon-Einstellungen in das Design-Optionsfeld integriert.
Allerdings machen immer mehr Designs Gebrauch vom WordPress-Customizer, was bedeutet, dass viele auf ihre eigenen Favicon-Funktionen verzichten und stattdessen die von WordPress verwenden können.
Astra verfügt beispielsweise über eine Site-Identity-Option in seinem Designoptionsfeld, öffnet jedoch einfach die Registerkarte „Site Identity“ im WordPress-Customizer in einer neuen Registerkarte.
Kadence und GeneratePress tun dies ebenfalls.
Wenn Sie ein blockbasiertes Design verwenden, können Sie Ihr Favicon tatsächlich im Blockeditor bearbeiten.
Tun Sie dies entweder, indem Sie eine neue Seite erstellen oder indem Sie zu Darstellung → Editor gehen.
Fügen Sie der Seite einen neuen Block hinzu und wählen Sie den Site-Logo-Block.
Bewegen Sie den Mauszeiger über das Logo, falls bereits eines angezeigt wird, und klicken Sie auf „Ersetzen“. Wählen Sie anschließend entweder die Option „Medienbibliothek“ oder „Hochladen“.
Laden Sie als Nächstes Ihr Favicon-Bild hoch oder wählen Sie es aus.
Öffnen Sie das Einstellungsfenster für den Block und aktivieren Sie die Option „Als Site-Symbol verwenden“.
Klicken Sie dann auf „Speichern“ und deaktivieren Sie die Option „Logo“, wenn Sie ein anderes Bild als Logo Ihrer Site verwenden möchten.
Klicken Sie dann erneut auf „Speichern“, um das Favicon auf Ihre Site anzuwenden.
4. Fügen Sie Ihrer Site manuell ein WordPress-Favicon hinzu
Dies ist die einfachste Möglichkeit, Ihrer Site manuell ein Favicon hinzuzufügen:
- Verwenden Sie RealFaviconGenerator, um Ihr 512 x 512 Pixel großes PNG-Favicon-Bild in HTML-Code umzuwandeln.
- Laden Sie das Favicon-Paket herunter, extrahieren Sie es und laden Sie es dann in den Ordner Ihres aktiven Designs hoch.
- Installieren Sie WPCode auf Ihrer Site.
- Kopieren Sie den Favicon-Code und fügen Sie ihn in den Header-Bereich von WPCode ein.
4.1 Generieren Sie Ihren Favicon-HTML-Code
Gehe zu Website von RealFaviconGeneratorund klicken Sie auf „Wählen Sie Ihr Favicon-Bild aus“. Für optimale Ergebnisse sollte es sich um ein 512 x 512 Pixel großes PNG-Bild handeln.
Verwenden Sie die Einstellungen von RealFaviconGenerator, um das Erscheinungsbild Ihres Favicons zu konfigurieren, wenn Sie möchten.
Dies sollte nicht nötig sein, wenn Sie Ihr Favicon zuvor erstellt und ein 512 x 512 Pixel großes Bild hochgeladen haben.
Scrollen Sie dann zum Ende der Seite und klicken Sie auf „Favicons und HTML-Code generieren“.
Sie sollten jetzt den HTML-Code für Ihr Favicon haben.
Lassen Sie diese Webseite geöffnet, während Sie die restlichen Schritte ausführen.
4.2 Laden Sie das Favicon-Paket in Ihren Themenordner hoch
Für diesen Schritt müssen Sie auf den Ordner Ihres aktiven Designs zugreifen. Sie können dies über FTP oder den Dateimanager Ihres Hosts tun.
Wir werden hier nicht näher darauf eingehen, wie das geht, da es zahlreiche Tutorials gibt, die Ihnen weiterhelfen können.
Stattdessen weisen wir Sie einfach an, Ihr Favicon-Paket von RealFaviconGenerator herunterzuladen …
[realfavicongenerator-download-favicon-package]
…und extrahieren Sie alle Dateien daraus.
Fügen Sie dann alle extrahierten Dateien zum Stammverzeichnis Ihrer Site hinzu. Dies ist derselbe Ordner, in dem sich auch „wp-content“ und „wp-admin“ befinden.
4.3 WPCode installieren
WPCode ist ein kostenloses Plugin, mit dem Sie Code zu Designdateien hinzufügen können, ohne auf diese zuzugreifen, was überwältigend sein kann, wenn Sie das noch nie zuvor getan haben.
Darüber hinaus können Sie Ihrer Header-Datei Code hinzufügen, ohne ein untergeordnetes Design erstellen zu müssen.
Gehen Sie zu Plugins → Neu hinzufügen und suchen Sie nach „wpcode“.
Installieren und aktivieren Sie dann das Plugin.
4.4 Fügen Sie den Code in WPCode ein
WPCode fügt Ihrem Admin-Menü ein Element „Code Snippets“ hinzu.
Gehen Sie zu Code-Snippets → Kopf- und Fußzeile.
Kopieren Sie den HTML-Code von RealFaviconGenerator und fügen Sie ihn in den Header-Bereich der Header- und Footer-Seite ein.
Wenn Sie jedoch den Begriff „href“ sehen, fügen Sie nach dem Anführungszeichen die URL Ihrer Site hinzu. Verwenden Sie https, wenn Ihre Site dies verwendet.
Es gibt fünf href-Attribute im Code und sie stehen alle in einer Reihe.
Klicken Sie dann auf „Änderungen speichern“, um das Favicon auf Ihre Site anzuwenden.
So erstellen Sie ein WordPress-Favicon
Der einfachste Weg, ein benutzerdefiniertes WordPress-Favicon zu erstellen, besteht darin, eines mit Favicon.io zu generieren. Damit können Sie aus einem Initial ein Favicon erstellen.
Sie können die Schriftart, Schriftfarbe, Hintergrundfarbe und Rahmenform des Favicons bearbeiten.
Wenn Sie ein Symbol als Favicon-Symbol verwenden möchten, laden Sie eines aus einer Symbolbibliothek herunter oder kaufen Sie eines, die urheberrechtsfreie Symbole anbietet.
Wenn Sie sich für ein Symbol ohne Angabe der Quelle entscheiden, können Sie das Symbolbild als Teil Ihrer Markenidentität verwenden, ohne dass es zu Urheberrechtsproblemen kommt. Um sicherzugehen, sollten Sie sich jedoch die Richtlinien der einzelnen Bibliotheken zur Symbolverwendung ansehen.
Das Beste an Symbolbibliotheken ist, dass Sie Symbole in jedem Format und jeder Größe herunterladen können.
Abschließende Gedanken
Das Favicon Ihrer Site ist zwar nicht der wichtigste Aspekt, kann Ihnen jedoch dabei helfen, Markenbekanntheit und ein einheitliches Design Ihrer Marke zu schaffen.
Wir empfehlen dringend die Verwendung von Methode 1 aus dieser Liste, da diese am einfachsten durchzuführen ist. Sie sollten jedoch mit keiner der anderen Methoden allzu große Probleme haben.
Bevor Sie Ihr Favicon erstellen, surfen Sie ein paar Tage wie gewohnt im Internet und achten Sie darauf, welche Favicons andere Websites verwenden. Das wird Ihnen eine tolle Inspiration sein!
