Wie füge ich meiner WordPress-Website ein Favicon hinzu?

Ein WordPress- Favicon ist ein kleines Symbol, das in Browser-Tabs oder Lesezeichen angezeigt wird. Es dient als visuelles Erkennungsmerkmal der Website und verbessert die Markenbekanntheit und das Nutzererlebnis .

Trotz ihrer geringen Größe spielen Favicons eine wichtige Rolle bei der Etablierung der Identität einer Website. Oft wird angenommen, dass Favicons rein dekorative Elemente sind. In der WordPress-Entwicklung neben der Ästhetik auch praktische Zwecke: Sie erleichtern die Navigation und stärken die Markenbindung. Im Folgenden werden wir das ungenutzte Potenzial von Favicons untersuchen und zeigen, wie sie das Nutzererlebnis optimieren können.

5 Schritte zur Erstellung eines WordPress-Favicons 

Ein individuelles Favicon steigert den Wiedererkennungswert und die Professionalität Ihrer Marke . Ein einzigartiges Favicon hilft Besuchern, die Tabs und Lesezeichen Ihrer Website schnell zu finden und verbessert so die Benutzerfreundlichkeit.

Es verleiht Ihrer Website zudem einen professionellen Touch und lässt sie etablierter und vertrauenswürdiger wirken. Die konsequente Verwendung Ihres Marken-Icons oder -Logos als Favicon stärkt die Markenidentität über alle digitalen Kontaktpunkte hinweg. 

Weiterlesen : So gestalten Sie Ihre WordPress-Website neu: 8 einfache Wege

Befolgen Sie diese 5 einfachen Schritte, um Ihrer WordPress-Website ein Favicon hinzuzufügen: 

Wählen oder erstellen Sie Ihr Favicon-Bild: Wählen Sie ein quadratisches Bild, das Ihre Marke repräsentiert, vorzugsweise ein Logo oder Symbol. Die ideale Größe beträgt 512 × 512 Pixel, Sie können aber auch ein kleineres Bild verwenden; es wird automatisch angepasst und optimiert .

Mehr dazu : Bildauflösung verstehen

Nutzen Sie einen Online-Favicon-Generator: Besuchen Sie einen kostenlosen Online-Favicon-Generator wie RealFaviconGenerator oder Favicon.cc. Laden Sie Ihr Bild hoch und folgen Sie den Anweisungen, um die benötigten Favicon-Dateien zu generieren.

Laden Sie die Favicon-Dateien herunter: Sobald der Generator Ihr Bild verarbeitet hat, laden Sie das resultierende Favicon-Paket herunter, das in der Regel mehrere Größen in den Formaten .ico, .png und anderen enthält.

Weiterlesen : WebP vs. PNG: Welches Bildformat ist das richtige für Ihre Website?

Installieren Sie das Favicon-Plugin: Installieren und aktivieren Sie das Plugin „Favicon by RealFaviconGenerator“ auf Ihrer WordPress-Website. Mit diesem Plugin können Sie Ihr eigenes Favicon einfach hochladen und festlegen.

Favicon hochladen und aktivieren: Klicken Sie in den Plugin-Einstellungen auf „Favicon auswählen“ und laden Sie das zuvor heruntergeladene Favicon-Paket hoch. Nach dem Hochladen konfiguriert und aktiviert das Plugin Ihr neues Favicon automatisch auf Ihrer WordPress-Website.

Weiterlesen : So bewerben Sie Ihr WordPress-Plugin oder -Theme, um den Umsatz zu steigern

Wertvolle Tipps zur Erstellung von WordPress-Favicons

Bei der Erstellung eines Favicons für Ihre WordPress-Website ist Professionalität unerlässlich. Auch wenn die Aufgabe einfach erscheint, können einige Feinheiten die Wirkung erheblich beeinflussen. 

Die Unterstützung durch Experten für WordPress-Entwicklung und -Support stellt sicher, dass Ihr Favicon nahtlos zum Branding und den Funktionen Ihrer Website passt. Hier sind fünf wertvolle Tipps, die auf Designprinzipien und technischen Spezifikationen basieren und Sie bei der Erstellung Ihres Favicons unterstützen:

• Optimale Größe und Format: Für eine hohe Auflösung empfiehlt sich eine Favicon-Größe von 512 × 512 Pixel. Obwohl quadratisches Format Standard ist, unterstützt WordPress auch rechteckige Bilder und bietet eine integrierte Zuschneidefunktion, um diese entsprechend anzupassen.

