So fügen Sie ein Favicon hinzu WordPress

Das Hinzufügen eines Favicons zu WordPress erfolgt über die integrierte Site-Icon-Funktion von WordPress. Normalerweise müssen Sie keine favicon.ico-Datei erstellen, Ihre Designdateien bearbeiten oder ein Favicon-Plugin installieren. In WordPress wird das Favicon als Site-Symbol bezeichnet. Sie können eines über die allgemeinen Einstellungen in WordPress 6.5 und höher hinzufügen. Ältere WordPress-Versionen verwenden den Customizer, während Block-Themes das Symbol auch über den Site-Logo-Block verwalten können.

Bereiten Sie vor Beginn ein quadratisches Bild mit mindestens 512 × 512 Pixeln vor. WordPress empfiehlt PNG für das Site-Symbol.

Wie fügt man WordPress ein Favicon hinzu?

Für WordPress 6.5 und höher hat WordPress die Einstellung „Site-Symbol“ in „Allgemeine Einstellungen“ verschoben. Dies ist die primäre Methode für aktuelle WordPress-Installationen.

1. Melden Sie sich bei Ihrem WordPress-Dashboard an: Öffnen Sie Ihren WordPress-Administrationsbereich und melden Sie sich an. Sie benötigen Administratorzugriff oder ausreichende Berechtigungen, um die Einstellungen der Website zu ändern.
2. Allgemeine Einstellungen öffnen: Öffnen Sie das WordPress-Dashboard Einstellungen → Allgemein.
3. Suchen Sie die Einstellung für das Site-Symbol: Suchen Sie nach dem Abschnitt „Site-Symbol“. Sie sollten eine Option mit der Bezeichnung sehen Wählen Sie ein Site-Symbol.
4. Laden Sie Ihr Favicon hoch oder wählen Sie es aus: Klicken Sie Wählen Sie ein Site-Symbol. Mit WordPress können Sie ein Bild aus Ihrer Medienbibliothek auswählen oder das vorbereitete Bild hochladen. Wählen Sie Ihr quadratisches Favicon-Bild (mindestens 512 × 512 Pixel, PNG empfohlen).
5. Bestätigen Sie das Bild: Nachdem Sie das Bild ausgewählt haben, überprüfen Sie die Vorschau sorgfältig. Stellen Sie sicher, dass das richtige Bild ausgewählt ist, der wichtige Teil Ihres Designs sichtbar ist, das Symbol nicht unnötig kompliziert ist und das Bild quadratisch ist. Wenn das Bild ein Logo mit sehr kleinem Text enthält, sollten Sie eine vereinfachte Version vorbereiten, bevor Sie es als Site-Symbol verwenden.
6. Speichern Sie das Site-Symbol: Speichern Sie die Änderungen an den allgemeinen Einstellungen. Das Site-Symbol ist jetzt mit Ihrer WordPress-Website verknüpft.
7. Öffnen Sie die Live-Website: Öffnen Sie Ihre Website in einem neuen Browser-Tab. Überprüfen Sie das Symbol neben dem Seitentitel. Beurteilen Sie das Ergebnis nicht nur auf dem WordPress-Admin-Bildschirm. Der eigentliche Test ist die veröffentlichte Website in einem Browser.

Wo ist die Favicon-Einstellung in WordPress?

Der Speicherort hängt in erster Linie von Ihrer WordPress-Version und dem Theme-Setup ab.

Wo ist die Favicon-Einstellung in WordPress 6.5 und höher?

Für WordPress 6.5 und höher verwenden Sie:

WordPress-Administrator → Einstellungen → Allgemein → Site-Symbol

WordPress hat das Site-Symbol vom Customizer in die allgemeinen Einstellungen in WordPress 6.5 verschoben. Dies ist die aktuelle Standardroute.

Wo war die Favicon-Einstellung in älteren WordPress-Versionen?

In den WordPress-Versionen 4.3 bis 6.4 wurde das Site-Symbol über den Customizer verwaltet:

WordPress-Administration → Erscheinungsbild → Anpassen → Site-Identität → Site-Symbol

