So fügen Sie Ihrer WordPress-Site ein Favicon hinzu

Veröffentlicht: 2020-05-06

Favicon oder Favoritensymbol ist ein kleines Bild neben einem Seitentitel auf einem Browser-Tab. Dieses Site-Symbol spielt eine wesentliche Rolle bei der Einrichtung Ihrer Website-Identität.

Wenn Sie eine professionelle Website besitzen, sollten Sie Favicons verwenden, falls Sie dies noch nicht getan haben. Hier besprechen wir die Bedeutung und die Dinge, die bei der Vorbereitung zu beachten sind. Wir zeigen Ihnen auch drei Methoden, wie Sie ein Favicon zu Ihrer WordPress-Website hinzufügen .

Warum sollten Sie ein Favicon verwenden?

Um die Bedeutung von Favicons zu demonstrieren, sehen Sie sich den Screenshot unten an.

Beispiel für ein Lieblingssymbol

Wie Sie sehen, verfügt jede Registerkarte über unterschiedliche Symbole, die die von Ihnen besuchten Webseiten unterscheiden. Wenn Sie in Ihrem Browser eine Reihe von Registerkarten haben, helfen Ihnen Favicons, diese Seiten zu identifizieren. Als Ergebnis schafft es eine bessere Benutzererfahrung.

Ein Favicon ist nicht nur in Browser-Tabs nützlich. Wenn Benutzer ihrem mobilen Startbildschirm oder Desktop eine Seitenverknüpfung hinzufügen, wird das Favicon auf dem Bildschirm angezeigt. Darüber hinaus können Favicons ähnlich wie ein Logo funktionieren. Wenn die Leute es sehen, werden sie Ihre Website und Marke sofort erkennen.

Vorbereiten Ihres Favicon

Der schnellste und einfachste Weg, ein Favicon zu erstellen, ist die Verwendung von Favicon-Generatoren. Es sind keine technischen Kenntnisse erforderlich, da die meisten von ihnen gebrauchsfertige Bilder bereitstellen, die Sie nur ein wenig anpassen müssen.

Ziehen Sie in Erwägung, auch das Logo Ihrer Marke zu verwenden, aber stellen Sie sicher, dass es auf ein quadratisches Symbol zugeschnitten werden kann. Es muss auch so einfach aussehen, dass man es trotz seiner geringen Größe deutlich sehen kann. Verwenden Sie Bildbearbeitungsprogramme wie Photoshop, DesignWizard oder GIMP, um Ihr Logo zu ändern und die Größe zu ändern.

Für das Bildformat wird empfohlen, eine ICO-Datei zu verwenden, da die meisten Browser dies unterstützen. Allerdings können Sie nicht mit jeder Fotobearbeitungssoftware ICO-Dateien erstellen. Daher ist es besser, Online- Favicon- Generatoren zu verwenden, die diese Option bieten. Oder speichern Sie Ihr Bild als PNG und verwenden Sie einen Online-ICO-Konverter. Normalerweise muss die Größe 16 x 16 Pixel betragen.

Wenn Sie die Site Icon-Funktion von WordPress 4.3 verwenden, müssen Sie sich keine Gedanken über die vorherige Konvertierung Ihres Bildes machen. Sie können jetzt jede beliebige Bilddatei als Ihr Favicon hochladen. Stellen Sie in jedem Fall sicher, dass es nach dem Hochladen in jedem Browser angezeigt werden kann.

3 Möglichkeiten, Ihrer WordPress-Site ein Favicon hinzuzufügen

Es gibt drei Methoden, mit denen Sie Ihrer Website ein Favicon hinzufügen können. Wählen Sie die von Ihnen bevorzugte Option.

Option 1: WordPress-Anpasser

Für Benutzer von WordPress 4.3 ist die Verwendung der Site Icon-Funktion die bequemste und empfohlene Methode, um Ihr Favicon hinzuzufügen.

Bereiten Sie ein quadratisches Bild mit einer Höhe und Breite von mindestens 512 Pixeln vor. Die Datei sollte 128 MB nicht überschreiten. Wenn Sie ein rechteckiges Bild haben, können Sie es beim Hochladen Ihres Favicons zuschneiden.

Wenn Ihr Bild fertig ist, gehen Sie wie folgt vor:

1. Öffnen Sie Ihr WordPress-Dashboard, gehen Sie zu Erscheinungsbild und wählen Sie Anpassen.

2. Suchen Sie nach einer Registerkarte, die Site-Symbol enthält. Die meisten Themes haben es in Site Identity, aber einige benennen die Registerkarte um in Site-Titel, Markenname, Site-Logo und Header usw.

Anpassen der Seitenidentität

3. Wählen Sie Site-Symbol und wählen Sie ein Bild aus Ihrer Medienbibliothek oder laden Sie eine neue Datei hoch.

4. Sie werden zum Crop Image Editor geleitet. Passen Sie Position und Proportionen nach Belieben an.