• Skalierbares Design: Achten Sie darauf, dass Ihr Favicon auch in kleineren Formaten klar und ansprechend bleibt, auch wenn es letztendlich als 16×16 Pixel großes Quadrat angezeigt wird. Wählen Sie ein Bild, das sich gut für kleinere Formate eignet und dabei seine Aussagekraft bewahrt.

• Setzen Sie auf visuelle Einheitlichkeit: Ihr Favicon sollte sich nahtlos in das Gesamtdesign und die Markenidentität Ihrer Website einfügen. Einheitliche Farbpalette, Typografie und Bildsprache fördern ein konsistentes Nutzererlebnis über alle Kontaktpunkte hinweg.

• Beachten Sie die Google-Richtlinien: Machen Sie sich mit den Empfehlungen von Google zur Erstellung und Verwendung von Favicons vertraut, um deren Darstellung in Suchmaschinenergebnissen und Browser-Tabs zu optimieren. Die Einhaltung dieser Richtlinien verbessert die Sichtbarkeit und Benutzerfreundlichkeit Ihrer Website.

• Testen Sie Ihr Favicon plattformübergreifend: Bevor Sie es endgültig festlegen, testen Sie dessen Darstellung auf verschiedenen Browsern und Geräten, um Einheitlichkeit und Lesbarkeit sicherzustellen. Gründliche plattformübergreifende Tests garantieren ein reibungsloses Nutzererlebnis unabhängig von der verwendeten Umgebung.

Weiterlesen : Responsives WordPress-Webdesign: Der Schlüssel zur Konvertierung mobiler Besucher

Warum Ihr Favicon möglicherweise nicht in der Google-Suche angezeigt wird und wie Sie das Problem beheben können

Selbst nachdem Sie ein Favicon zu Ihrer WordPress-Website hinzugefügt haben, kann es vorkommen, dass es nicht in den Google-Suchergebnissen oder in allen Webbrowsern angezeigt wird. Dies liegt häufig an fehlerhaftem Favicon-Code, nicht unterstützten Bilddateiformaten oder Problemen mit den Theme-Einstellungen und dem Caching. Wenn Sie wissen, wie Sie diese Fehler beheben, stellen Sie sicher, dass das Favicon Ihrer Website in den Suchergebnissen und auf allen Webseiten korrekt angezeigt wird.

Hier sind die häufigsten Gründe, warum Ihr Favicon in WordPress möglicherweise nicht angezeigt wird, und wie Sie diese beheben können:

• Falsches Format oder falsche Größe : Die ideale Größe für ein WordPress-Favicon beträgt 512 × 512 Pixel im PNG- oder ICO-Format. Wenn Sie zu kleine oder nicht unterstützte Dateien hochladen, werden diese möglicherweise von Google ignoriert. Sie können Ihr Favicon mit einem Favicon-Generator oder einem Werkzeug von Adobe Photoshop erstellen.

• Fehlender oder veralteter Favicon-Code : Suchmaschinen können nicht erkennen, ob Ihr Favicon korrekt in der PHP-Datei oder im Website-Editor verlinkt ist. Verwenden Sie die Schaltfläche „HTML-Code“ oder fügen Sie Favicon-Code-Snippets in die Kopfzeile ein, um sicherzustellen, dass das Favicon-Symbol registriert wird.

• Zwischenspeicherung und Aktualisierungsverzögerungen : Manchmal benötigt Google etwas Zeit, um das Favicon einer Website zu aktualisieren. Leeren Sie Ihren Cache in Chrome oder anderen Webtools, aktualisieren Sie die Favicon-Version und testen Sie die Anzeige auf einem Mobilgerät.

• Konflikte mit Themes und Plugins : Ein Standard-Favicon oder ein WordPress-Logo kann Ihr benutzerdefiniertes Website-Favicon überschreiben. Überprüfen Sie im Theme-Customizer, im Website-Logo-Block oder im WordPress-Favicon-Plugin, ob das Upload-Symbol und das vorhandene Bild korrekt konfiguriert sind.

Durch die Überprüfung dieser Schritte, das Aktualisieren der Theme-Einstellungen und das Testen mit Tools wie der Search Console können Sie sicherstellen, dass Ihr Website-Logo und Ihr Favicon in den Google-Suchergebnissen und auf verschiedenen Geräten einheitlich angezeigt werden.