Anschließend haben Sie ein quadratisches Bild mit mindestens 512 × 512 Pixeln ausgewählt oder hochgeladen. Dies erklärt, warum ältere WordPress-Tutorials möglicherweise einen anderen Navigationspfad anzeigen. Wenn Ihr Dashboard diesen Anweisungen nicht entspricht, überprüfen Sie zunächst Ihre WordPress-Version, bevor Sie davon ausgehen, dass die Funktion nicht mehr verfügbar ist.

Wo ist die Favicon-Einstellung in einem Block-Theme?

Blockthemen bieten einen weiteren Workflow über den Site-Editor. Der Site-Logo-Block enthält a Als Site-Symbol verwenden Option. Wenn diese Option aktiviert ist, wird das dem Site-Logo-Block zugewiesene Bild auch als Site-Symbol verwendet. Dies ist besonders relevant, wenn Sie mit einem modernen Blockthema arbeiten und die meiste Zeit darin verbringen Aussehen → Herausgeber.

Wie fügt man ein Favicon mit einem WordPress-Block-Theme hinzu?

Ein Blockthema kann das Site-Symbol über den Site-Logo-Block verwalten.

1. Erscheinungsbild → Editor öffnen: Gehen Sie in Ihrem WordPress-Dashboard zu Aussehen → Herausgeber. Dadurch wird der WordPress-Site-Editor für ein Block-Theme geöffnet.
2. Suchen Sie den Site-Logo-Block oder fügen Sie ihn hinzu: Ihr Theme verfügt möglicherweise bereits über einen Site-Logo-Block im Header. Wählen Sie es aus. Wenn kein Site-Logo-Block vorhanden ist, fügen Sie über den Block-Inserter einen Site-Logo-Block hinzu. In der Dokumentation von WordPress wird erläutert, dass der Block im Site-Editor in Vorlagen eingefügt werden kann.
3. Fügen Sie Ihr Bild hinzu: Wählen Sie den Block „Site-Logo“ aus und laden Sie ein Bild hoch oder wählen Sie eines aus der Medienbibliothek aus.
4. Öffnen Sie die Blockeinstellungen: Öffnen Sie bei ausgewähltem Site-Logo-Block die Einstellungsseitenleiste. Suchen Sie nach dem Als Site-Symbol verwenden Option.
5. Aktivieren Sie „Als Site-Symbol verwenden“: Einschalten Als Site-Symbol verwenden. WordPress verwendet dieses Bild als Site-Symbol.
6. Speichern Sie Ihre Änderungen: Speichern Sie die Änderungen im Site-Editor, öffnen Sie dann die Live-Website und überprüfen Sie die Browser-Registerkarte.

Das Site-Logo und das Site-Symbol können auch unterschiedlich sein. WordPress dokumentiert einen Site-Logo-Workflow, bei dem das Logo zunächst zum Festlegen des Symbols verwendet werden kann und anschließend ein anderes Site-Symbol ausgewählt werden kann.

Wie erstellt man ein Favicon für WordPress?

Sie haben mehrere Möglichkeiten, das Bild vor dem Hochladen zu erstellen.

Wie erstellen Sie ein Favicon aus Ihrem Logo?

Beginnen Sie mit Ihrem bestehenden Markenlogo. Wenn das Logo bereits ein einfaches quadratisches Symbol ist, müssen Sie möglicherweise nur die Größe ändern und es exportieren. Wenn das Logo horizontal ist, vereinfachen Sie es zunächst. Entfernen Sie unnötigen Text oder verwenden Sie den am besten erkennbaren Teil des Logos. Übersetzen Sie das Logo nicht und ändern Sie den Markennamen nicht im Rahmen des Favicon-Erstellungsprozesses. Behalten Sie die ursprüngliche Markenidentität bei und passen Sie das Kunstwerk gleichzeitig an ein kleines quadratisches Format an.

Wie erstellt man ein Favicon aus Initialen oder Text?

Ein Favicon kann anstelle eines vollständigen Logos einen oder zwei Buchstaben verwenden. Beispielsweise könnte ein Unternehmen namens North Star Digital verwenden NS anstatt zu versuchen, den vollständigen Namen in das Symbol einzufügen. Verwenden Sie große, lesbare Zeichen mit ausreichend Kontrast.

Wie konvertiert man ein PNG in ein Favicon?

