Möchten Sie herausfinden, wie Sie ganz einfach ein WordPress-Favicon hinzufügen können? Finden Sie es heraus, indem Sie diesem Tutorial folgen

Ein Favicon ist ein kleines quadratisches Symbol, das Ihre Website darstellt. Es erscheint normalerweise neben dem Website-Titel im Browser-Tab. Ein Favicon erscheint auch in Ihrem Browserverlauf, in Lesezeichen und überall dort, wo Ihre Website eine visuelle Identität benötigt.

Fügen Sie ein WordPress-Favicon hinzu

Dieses kleine Detail ist für Ihre Online-Identität unerlässlich. Wir besprechen das WordPress-Favicon und wie Sie eines zu Ihrer WordPress-Website hinzufügen können.

Aber bevor wir anfangen, wenn Sie WordPress noch nie installiert haben, finden Sie es heraus Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Warum das Hinzufügen eines Favicons zu Ihrer Website wichtig ist

Ein Favicon ist im Grunde Ihre Website-ID; daher würde Ihr Logo eher dort oben erscheinen. Es ist in der Tat ein Fehler, seine Präsenz auf Ihrer Website zu ignorieren.

Hier sind einige Gründe, warum ein Favicon für Ihre Website so wichtig ist.

  • Zeichnet sich als Anerkennung von Marke
    Die meisten Benutzer neigen dazu, mehrere Tabs in ihrem Browser zu öffnen. Ohne Favicon können Sie nur den Seiten- oder Beitragsnamen im Browser-Tab sehen. Wenn Sie mehr als 20 Registerkarten öffnen, werden diese außerdem kürzer und es ist schwierig zu erkennen, welche Registerkarte welche Website darstellt.
    Ein Favicon hilft Benutzern, jeden Tab leichter zu erkennen. Wenn Ihr Favicon auffällt, verbessert es nicht nur Ihre Sichtbarkeit, sondern auch Ihre Benutzererfahrung.
  • Vertrauen aufbauen
    Ohne Favicon hinterlassen Sie bei Ihren Nutzern einen schlechten ersten Eindruck. Eine Website ohne Favicon sieht nicht professionell aus.
    Wenn Sie eine Website nur für das tägliche Bloggen erstellen, ist es möglicherweise irrelevant, kein Favicon zu haben. Es wird jedoch unerlässlich, wenn Sie eine Unternehmenswebsite oder einen Online-Shop verwalten.
    Ihre Besucher vertraut keiner Transaktion auf einer Website, die nicht professionell aussieht.
  • Verbesserung des mobilen Erlebnisses
    Dies ist die Ära des mobilen Erlebnisses. Eine reaktionsschnelle Website reicht möglicherweise nicht aus, um mobile Benutzer zu begeistern, vor allem, weil Web-Apps derzeit auf dem Vormarsch sind.
    Benutzer können einfach eine Website auf dem Startbildschirm ihres Telefons mit einem Lesezeichen versehen. Kein Eintippen von URLs mehr!
    In dieser Situation hilft Ihnen ein gut gemachtes Favicon auf zwei verschiedene Arten. Erstens wird das Favicon als App-Symbol verwendet und zweitens werden sich Personen, die Ihre Web-App verwenden, an Ihr Symbol erinnern. Daher wird Ihr Favicon mit Ihrer Website verknüpft.

Favicon-Erstellung für WordPress

Normalerweise ist Ihr Favicon Ihr Markenlogo. Auch für das Bild empfiehlt WordPress, ein Quadrat zu verwenden 512px x 512px.

Du kannst ein größeres Bild verwenden, aber WordPress wird höchstwahrscheinlich verlangen, dass du es zuschneidest, um es an die Größe anzupassen.

Um ein Bild mit der genauen Größe von zu erstellen 512 Pixel x 512 Pixel, Sie können jede Bildbearbeitungssoftware wie z als Adobe Photoshop (bezahlt) und Gimpe (kostenlos) oder Favicon-Generatoren

Obwohl Sie eine Hintergrundfarbe für Ihr WordPress-Favicon auswählen können, wird Transparenz bevorzugt. Sie können die Formate verwenden Jpeg,.ico. Gif ou . Png (vergewissern Sie sich nur, dass Sie das Format verwenden . Png wenn Sie einen transparenten Hintergrund verwenden).

Sobald das Bild fertig ist, können Sie es mit einer dieser drei Methoden zu Ihrer WordPress-Website hinzufügen:

1. Ein WordPress Favicon über den WordPress Customizer hinzufügen

