Favicons sind am bekanntesten als die kleinen Symbole, die neben den Namen von Webseiten in den Browser-Tabs angezeigt werden. Aber während sie dort ihren Ursprung haben, wird dein WordPress-Favicon auch an anderen Stellen verwendet, z.B. als Lesezeichen im Browser, iOS-Startbildschirm-Buttons und mehr.
Als solches ist es ein wichtiger Teil deines Brandings. Wenn es richtig eingesetzt wird, kann dein Favicon oder ‚Webseiten-Symbol‘ den Benutzern helfen, dein Unternehmen leicht zu identifizieren. Es kann dazu beitragen, den Wiedererkennungswert der Marke zu erhöhen und sogar die User Experience (UX) der Webseite zu verbessern.
In diesem Artikel besprechen wir die Vorteile der Verwendung eines Favicons auf einer WordPress Webseite. Dann erklären wir dir, wie du ein Favicon erstellen kannst und führen dich durch drei einfache Möglichkeiten, es zu deiner Webseite hinzuzufügen.
Zum Schluss werden wir über ein paar WordPress Favicon-Tipps und Best Practices reden. Lasst uns anfangen!
Die Vorteile der Verwendung eines WordPress-Favicons
Wenn du jemals zu viele Tabs auf einmal geöffnet hattest (schuldig!), kannst du wahrscheinlich den Nutzen eines Favicons schätzen. Ein Favicon macht es den Benutzern leicht, deine Webseite schnell zu identifizieren, wenn sie mehrere Tabs in ihrem Browser geöffnet haben:
Abhängig von der Anzahl der geöffneten Tabs ist der Titel deiner Webseite nicht immer sichtbar. Daher kann das Hinzufügen eines Favicons helfen, das UX für deine Besucher zu verbessern.
Die Verwendung eines WordPress-Favicons kann nicht nur den Wiedererkennungswert der Marke erhöhen, sondern auch die Professionalität und Glaubwürdigkeit deiner Webseite steigern. Dies wiederum kann dazu beitragen, das Vertrauen der Kunden zu stärken.
Außerdem wird dein Favicon als Symbol angezeigt, wenn jemand deine Webseite auf dem Startbildschirm seines mobilen Geräts speichert. Die Verwendung deines Markenlogos oder ähnlicher Bilder kann dazu beitragen, deine Webseite leichter wiederzuerkennen und insgesamt eine einheitliche Ästhetik zu schaffen.
Wie man ein WordPress Favicon erstellt
Wenn du bereits ein Favicon hast, das du verwenden kannst (die meisten Unternehmen verwenden ihr Logo oder eine Variante davon), kannst du gerne zum nächsten Abschnitt springen. Ansonsten sehen wir uns an, wie du dein Favicon-Bild erstellen kannst.
In der Vergangenheit musstest du eine bestimmte ICO-Datei für dein Favicon verwenden. Heutzutage unterstützen jedoch alle modernen Browser die Verwendung von ICO-, PNG- und GIF-Dateien für dein Favicon. JPEG wird ebenfalls weitgehend unterstützt (lies: JPG vs. JPEG), aber nicht in allen Versionen des Internet Explorers, was es weniger ideal für die Verwendung von Favicons macht.
Wenn du dich mit Photoshop auskennst, kannst du es benutzen, um manuell ein Favicon zu erstellen. Oft ist es jedoch einfacher, ein einfaches Cloud-Tool zu benutzen, um ein Favicon-Set aus einem bestehenden Bild zu erstellen.
RealFaviconGenerator (die Cloud-basierte Version des Plugins, die wir später besprechen werden) ist eine großartige Option, weil:
- Es erstellt auch App-Icons.
- Es stellt Favicon-Icons sowohl im PNG- als auch im ICO-Format zur Verfügung.
- Du kannst dein Favicon anpassen, nachdem du dein Bild hochgeladen hast.
- Alles was du tun musst, ist den Code einzufügen, den das Plugin dir gibt.
Andere nützliche Favicon-Generatoren sind:
- Favicon.cc, mit der du ein Favicon von Grund auf neu erstellen oder ein bestehendes Bild hochladen kannst.
- Favicon Generator, der ähnlich wie RealFaviconGenerator funktioniert.
Um den RealFaviconGenerator zu benutzen, beginne mit dem Hochladen des Bildes, das du benutzen möchtest, indem du auf „Wähle dein Favicon-Bild“ klickst:
Auf dem nächsten Bildschirm kannst du spezifische Details zu deinem Favicon-Set konfigurieren (falls gewünscht). Wenn du fertig bist, scrolle nach unten und klicke auf „Favicons und HTML-Code generieren„:
Klicke auf der nächsten Seite auf Favicon-Paket, um deine Favicon-Bilder herunterzuladen:
Lass diese Seite unbedingt offen, wenn du vorhast, das Favicon manuell zu deiner Webseite hinzuzufügen.
Tipps zum Erstellen eines WordPress-Favicons
Es gibt ein paar Design- und Formatierungstipps, die es wert sind, erwähnt und überprüft zu werden, bevor du dein Favicon erstellst. Am wichtigsten ist, dass die empfohlene Größe für Favicons 512×512 Pixel beträgt.
Dein WordPress-Favicon wird zwar ein perfektes Quadrat sein, du kannst aber auch ein rechteckiges Bild verwenden und es entweder vor oder nach dem Hochladen in WordPress zuschneiden. WordPress kommt mit einer eingebauten Zuschneidefunktion für Webseiten-Icons, wenn du sie über den Customizer (durch den wir dich in Kürze führen werden) hinzufügst.
Außerdem ist es wichtig zu beachten, dass dein Favicon als ein 16×16 px Quadrat angezeigt wird. Deshalb solltest du ein Bild auswählen, das gut aussieht, wenn es auf diese Maße verkleinert wurde. Obwohl es in dieser Größe angezeigt wird, sollte es immer noch eine Höhe und Breite von mindestens 512 px haben.
Schließlich ist es eine kluge Idee, einige der Google-Richtlinien für die Erstellung und Verwendung von Favicons durchzusehen. Dies wird dazu beitragen, dass dein Icon in Suchmaschinen und Browser-Tabs optimal angezeigt wird.
Wie du ein WordPress Favicon zu deiner Webseite hinzufügst (3 einfache Optionen)
Sobald du dein Favicon hast, kannst du es zu deiner WordPress Webseite hinzufügen. Lass uns einen Blick auf drei Methoden werfen, mit denen du das tun kannst.
1. Den WordPress Customizer benutzen, um dein Favicon hochzuladen
Seit WordPress 4.3 verfügen alle WordPress Webseiten über eine Website Icon Funktion, die es einfach macht, ein Bild hochzuladen und zuzuschneiden, um es als Favicon zu verwenden. Für die meisten Benutzer ist dies die einfachste und schnellste Methode, um ein Favicon zu WordPress hinzuzufügen.
Alles, was du brauchst, ist ein Bild, das mindestens 512×512 Pixel groß ist. WordPress übernimmt den Rest des Prozesses. Um anzufangen, gehe zu Appearance → Anpassen in deinem WordPress-Dashboard:
Navigiere von dort zur Registerkarte Identität der Webseite:
Als Nächstes schaue unten nach dem Abschnitt über das Symbol der Webseite und klicke auf die Schaltfläche Symbol der Webseite auswählen:
Das normale WordPress Media Library Interface wird sich öffnen. Du kannst entweder ein bestehendes Bild in deiner Mediathek auswählen oder ein neues Bild hochladen. Wenn du RealFaviconGenerator benutzt hast, um dein Favicon zu erstellen, stelle sicher, dass das Paket, das du heruntergeladen hast, entpackt ist.
Wenn du ein Bild hast, das dir gefällt, klicke es an und wähle Auswählen in der unteren rechten Ecke:
Wenn dein Bild nicht bereits ein perfektes Quadrat ist (z.B. 512×512 px), gibt dir WordPress die Möglichkeit, es auf dem nächsten Bildschirm zuzuschneiden.
Benutze die Box, um den Teil des Bildes zu markieren, den du für dein Icon verwenden möchtest. Auf der rechten Seite des Fensters siehst du eine Vorschau, wie dein zugeschnittenes Bild aussehen wird.
Wenn du mit dem Aussehen zufrieden bist, klicke auf Bild beschneiden, um deine Wahl abzuschließen:
Das ist es! Alles was du tun musst, ist Speichern & Veröffentlichen auswählen, um dein Favicon live zu schalten. Wenn du dein Favicon in Zukunft ändern möchtest, kannst du zu diesem Interface zurückkehren.
2. Installiere ein Plugin um dein WordPress Favicon hinzuzufügen
Wenn du eine Plugin-Lösung der nativen WordPress Webseite bevorzugst, kannst du ein populäres kostenloses Plugin namens Favicon by RealFaviconGenerator (das Cloud-basierte Tool, das wir vorhin besprochen haben) verwenden.
Dieses Plugin ist genauso einfach zu benutzen wie der native WordPress Customizer. Es bietet jedoch zusätzliche Kompatibilitätsoptionen für verschiedene Geräte und App-Icons. Um es zu benutzen, installiere und aktiviere das kostenlose Plugin über dein WordPress Dashboard:
Sobald du das Plugin aktiviert hast, gehe zu Appearance → Favicon, um dein Favicon-Set zu erstellen. Alles was du tun musst, ist ein Bild auszuwählen oder hochzuladen, das mindestens 70×70 px (idealerweise 260×260 px) groß ist:
Nachdem du dein Bild ausgewählt hast, klicke auf Favicon generieren. Wenn du diesen Button auswählst, bringt dich das Plugin außerhalb deiner WordPress Webseite auf die RealFaviconGenerator Webseite.
Scrolle unten auf der Webseite nach unten und wähle „Generate your Favicons and HTML code“ (siehe voriger Abschnitt). Während das Tool funktioniert, schickt dich der RealFavicon Generator zurück zu deinem WordPress-Dashboard:
Danach ist dein Favicon eingerichtet und einsatzbereit. Du kannst dir im Interface des Plugins eine Vorschau ansehen, wie es auf verschiedenen Geräten aussehen wird.
3. Manuelles Hinzufügen deines Favicons per FTP
Wenn du es vorziehst, Dinge manuell zu erledigen, ist es möglich, ein Favicon zu deiner WordPress Webseite via File Transfer Protocol (FTP) oder File Manager hinzuzufügen, wenn dein Host cPanel benutzt.
Wenn du diese Methode verwendest, musst du auch dein eigenes Favicon-Bild erstellen. Das kannst du tun, indem du den Schritten folgst, die wir weiter oben in diesem Beitrag beschrieben haben.
Für diese Demonstration werden wir das Paket verwenden, das wir erstellt und von RealFaviconGenerator heruntergeladen haben. Die Anweisungen gelten auch, wenn du ein anderes Tool zum Erstellen deines Favicons benutzt hast.
Um ein WordPress-Favicon manuell zu deiner Webseite hinzuzufügen, musst du Folgendes tun:
- Greife auf die Dateien deiner Webseite zu, entweder über einen FTP-Client oder den Dateimanager in deinem Host cPanel.
- Öffne das Hauptverzeichnis deiner Webseite und lade den Inhalt deines Favicon-Pakets hoch (favicons.zip)
Die Dateien sollten sich im selben Ordner wie deine wp-admin und wp-content Ordner befinden. Als nächstes nimmst du den Code RealFaviconGenerator, den du zuvor erhalten hast, und entweder
- Benutze ein Plugin wie „Insert Headers and Footers„, um es zur Kopfzeile deines Themes hinzuzufügen.
- Füge es direkt in die <head> Sektion deines Themes ein, indem du die header.php Datei deines Themes bearbeitest.
Die Verwendung des Plugins Kopf- und Fußzeilen einfügen ist optimal, da es dafür sorgt, dass du dein Favicon nicht verlierst, wenn du später das WordPress Theme wechselst.
Um dies zu tun, installiere und aktiviere das Plugin Kopf- und Fußzeilen einfügen. Gehe dann zu Einstellungen → Kopf- und Fußzeilen einfügen und füge deinen Code in die Sektion Scripts in Header ein:
Stelle sicher, dass du deine Änderungen speicherst. Dann bist du fertig!
Zusätzliche Tipps zur Verwendung von WordPress-Favicons
Wenn du möchtest, dass jede Webseite in deinem Multisite-Netzwerk ein einzigartiges Favicon hat, ist der einfachste Weg, dies zu erreichen, ein Favicon-Plugin wie das oben genannte zu verwenden. Es ist zwar möglich, die Dateien deines Themes so zu bearbeiten, dass für jede Webseite des Netzwerks ein eigenes Favicon erstellt werden kann, aber der Prozess ist wesentlich komplizierter als bei einem Plugin.
Du könntest auch ein Content Delivery Network (CDN) verwenden, um deine Favicon-Bilder bereitzustellen. Die drei Methoden, die wir in diesem Beitrag besprochen haben, speichern alle deine Favicon-Bilder auf deinem Server. Du kannst deine Webseite jedoch noch weiter optimieren, indem du ein CDN verwendest, um diese Bilder auszuliefern.
Wenn du Cloudflare oder einen Service wie KeyCDN installierst, werden die Browser der Besucher dein Favicon von deinem CDN laden, anstatt vom Server deiner Webseite. Wenn du ein Plugin wie CDN Enabler verwendest, sollte es automatisch deine WordPress Favicon-URL neu schreiben, damit es mit den oben genannten Methoden funktioniert.
Zusammenfassung
Ein WordPress Favicon kann helfen, deine Markenbekanntheit zu steigern und das UX für die Besucher deiner Webseite zu verbessern. Glücklicherweise hast du mehrere Optionen zur Auswahl, die das Hinzufügen eines Favicons einfach machen.
Die drei Hauptmethoden, die du benutzen kannst, um ein WordPress Favicon zu deiner Webseite hinzuzufügen, sind:
- Benutze den WordPress Customizer, um ein Webseite Icon hochzuladen.
- Installieren eines Plugins, wie z.B. Favicon von RealFaviconGenerator.
- Manuelles Hinzufügen eines Favicons über einen FTP-Client oder deinen Dateimanager.