Wenn Sie bereits über ein PNG-Bild verfügen, können Sie mit einem Favicon-Konvertierungstool eine Favicon-Version vorbereiten. Zum Beispiel, PNGtoFavicon.com kann ein vorhandenes PNG in Favicon-Grafik umwandeln. Dies ist nützlich, wenn Sie bereits über ein passendes Logo oder Symbol verfügen, aber vor dem Hochladen in WordPress eine Favicon-Version vorbereiten müssen. Überprüfen Sie nach der Konvertierung das resultierende Bild in kleiner Größe, bevor Sie es als Site-Symbol verwenden.

Die wichtige WordPress-Anforderung ist immer noch dieselbe: Das Bild sollte quadratisch sein und mindestens 512 × 512 Pixel groß sein.

Welche Größe sollte ein WordPress-Favicon haben?

WordPress erfordert, dass ein Site-Symbol quadratisch ist, mindestens 512 × 512 Pixel, und empfiehlt das PNG-Format. Dies sind die aktuellen dokumentierten Anforderungen von WordPress.

Verwechseln Sie nicht die Größe des von Ihnen hochgeladenen Bildes mit der Größe, in der der Browser letztendlich das Favicon anzeigt. Ein Browser kann das Symbol in einer viel kleineren Größe als das ursprünglich hochgeladene Bild anzeigen. Deshalb ist es wichtig, mit einem ausreichend großen, sauberen Bild zu beginnen.

Wie überprüfen Sie, ob Ihr WordPress-Favicon funktioniert?

Überprüfen Sie nach dem Speichern des Site-Symbols die Live-Website.

• Überprüfen Sie die Browser-Registerkarte: Öffnen Sie Ihre Website und sehen Sie sich die Browser-Registerkarte an. Das Site-Symbol sollte neben dem Seitentitel erscheinen. Dies ist der einfachste Weg, um zu bestätigen, dass das Favicon von Ihrer Website bereitgestellt wird.
• Überprüfen Sie ein Lesezeichen: Setzen Sie ein Lesezeichen auf die Website und prüfen Sie, ob das Symbol neben dem Lesezeichen angezeigt wird. Favicons können auch im Browserverlauf und anderen Browseroberflächen verwendet werden.
• Testen Sie die Website in einem privaten oder Inkognito-Fenster: Wenn Ihr altes Favicon noch sichtbar ist, öffnen Sie die Website in einem privaten oder Inkognito-Fenster. Dadurch erhalten Sie einen saubereren Test, da in Ihrer normalen Browsersitzung möglicherweise noch das vorherige Favicon zwischengespeichert ist.
• Testen Sie einen anderen Browser: Öffnen Sie die Website in einem zweiten Browser. Wenn das neue Favicon dort, aber nicht in Ihrem primären Browser angezeigt wird, ist die WordPress-Einstellung möglicherweise bereits korrekt und das verbleibende Problem liegt möglicherweise im Browser-Caching.
• Überprüfen Sie die Live-Domain: Stellen Sie sicher, dass Sie die richtige veröffentlichte Domain besuchen. Testen Sie nicht versehentlich eine Staging-Website, eine Entwicklungsinstallation, eine alte Domain oder eine andere WordPress-Installation.

Warum wird mein WordPress-Favicon nicht angezeigt?

Ein fehlendes Favicon bedeutet nicht automatisch, dass der Upload des Site-Symbols fehlgeschlagen ist. Mehrere unterschiedliche Probleme können zum gleichen Ergebnis führen.

Wie löscht man den WordPress- oder Browser-Cache, nachdem man ein Favicon geändert hat?

Das Caching sollte erst überprüft werden, nachdem bestätigt wurde, dass das Site-Symbol tatsächlich gespeichert wurde. Verwenden Sie diese Reihenfolge:

1. Bestätigen Sie, dass das Site-Symbol in WordPress korrekt ist.
2. Speichern Sie die Änderung.
3. Leeren Sie den Cache Ihres WordPress-Caching-Plugins, falls einer installiert ist.
4. Leeren Sie Ihren CDN-Cache, wenn Ihre Website ein CDN verwendet.
5. Öffnen Sie die Website in einem privaten oder Inkognito-Fenster.
6. Testen Sie die Website in einem anderen Browser.
7. Überprüfen Sie das Favicon im Browser-Tab.