Aus der WordPress-Version 4.3, können Sie einfach ein WordPress-Favicon aus Ihrem Admin-Bereich hinzufügen. Führen Sie dazu die folgenden Schritte aus:

  1. Zugang zu votre Admin-Dashboard
  2. Fahre mit der Maus darüber Aussehen -> Anpassen
  3. Wählen Website-Identität
  4. Klicken Sie auf die Schaltfläche Wählen Sie eine aus Bild darunter der Icon-Bereich der Website
  5. Laden Sie Ihr vorbereitetes Favicon hoch
  6. Klicken Sie auf die Schaltfläche Veröffentlichen um die Änderung zu speichern.

Wenn Sie den Vorgang korrekt durchführen, wird Ihr Favicon neben Ihrem Website-Titel angezeigt. Um dies auf einem mobilen Gerät einzurichten, besuchen Sie Ihre Website von Ihrem Telefon aus und wählen Sie aus Zum Startbildschirm hinzufügen.

Ihr Favicon erscheint nun auf Ihrem Startbildschirm.

Fügen Sie ein WordPress-Favicon hinzu

2. Fügen Sie der Website mit einem WordPress-Plugin ein Favicon hinzu

Sie können WordPress auch ein Favicon hinzufügen, indem Sie ein Plugin namens Favicon von RealFaviconGenerator. Es ist einfach zu bedienen und bietet mehr Funktionen. Hier sind die erforderlichen Schritte:

  1. Greifen Sie auf Ihre Admin-Dashboard
  2. Wählen Erweiterungen -> Hinzufügen
  3. Typ Favicon von RealFaviconGenerator im Suchfeld
  4. Installieren und aktivieren Sie die WordPress Plugin
  5. Gehen Sie nach der Aktivierung zu Aussehen -> Favicon
  6. Laden Sie das Bild hoch, das Sie als Favicon festlegen möchten. Sie müssen Ihr Bild nicht mit einer Bildbearbeitungssoftware bearbeiten. Das Plugin erledigt das für Sie. Stellen Sie einfach sicher, dass Ihr Bild eine Größe von mindestens hat 70 x 70px. Es ist noch besser, wenn es größer als ist 260 x 260 px.
  7. Nachdem Sie das Bild hochgeladen haben, klicken Sie auf die Schaltfläche Favicon generieren.
  8. Nach Anklicken des Buttons werden Sie durch das Plugin auf die Website weitergeleitet RealFavicon-Generator.
  9. Suchen und klicken Sie auf der Website Generieren Sie Ihre Favicons und HTML-Code.
  10. Das Plugin bringt Sie zurück auf Ihre Website. Sie erhalten eine Benachrichtigung, dass Ihr Favicon konfiguriert wurde.
  11. Überprüfen Sie, wie Ihr Favicon in Ihrem Browser und Mobilgerät aussieht.
Fügen Sie ein WordPress-Favicon hinzu

3. Fügen Sie manuell ein WordPress-Favicon zu einer Website hinzu

Wir empfehlen, dies auf Ihrer lokalen Entwicklungswebsite zu testen, bevor es live geht.

  1. Greifen Sie über einen Client auf Ihre Designdateien zu fTP oder ein Dateimanager
  2. Finde den Ordner /wp-content/themes/votre-theme
  3. Laden Sie Ihr Favicon in Ihren Themenordner hoch. Es wird empfohlen, es in einem Unterordner herunterzuladen, z Details
  4. Merken Sie sich diesen Dateipfad
  5. Suchen Sie nach einer Datei mit dem Namen functions.php und fügen Sie den folgenden Code hinzu:
function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.png" />';
}
 
add_action('wp_head', 'add_favicon');
  1. Die Linie danach href="'.get_template_directory_uri() muss der Pfad zu Ihrem Favicon sein. Stellen Sie außerdem sicher, dass Sie den richtigen Dateinamen haben. Wenn Sie ein Format verwenden .ico-Datei, das wird es sein:
function add_favicon() {
  echo '<link rel="shortcut icon" type="image/png" href="'.get_template_directory_uri().'/assets/favicon.ico" />';
}
 
add_action('wp_head', 'add_favicon');

Ein Favicon ist ein Muss! Vor allem, wenn es so einfach zu erstellen ist. Ein Favicon repräsentiert die Identität Ihrer Website. Es nimmt zwar nur wenig Platz auf Ihrer Website ein, aber dieses kleine Detail spielt eine besondere Rolle bei der Verbesserung Ihrer Markenbekanntheit und Benutzererfahrung.

Andere empfohlene Ressourcen

Wir laden Sie auch ein, die zu konsultieren Ressourcen unten, um mehr Eigenverantwortung und Kontrolle über Ihre Website und Ihren Blog zu übernehmen.

Zusammenfassung

Das ist alles für dieses Tutorial, das erklärt, wie man ein Favicon in WordPress hinzufügt. Wenn Sie Bedenken oder Vorschläge haben, teilen Sie uns dies bitte innerhalb mit commentaires.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

In der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.   

...