Ein WordPress- Favicon ist ein kleines Symbol, das in Browser-Tabs oder Lesezeichen angezeigt wird. Sie dienen als visuelle Identifikatoren der Website und verbessern die Markenbekanntheit und das Benutzererlebnis .
Trotz ihrer geringen Größe sind Favicons wichtig für die Identitätsfeststellung einer Website. Eine gängige Annahme ist, dass es sich bei Favicons um rein dekorative Elemente handelt. Allerdings dienen sie in der WordPress-Entwicklung , die über die Ästhetik hinausgehen, indem sie die Navigation auf der Website unterstützen und die Markenassoziation stärken. Im weiteren Verlauf werden wir darüber nachdenken, welches ungenutzte Potenzial in Favicons steckt und wie sie die Browsing-Reise des Benutzers optimieren können.
5 Schritte zum Erstellen eines WordPress-Favicons
Das Erstellen eines benutzerdefinierten Favicons kann den Wiedererkennungswert und die Professionalität Ihrer Marke . Ein einzigartiges Favicon hilft Besuchern, die Registerkarten und Lesezeichen Ihrer Website schnell zu identifizieren und verbessert so die Benutzererfahrung.
Es verleiht Ihrer Website außerdem einen professionellen Touch und lässt sie etablierter und vertrauenswürdiger erscheinen. Die konsequente Verwendung des Symbols oder Logos Ihrer Marke als Favicon stärkt die Markenidentität über alle digitalen Touchpoints hinweg.
Lesen Sie mehr : So benennen Sie Ihre WordPress-Website um: 8 einfache Möglichkeiten
Befolgen Sie diese 5 einfachen Schritte, um Ihrer WordPress-Site ein Favicon hinzuzufügen:
Wählen oder erstellen Sie Ihr Favicon-Bild: Wählen Sie ein quadratisches Bild aus, das Ihre Marke repräsentiert, vorzugsweise ein Logo oder Symbol. Die ideale Größe beträgt 512 x 512 Pixel, Sie können jedoch auch ein kleineres Bild verwenden, dann wird die Größe angepasst und optimiert .
Weiterlesen : Bildauflösung verstehen
Verwenden Sie einen Online-Favicon-Generator: Besuchen Sie einen kostenlosen Online-Favicon-Generator wie RealFaviconGenerator oder Favicon. cc. Laden Sie Ihr Bild hoch und befolgen Sie die Anweisungen, um die erforderlichen 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 normalerweise mehrere Größen in .ico, .png und anderen Formaten enthält.
Weiterlesen : WebP vs. PNG: Welches Bildformat ist das richtige für Ihre Website?
Sind Sie bereit, das Branding und das Nutzungserlebnis Ihrer Website zu optimieren?
Beauftragen Sie unsere kreativ denkenden WordPress-Entwickler damit, WordPress-Favicons zu Ihrer Website hinzuzufügen und so eine sofortige Markenwiedererkennung in Browser-Tabs sicherzustellen!
Installieren Sie das Favicon-Plugin: Installieren und aktivieren Sie das Plugin „Favicon by RealFaviconGenerator“ auf Ihrer WordPress-Site. Mit diesem Plugin können Sie ganz einfach Ihr benutzerdefiniertes Favicon hochladen und festlegen.
Laden Sie Ihr Favicon hoch und aktivieren Sie es: 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 automatisch Ihr neues Favicon auf Ihrer WordPress-Site.
Lesen Sie mehr : So bewerben Sie Ihr WordPress-Plugin oder -Theme, um den Umsatz zu steigern
Wertvolle Tipps für die Erstellung von WordPress-Favicons
Beim Erstellen eines Favicons für Ihre WordPress-Site ist Professionalität von entscheidender Bedeutung. Auch wenn die Aufgabe unkompliziert erscheint, können einige Nuancen ihre Wirksamkeit erheblich beeinträchtigen.
-Support anbieten , stellen Sie sicher, dass Ihr Favicon nahtlos mit dem Branding und der Funktionalität Ihrer Website übereinstimmt. Hier sind fünf wertvolle Tipps, die sich aus Designprinzipien und technischen Spezifikationen ableiten und Sie bei der Erstellung Ihres Favicons unterstützen:
- Optimale Größe und Format: Streben Sie eine Favicon-Größe von 512 x 512 Pixel an, um eine hochwertige Auflösung zu erzielen. Während ein quadratisches Format Standard ist, ermöglicht WordPress rechteckige Bilder mit integrierter Zuschneidefunktion, um sie entsprechend anzupassen.
- Skalierbares Design: Auch wenn Ihr Favicon letztendlich als Quadrat mit 16 x 16 Pixeln angezeigt wird, sollten Sie darauf achten, dass es auch im verkleinerten Format klar und optisch ansprechend bleibt. Wählen Sie ein Bild, das sich gut auf kleinere Dimensionen übertragen lässt und dabei seine Essenz behält.
- Priorisieren Sie den visuellen Zusammenhalt: Ihr Favicon sollte sich nahtlos in die gesamte Designästhetik und das Branding Ihrer Website integrieren. Konsistenz in der Farbpalette, Typografie und Bildsprache fördert ein zusammenhängendes Benutzererlebnis über alle Berührungspunkte hinweg.
- Lesen Sie die Google-Richtlinien: Machen Sie sich mit den Empfehlungen von Google zum Erstellen und Verwenden von Favicons vertraut, um deren Darstellung in Suchmaschinenergebnissen und Browser-Tabs zu optimieren. Die Einhaltung dieser Richtlinien verbessert die Sichtbarkeit und Benutzerfreundlichkeit Ihrer Website.
- Plattformübergreifend testen: Bevor Sie Ihr Favicon fertigstellen, testen Sie dessen Anzeige auf verschiedenen Browsern und Geräten, um Einheitlichkeit und Lesbarkeit sicherzustellen. Die Durchführung gründlicher plattformübergreifender Tests garantiert ein nahtloses Benutzererlebnis, unabhängig von der Anzeigeumgebung.
Weiterlesen : Responsives WordPress-Webdesign: Der Schlüssel zur Konvertierung mobiler Besucher
3 Möglichkeiten, Ihrer Website ein WordPress-Favicon hinzuzufügen
Nachdem Sie Ihr Favicon erhalten haben, besteht der nächste Schritt darin, es in Ihre WordPress-Website zu integrieren. Lassen Sie uns drei verschiedene Ansätze zur nahtlosen Bewältigung dieser Aufgabe untersuchen:
Hochladen des WordPress-Favicons über den Customizer
Seit WordPress-Version 4.3 verfügt jede WordPress-Site über eine integrierte Site-Icon-Funktion, die das Hochladen und Zuschneiden eines Bildes vereinfacht, um es als Favicon zu verwenden. Diese Funktion bietet Benutzern eine einfache und effiziente Methode zum Einbinden eines Favicons in ihre WordPress-Site.
Alles, was Sie brauchen, ist ein Bild mit einer Größe von mindestens 512 x 512 Pixeln, und WordPress kümmert sich um den Rest und wickelt den Upload- und Zuschneidevorgang nahtlos ab. Navigieren Sie zunächst zu
Erscheinungsbild → Anpassen in Ihrem WordPress-Dashboard.
Erfahren Sie mehr : Bildzuschnitt im Webdesign: Techniken und Tools
Fahren Sie als Nächstes mit der Registerkarte „Site-Identität“ fort:
Scrollen Sie anschließend nach unten, um den Abschnitt „Site-Symbol“ zu finden, und klicken Sie dann auf die Schaltfläche „Site-Symbol auswählen“:
Die Standardoberfläche der WordPress-Medienbibliothek wird angezeigt. Sie können ein Bild aus Ihrer vorhandenen Medienbibliothek auswählen oder ein neues hochladen. Wenn Sie Ihr Favicon mit RealFaviconGenerator generiert haben, stellen Sie sicher, dass das heruntergeladene Paket unkomprimiert ist.
Weiterführende Literatur : Wie behebe ich das WordPress-Upload-Limit?
Wenn Sie ein gewünschtes Bild ausgewählt haben, klicken Sie darauf und wählen Sie dann „Auswählen“ in der unteren rechten Ecke:
Wenn Ihr Bild nicht den erforderlichen Abmessungen eines perfekten Quadrats entspricht (z. B. 512 x 512 Pixel), bietet WordPress auf dem folgenden Bildschirm die Möglichkeit, es zuzuschneiden.
Nutzen Sie das Feld, um den Abschnitt des Bildes zu umreißen, den Sie für Ihr Symbol verwenden möchten. Auf der rechten Seite der Benutzeroberfläche wird eine Vorschau des zugeschnittenen Fotos angezeigt.
Wenn Sie mit dem Erscheinungsbild zufrieden sind, klicken Sie auf „Bild zuschneiden“, um Ihre Auswahl zu bestätigen:
Das ist alles! Wählen Sie einfach „Speichern und veröffentlichen“, um Ihr Favicon zu aktivieren. Wenn Sie Ihr Favicon später aktualisieren möchten, können Sie jederzeit zu dieser Oberfläche zurückkehren.
Mehr wissen : WordPress „Veröffentlichung fehlgeschlagen“ beheben. Die Antwort ist keine gültige JSON-Antwort.“ Ausgabe
WordPress Favicon mit einem Plugin hinzufügen
Wenn Sie einen Plugin-basierten Ansatz gegenüber der integrierten WordPress-Site-Icon-Funktion bevorzugen, können Sie sich für ein weit verbreitetes kostenloses Plugin namens Favicon von RealFaviconGenerator entscheiden (dasselbe Tool, das wir zuvor erwähnt haben).
Dieses Plugin ist im Vergleich zum nativen WordPress Customizer ebenso benutzerfreundlich. Es bietet jedoch zusätzliche Kompatibilitätsfunktionen für verschiedene Geräte und App-Symbole. Um es zu nutzen, installieren und aktivieren Sie einfach das kostenlose Plugin über Ihr WordPress-Dashboard:
Navigieren Sie nach der Aktivierung des Plugins zu „Darstellung“ → „Favicon“, um Ihren Favicon-Satz zu generieren. Wählen Sie einfach ein Bild aus Ihrer Auswahl aus oder laden Sie eines mit einer Größe von mindestens 70×70 px (vorzugsweise 260×260 px) hoch:
Nachdem Sie Ihr Bild ausgewählt haben, klicken Sie auf „Favicon generieren“. Wenn Sie auf diese Schaltfläche klicken, werden Sie von Ihrer WordPress-Site zur RealFaviconGenerator-Website weitergeleitet.
Lesen Sie auch : Warum sind Nischen-WordPress-Plugins für Ihr Unternehmen unerlässlich?
Scrollen Sie nach unten auf der Seite und wählen Sie „Generieren Sie Ihre Favicons und HTML-Code“ (wie im vorherigen Abschnitt beschrieben). Während das Tool ausgeführt wird, führt Sie RealFaviconGenerator schließlich zu Ihrem WordPress-Dashboard zurück:
Nach diesen Schritten wird Ihr Favicon konfiguriert und für die Verwendung vorbereitet. In der Benutzeroberfläche des Plugins können Sie eine Vorschau anzeigen, wie es auf verschiedenen Geräten angezeigt wird:
WordPress Favicon mit FTP hinzufügen
Wenn Sie einen manuellen Ansatz bevorzugen, fügen Sie über das File Transfer Protocol (FTP) oder den Dateimanager in Ihrem Hosting-cPanel ein Favicon zu Ihrer WordPress-Site hinzu.
Um manuell fortzufahren, müssen Sie außerdem Ihr Favicon-Bild erstellen, indem Sie die oben in diesem Beitrag beschriebenen Schritte befolgen. Für diese Demonstration verwenden wir das von RealFaviconGenerator generierte und heruntergeladene Paket. Diese Anweisungen gelten 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 Site zu.
- Suchen Sie das Stammverzeichnis Ihrer Website und laden Sie den Inhalt Ihres Favicon-Pakets (favicons.zip) hoch. Stellen Sie sicher, dass sie neben Ihren Ordnern „wp-admin“ und „wp-content“ abgelegt werden.
- Nehmen Sie als Nächstes den von RealFaviconGenerator bereitgestellten Code und entweder:
- Verwenden Sie ein Plugin wie „Kopf- und Fußzeilen einfügen“, um es in die Kopfzeile Ihres Themes einzufügen.
- Fügen Sie es direkt in Ihr Theme ein<head> Abschnitt, indem Sie die Datei header.php Ihres Themes bearbeiten.
Sie sollten das Plugin „Kopf- und Fußzeilen einfügen“ verwenden, um Ihr Favicon zu schützen, falls Sie später das WordPress-Theme wechseln. Installieren und aktivieren Sie das Plugin. Navigieren Sie dann zu Einstellungen → Kopf- und Fußzeilen und fügen Sie Ihren Code in die Skripte im Abschnitt „Kopfzeile“ ein.
Stellen Sie sicher, dass Sie Ihre Änderungen speichern. Dann ist Ihre Einrichtung abgeschlossen!
Abschluss
Wie bereits erwähnt, besteht der einfachste Ansatz darin, ein Favicon-Plugin zu verwenden, um sicherzustellen, dass jede Site in Ihrem Multisite-Netzwerk über ein unverwechselbares Favicon verfügt. Es ist zwar möglich, die Dateien Ihres Themes zu ändern, um eindeutige Favoriten für jede Netzwerkseite zu aktivieren, dieser Vorgang ist jedoch erheblich komplexer als ein Plugin.
Darüber hinaus können Sie erwägen, ein Content Delivery Network (CDN) für die Bereitstellung Ihrer Favicon-Bilder zu nutzen. Die drei in diesem Beitrag besprochenen Methoden speichern Favicon-Bilder auf Ihrem Server. Allerdings kann die Nutzung eines CDN die Leistung Ihrer Website weiter optimieren.
Durch die Installation von Cloudflare oder einem ähnlichen Dienst wie KeyCDN ruft der Browser der Besucher Ihr Favicon vom CDN statt vom Server Ihrer Website ab. Wenn Sie ein Plugin wie CDN Enabler verwenden, sollte es Ihre WordPress-Favicon-URL automatisch neu konfigurieren, um sie an die oben genannten Methoden anzupassen.