Dies trennt das WordPress-Konfigurationsproblem vom Caching-Problem. Ersetzen Sie das Favicon nicht wiederholt, nur weil Ihr Browser weiterhin das vorherige Bild anzeigt.

Wie ändert oder ersetzt man ein WordPress-Favicon?

Das Ersetzen eines Site-Symbols ähnelt dem Hinzufügen eines solchen.

Für WordPress 6.5 und höher

• Melden Sie sich bei WordPress an.
• Gehen Sie zu Einstellungen → Allgemein.
• Site-Symbol finden.
• Wählen Sie ein anderes Bild aus der Medienbibliothek oder laden Sie es hoch.
• Bestätigen Sie das Bild.
• Speichern Sie die Einstellungen.
• Öffnen Sie die Live-Website und überprüfen Sie die Browser-Registerkarte.

In der aktuellen Dokumentation von WordPress wird das Site-Symbol in den allgemeinen Einstellungen für WordPress 6.5 und höher platziert.

Für ältere WordPress-Versionen

Verwenden Sie auf WordPress 4.3 bis 6.4 Aussehen → Anpassen → Site-Identität → Site-Symbol, wählen Sie dann das Ersatzbild aus und speichern Sie Ihre Änderungen.

Wie entferne ich ein WordPress-Favicon?

Der Entfernungsprozess hängt davon ab, ob Sie die allgemeinen Einstellungen, den Customizer oder ein Blockdesign verwenden.

Entfernen Sie das Site-Symbol aus dem aktuellen WordPress

Öffnen Sie die Site-Symbol-Steuerelemente unten Einstellungen → Allgemein und nutzen Sie die in Ihrer WordPress-Installation verfügbare Entfernungs- oder Ersetzungssteuerung. Da die Benutzeroberflächen von WordPress je nach Version und Theme variieren können, sollten Sie sich nicht auf einen bestimmten Schaltflächennamen aus einem älteren Tutorial verlassen.

Entfernen Sie das Site-Symbol aus dem Customizer

Ältere WordPress-Installationen verwalten das Symbol über Aussehen → Anpassen → Site-Identität. Das Bedienfeld „Site-Identität“ enthält das Site-Symbol-Steuerelement und ermöglicht das Ändern oder Entfernen des Bildes.

Entfernen Sie das Site-Symbol aus einem Blockthema

Blockthemen können den Site-Logo-Block verwenden, um das Site-Symbol zu steuern. Offen Aussehen → Herausgeber, wählen Sie den Block „Site-Logo“ aus und überprüfen Sie dessen Bild- und Site-Symboleinstellungen. Das Entfernen des Bildes aus dem Site-Logo-Block und das Entfernen des Site-Symbols sind nicht unbedingt derselbe Vorgang. Überprüfen Sie daher die Einstellung des Site-Symbols selbst, wenn Ihr Ziel speziell darin besteht, das Favicon zu entfernen.

Können Sie ein WordPress-Favicon mit Code hinzufügen?

Ja, aber Codierung ist normalerweise nicht erforderlich. WordPress verfügt über eine integrierte Site-Icon-Funktionalität, daher sollten normale Websites die integrierte Einstellung verwenden, anstatt manuell Favicon-Markup zu Designdateien hinzuzufügen. WordPress bietet seit Version 4.3 die Site-Icon-Funktion.

Wann sollten Sie das integrierte Site-Symbol von WordPress verwenden?

Verwenden Sie die integrierte Option, sofern verfügbar. Es ist einfacher, leichter zu warten und vermeidet unnötige Änderungen an der Designdatei.

Wann könnte benutzerdefinierter Code erforderlich sein?

Benutzerdefinierter Code kann für ein benutzerdefiniertes Design oder eine spezielle Implementierung sinnvoll sein, bei der die integrierten Steuerelemente nicht das erforderliche Verhalten bereitstellen. Stellen Sie vor dem Bearbeiten des Theme-Codes fest, ob das vorhandene Theme die Site-Icon-Funktion bereits unterstützt. Fügen Sie keine zweite Favicon-Implementierung hinzu, nur weil Sie die Einstellung nicht sofort finden können.

Benötigen Sie ein Plugin, um ein Favicon zu WordPress hinzuzufügen?