3 einfache Methoden, um Ihrer WordPress-Website ein Favicon hinzuzufügen 

Nachdem Sie Ihr Favicon erhalten haben, besteht der nächste Schritt darin, es in Ihre WordPress-Website einzubinden. Wir stellen Ihnen drei verschiedene Ansätze vor, wie Sie diese Aufgabe reibungslos erledigen können:

Methode 1: WordPress-Favicon über den Customizer hochladen

Seit WordPress Version 4.3 verfügt jede WordPress-Website über eine integrierte Funktion für Website-Symbole. Dies vereinfacht das Hochladen und Zuschneiden eines Bildes als Favicon. Nutzer können so auf einfache und effiziente Weise ein Favicon in ihre WordPress-Website einbinden. 

Sie benötigen lediglich ein Bild mit Abmessungen von mindestens 512 × 512 Pixeln. WordPress kümmert sich um den Rest und übernimmt das Hochladen und Zuschneiden reibungslos. Um zu beginnen, navigieren Sie zu 

Darstellung → Passen Sie die Einstellungen in Ihrem WordPress-Dashboard an.

Mehr erfahren : Bildzuschnitt im Webdesign: Techniken & Werkzeuge

Wechseln Sie als Nächstes zur Registerkarte „Site-Identität“:

Scrollen Sie anschließend bis ganz nach unten, um den Abschnitt „Website-Symbol“ zu finden, und klicken Sie dann auf die Schaltfläche „Website-Symbol auswählen“:

Die Standardoberfläche der WordPress-Mediathek wird angezeigt. Sie können ein Bild aus Ihrer bestehenden Mediathek auswählen oder ein neues hochladen. Wenn Sie Ihr Favicon mit RealFaviconGenerator erstellt haben, stellen Sie sicher, dass das heruntergeladene Paket unkomprimiert ist.

Weiterführende Informationen : Wie lässt sich das WordPress-Uploadlimit beheben?

Sobald Sie ein Bild ausgewählt haben, das Ihnen gefällt, klicken Sie darauf und wählen Sie dann unten rechts „Auswählen“:

Falls Ihr Bild nicht den erforderlichen Abmessungen eines perfekten Quadrats entspricht (z. B. 512×512 Pixel), bietet WordPress Ihnen die Möglichkeit, es auf dem folgenden Bildschirm zuzuschneiden.

Markieren Sie mithilfe des Rahmens den Bildausschnitt, den Sie für Ihr Symbol verwenden möchten. Eine Vorschau des zugeschnittenen Fotos wird auf der rechten Seite der Benutzeroberfläche angezeigt.

Wenn Sie mit dem Erscheinungsbild zufrieden sind, klicken Sie auf „Bild zuschneiden“, um Ihre Auswahl zu bestätigen:

Das ist schon alles! Wählen Sie einfach „Speichern & Veröffentlichen“, um Ihr Favicon zu aktivieren. Falls Sie Ihr Favicon später aktualisieren möchten, können Sie jederzeit zu dieser Oberfläche zurückkehren.

Mehr erfahren : WordPress-Problem „Veröffentlichung fehlgeschlagen. Die Antwort ist keine gültige JSON-Antwort.“ beheben

Methode 2: WordPress-Favicon mit einem Plugin hinzufügen

Wenn Sie eine Lösung mit einem Plugin der integrierten WordPress-Funktion für Website-Icons vorziehen, können Sie sich für das weit verbreitete kostenlose Plugin Favicon von RealFaviconGenerator entscheiden (dasselbe Tool, das wir bereits erwähnt haben).

Dieses Plugin ist genauso benutzerfreundlich wie der native WordPress Customizer. Es bietet jedoch zusätzliche Kompatibilitätsfunktionen für verschiedene Geräte und App-Icons. Um es zu nutzen, installieren und aktivieren Sie das kostenlose Plugin einfach über Ihr WordPress-Dashboard

Nachdem Sie das Plugin aktiviert haben, navigieren Sie zu Design → Favicon, um Ihr Favicon-Set zu generieren. Wählen Sie einfach ein Bild aus Ihrer Auswahl oder laden Sie eines mit Abmessungen von mindestens 70×70 px (vorzugsweise 260×260 px) hoch:

Sobald Sie Ihr Bild ausgewählt haben, klicken Sie auf „Favicon generieren“. Durch Klicken auf diese Schaltfläche werden Sie von Ihrer WordPress-Website auf die Website RealFaviconGenerator weitergeleitet.

Lesen Sie auch : Warum sind Nischen-WordPress-Plugins für Ihr Unternehmen unerlässlich?

Scrollen Sie bis zum Ende der Seite und wählen Sie „Favicons und HTML-Code generieren“ (wie im vorherigen Abschnitt beschrieben). Während das Tool ausgeführt wird, leitet RealFaviconGenerator Sie nach und nach zu Ihrem WordPress-Dashboard zurück

Nach diesen Schritten ist Ihr Favicon konfiguriert und einsatzbereit. In der Benutzeroberfläche des Plugins können Sie eine Vorschau anzeigen, wie es auf verschiedenen Geräten aussehen wird:

Methode 3: WordPress-Favicon per FTP hinzufügen

Wenn Sie eine manuelle Vorgehensweise bevorzugen, können Sie Ihrer WordPress-Website ein Favicon über das File Transfer Protocol (FTP) oder den Dateimanager in Ihrem Hosting-cPanel hinzufügen.

Um manuell fortzufahren, müssen Sie außerdem Ihr Favicon-Bild erstellen. Folgen Sie dazu den Schritten, die weiter oben in diesem Beitrag beschrieben wurden. Für diese Demonstration verwenden wir das von RealFaviconGenerator generierte und heruntergeladene Paket. Die Anleitung gilt jedoch unabhängig vom verwendeten Tool.

So fügen Sie manuell ein WordPress-Favicon hinzu:

• Greifen Sie mit einem FTP-Client oder dem Dateimanager in Ihrem Hosting-cPanel auf die Dateien Ihrer Website zu.

• Suchen Sie das Stammverzeichnis Ihrer Website und laden Sie den Inhalt Ihres Favicon-Pakets (favicons.zip) hoch. Stellen Sie sicher, dass es sich im selben Verzeichnis wie Ihre wp-admin- und wp-content-Ordner befindet.

Nehmen Sie als Nächstes den von RealFaviconGenerator bereitgestellten Code und führen Sie entweder Folgendes aus:

• Verwenden Sie ein Plugin wie Insert Headers and Footers, um es zum Header Ihres Themes hinzuzufügen.
• Fügen Sie es direkt in den Bereich Ihres Themes ein.<head> Abschnitt durch Bearbeiten der header.php-Datei Ihres Themes.

Um Ihr Favicon zu schützen, falls Sie später das WordPress-Theme wechseln, sollten Sie das Plugin „Insert Headers and Footers“ verwenden. Installieren und aktivieren Sie das Plugin. Gehen Sie anschließend zu Einstellungen → Insert Headers and Footers und fügen Sie Ihren Code im Abschnitt „Scripts in the Header“ ein.

Vergessen Sie nicht, Ihre Änderungen zu speichern. Dann ist die Einrichtung abgeschlossen!

Abschluss

Wie bereits erwähnt, ist die einfachste Methode die Verwendung eines Favicon-Plugins, um sicherzustellen, dass jede Website in Ihrem Multisite-Netzwerk ein individuelles Favicon besitzt. Zwar ist es möglich, die Dateien Ihres Themes so zu bearbeiten, dass jede Netzwerkseite ein eigenes Favicon erhält, dieser Prozess ist jedoch deutlich komplexer als die Verwendung eines Plugins.

Zusätzlich können Sie die Verwendung eines Content Delivery Networks (CDN) zur Auslieferung Ihrer Favicon-Bilder in Betracht ziehen. Die drei in diesem Beitrag beschriebenen Methoden speichern Favicon-Bilder auf Ihrem Server. Die Nutzung eines CDN kann die Leistung Ihrer Website jedoch weiter optimieren.

Durch die Installation von Cloudflare oder eines ähnlichen Dienstes wie KeyCDN laden die Browser Ihrer Besucher Ihr Favicon vom CDN anstatt vom Server Ihrer Website. Wenn Sie ein Plugin wie CDN Enabler verwenden, wird die WordPress-Favicon-URL automatisch entsprechend angepasst.

Häufig gestellte Fragen zum Hinzufügen eines Favicons zu Ihrer WordPress-Website