Bild zuschneiden

5. Herzlichen Glückwunsch! Sie sollten ein neues Favicon haben. Wenn es noch nicht erschienen ist, empfiehlt WordPress, Ihren Cache zu leeren und Ihren Browser neu zu starten.

Option 2: Verwenden von Plugins

Wenn Sie Ihr WordPress nicht aktualisiert haben, können Sie Plugins verwenden, um ein Favicon hinzuzufügen .

Einige Plugins bieten Ihnen mehr Kontrolle darüber, wie Ihr Favicon auf Nicht-Desktop-Geräten aussieht. Favicon von RealFaviconGenerator bietet Ihnen beispielsweise die Möglichkeit, das Aussehen Ihres Symbols in verschiedenen Betriebssystemen anzupassen.

Um das Plugin zu verwenden, gehen Sie wie folgt vor:

  1. Gehen Sie zu Plugins und klicken Sie in Ihrem WordPress-Dashboard auf Neu hinzufügen.
  2. Suchen Sie nach Favicon von RealFaviconGenerator, dann installieren und aktivieren Sie das Plugin.
  3. Wählen Sie Erscheinungsbild und klicken Sie im Dashboard auf Favicon . Laden Sie ein quadratisches Bild hoch, das größer als 70 x 70 Pixel ist. Idealerweise sollte das Bild 260 x 260 Pixel oder mehr groß sein.
  4. Sie werden zu einer Seite weitergeleitet, auf der Sie das Aussehen Ihres Favicon in iOS, Android Chrome, Windows und Safari festlegen können. Klicken Sie dann auf Favicons und HTML-Code generieren.
Favicon für Android Chrome

Abgesehen von diesem Plugin können Sie All in One Favicon verwenden. Mit dem Plugin können Sie verschiedene Favicons für das Backend und das Frontend einstellen. Auf diese Weise werden Sie nicht verwirrt, wenn Ihre Website und Ihr Dashboard geöffnet sind.

Option 3: Manuelle Installation über FTP-Client

Eine andere Methode besteht darin, Ihr Favicon manuell auf Ihre WordPress-Website hochzuladen. Dazu müssen Sie Ihre Website mit einem FTP-Client wie FileZilla verbinden. Ihr Symbol kann entweder im ICO- oder PNG-Format vorliegen und sollte Favicon heißen.

Es wird außerdem dringend empfohlen, ein untergeordnetes Design zu erstellen, um diese Methode zu verwenden. Auf diese Weise werden Ihre Codeänderungen nicht entfernt, wenn es ein neues Design-Update gibt.

Wenn Ihre Site verbunden ist, führen Sie diese Schritte aus:

  1. Laden Sie Ihre Favicon-Datei über Ihren FTP-Client in Ihren aktuellen Themenordner hoch . Wenn Sie ein untergeordnetes Thema verwenden, laden Sie es in diesen Ordner hoch.
  2. Fügen Sie dieselbe Datei zu Ihrem Stammverzeichnis hinzu. Es sollte sich im selben Ordner wie Ihr wp-content und wp-admin befinden. Dies soll sicherstellen, dass Ihre Favicons in Feedreadern angezeigt werden können.
  3. Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild und klicken Sie auf Theme-Editor.
  4. Wählen Sie nun die Theme-Header-Datei aus und fügen Sie diesen Code unten in das Tag ein, wenn Sie eine ICO-Datei haben:

<link rel=“Verknüpfungssymbol“ href=“<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Ersetzen Sie den Teil nach href= bis /favicon.ico durch den Pfad zu Ihrem Root-Verzeichnis. Es würde so aussehen:

<link rel=“Verknüpfungssymbol“ href=“<http://www.yourdomainname.com/favicon.ico“ />

Wenn Sie eine PNG-Datei haben, ersetzen Sie einfach das Dateiformat. Dann Datei aktualisieren.

5. Aktualisieren Sie Ihre Website. Wenn es funktioniert, sollten Sie jetzt ein neues Favicon haben.

Vergessen Sie bei allen Methoden nicht, das Erscheinungsbild Ihres Favicon auf mobilen Geräten zu überprüfen. Öffnen Sie Ihre Website über Ihren mobilen Browser und fügen Sie die Website Ihrem Startbildschirm hinzu.

Obwohl sie klein sind, können Favicons den Wiedererkennungswert erhöhen und ein besseres Benutzererlebnis schaffen. Sie können Online- Favicon- Generatoren oder eine beliebige Bildbearbeitungssoftware Ihrer Wahl verwenden, um Ihr eigenes Favicon zu erstellen. Wenn Sie bereits eine haben, fügen Sie sie einfach mit einer der drei oben genannten Methoden zu Ihrer WordPress-Website hinzu. Viel Glück!

Lesen Sie mehr Beliebte Plugins und Themes für WordPress LMS-Websites