Nein. Ein spezielles Favicon-Plugin ist normalerweise nicht erforderlich. WordPress verfügt über eine integrierte Site-Icon-Funktionalität und die offizielle Dokumentation empfiehlt, diese zu verwenden, anstatt manuell eine separate favicon.ico-Implementierung zu erstellen und zu installieren. Ein Plugin kann für eine spezielle Anforderung relevant sein, aber die Installation eines Plugins, nur um ein Standard-Site-Symbol hinzuzufügen, führt zu einer unnötigen Abhängigkeit.

Häufige WordPress-Favicon-Fehler, die Sie vermeiden sollten

• Verwendung eines nicht quadratischen Bildes: WordPress erfordert, dass das Site-Symbol quadratisch ist.
• Hochladen eines Bildes, das kleiner als 512 × 512 Pixel ist: Bereiten Sie das Symbol mit den erforderlichen Mindestabmessungen vor, anstatt mit einem winzigen Quellbild zu beginnen.
• Verwendung eines komplizierten Logos: Ein detailliertes Logo kann bei der Verkleinerung auf die Favicon-Größe nicht mehr erkennbar sein.
• Text zu klein machen: Lange Firmennamen und Slogans werden meist unleserlich.
• Verwendung von schlechtem Kontrast: Ein Favicon mit geringem Kontrast kann auf der Benutzeroberfläche eines Browsers verschwinden.
• Beginnen Sie mit einer minderwertigen Quelle: Ein verschwommenes oder stark komprimiertes Bild führt nicht zu einem sauberen Ergebnis.
• Vergessen zu speichern: Die Auswahl eines Bildes hilft nicht, wenn die Einstellung nicht gespeichert wird.
• Nur einen Browser prüfen: Verwenden Sie ein privates Fenster oder einen anderen Browser, wenn Sie ein kürzlich geändertes Favicon überprüfen.
• Verwechslung des Site-Logos mit dem Site-Symbol: Sie dienen unterschiedlichen Zwecken. Ihr Site-Logo erscheint im Website-Design, während das Site-Symbol als kleines Browser- und App-Symbol verwendet wird.
• Code unnötig bearbeiten: Nutzen Sie die in WordPress integrierte Site-Icon-Funktionalität, bevor Sie Designdateien ändern.
• Angenommen, das Favicon ist fehlgeschlagen, weil das alte Symbol weiterhin sichtbar ist: Browser-Caching kann eine erfolgreiche Änderung als erfolglos erscheinen lassen.

Häufig gestellte Fragen zu WordPress-Favicons

So erstellen Sie ein Favicon, bevor Sie es in WordPress hochladen

Verwenden Sie diesen Workflow, wenn Sie noch kein geeignetes Site-Symbol haben:

1. Beginnen Sie mit Ihrem vorhandenen Logo, Symbol oder Ihren Initialen. Behalten Sie das ursprüngliche Logo und die Markenidentität bei.
2. Vereinfachen Sie das Bildmaterial, damit es auch bei sehr kleiner Darstellung erkennbar bleibt.
3. Erstellen Sie eine quadratische Leinwand.
4. Stellen Sie sicher, dass das Bild mindestens 512 × 512 Pixel groß ist.
5. Exportieren Sie es als PNG.
6. Überprüfen Sie das Symbol bei kleinen Anzeigegrößen.
7. Konvertieren Sie bei Bedarf ein vorhandenes PNG in Favicon-Grafik.
8. Laden Sie das fertige Bild als Site-Symbol in WordPress hoch.

Abschluss

Um ein Favicon zu WordPress hinzuzufügen, bereiten Sie ein quadratisches Bild mit mindestens 512 × 512 Pixeln vor und öffnen Sie dann Einstellungen → Allgemein → Site-Symbol in WordPress 6.5 und höher. Wählen Sie das Bild aus oder laden Sie es hoch, speichern Sie die Einstellungen und überprüfen Sie die Live-Website in einem Browser. Ältere WordPress-Installationen verwenden Darstellung → Anpassen → Site-Identität, während Blockthemen das Symbol auch über den Site-Logo-Block verwalten können. Wenn das neue Favicon nicht sofort angezeigt wird, überprüfen Sie Browser, WordPress, CDN oder Server-Caching, bevor Sie davon ausgehen, dass der Upload fehlgeschlagen ist.