So fügen Sie ein WordPress-Favicon hinzu und ändern es | WP-Buffs

Menschen verwenden WordPress, um Websites für Einzelpersonen und Unternehmen zu erstellen. Eine Möglichkeit, wiederkehrende Besucher wissen zu lassen, dass die Website Ihnen gehört, ist ein benutzerdefiniertes WordPress-Favicon.

Was ist ein Favicon?

Ein Favicon ist ein Symbol, das im Browser-Tab oder -Fenster und in der Liste der Lesezeichen oder Favoriten angezeigt wird, die speziell mit einer bestimmten Site verknüpft sind. Wenn ein Browser kein benutzerdefiniertes Favicon findet, zeigt er stattdessen ein Standard-Favicon an.

Ein WordPress-Favicon ist oft eine winzige Version des Logos der Website. Möglicherweise können Sie das Logo auf Favicon-Größe verkleinern, aber normalerweise ist es notwendig, eines zu erstellen, das sich auf das Originallogo bezieht.

Warum sollte ich ein Favicon verwenden?

Unternehmen sollten ein Favicon haben, um die Vertrautheit zu verbessern und das Vertrauen potenzieller Kunden zu fördern. Branding ermöglicht es Besuchern, eine Website sofort wiederzuerkennen. Es fügt Kontinuität und Legitimität hinzu.

Einzelpersonen können aus ähnlichen Gründen auch ein Favicon verwenden, obwohl das Ziel in den meisten Situationen eher Wiederholungsbesucher als Käufe sind.

Favicon-Spezifikationen

Die Favicon-Größe in WordPress beträgt 16×16 Pixel. Einige andere Browser und Anwendungen verwenden jedoch eine größere Größe, die von 16 bis 195 Pixel im Quadrat reicht.

Wenn Sie bei der Größe 16 × 16 bleiben, werden die Anwendungen, die größere Größen verwenden, diese im Allgemeinen vergrößern, was häufig zu Pixelbildung führt. Aus diesem Grund erfordert die Website-Identität von WordPress stattdessen 512 × 512.

Einige gängige alternative Größen sind:

• 24 Pixel – das Symbol für eine angeheftete Website in Internet Explorer 9
• 72 Pixel – das Symbol auf einem iPad-Startbildschirm
• 128 Pixel – das im Chrome Web Store verwendete Symbol
• 195 Pixel – das Symbol, das auf Opera Speed ​​Dial angezeigt wird

Favicon-Formate

Ein Favicon wird nicht korrekt angezeigt, wenn es in einem falschen Format gespeichert wird. Das gebräuchlichste Format ist Windows ICO, was die ursprüngliche Anforderung war. Es kann eine Vielzahl von Größen und Auflösungen für die Verwendung auf mehreren Plattformen aufnehmen. Es ist das einzige Format, das vom Internet Explorer verwendet wird.

PNG ist die benutzerfreundlichste Option, da fast jedes Grafikprogramm in diesem Format speichert, und es bietet eine kleine Dateigröße und ermöglicht es, das Favicon auf Wunsch transparent zu machen.

Opera unterstützt die Verwendung von SVG für Favicons, obwohl dies der einzige Browser ist, der dies tut.

GIF, JPG und APNG sind Optionen, aber weniger nützlich, da ihre Auflösung schlechter ist und sie ablenken können. Ablenkung ist besonders wahrscheinlich bei animierten GIF-Dateien und APNG-Dateien, die ebenfalls animiert sind.

Favicon erstellen

Es ist eine großartige Idee, ein WordPress-Favicon zu entwerfen, um Ihrer Website Wiedererkennungswert zu verleihen. Sie können eines mit einem Grafikprogramm auf Ihrem Computer entwerfen oder eine kostenlose Website online verwenden, z. B. favicon-generator.org oder favicon.cc.

Berücksichtigen Sie die folgenden Faktoren, um den Wert Ihres Favicons zu verbessern.

Identität

Der wichtigste Grund für ein Favicon ist, wiedererkannt zu werden. Erstellen Sie ein Design, das das von Ihnen angebotene Produkt oder die Dienstleistung darstellt, oder ein Design, das zu Ihrem Markenlogo passt. Ideal ist ein Bild, das einen direkten Bezug zu Ihrer Marke hat, wie etwa eine kleinere Version des Logos oder der Hauptbuchstabe oder die Hauptbuchstaben des Firmennamens.

Einfachheit

Aufgrund seiner geringen Größe ist einfach am besten. Einfache Formen oder Buchstaben sind eine gute Wahl für die Sichtbarkeit. Wenn Besucher es auf einen Blick erkennen, ist es am effektivsten. Je mehr Details Sie einbeziehen möchten, desto schwieriger ist es für den Besucher, das Symbol zu erkennen. Präzision, Kühnheit und Klarheit sind unerlässlich.

Farben

Ein hoher Kontrast verbessert die Lesbarkeit und erhöht die Erkennung. Betrachten Sie die Favicons von Websites wie NBC und Netflix. Ihre Websites sind sofort offensichtlich. Websites mit einer klaren Farbidentität sollten diese Farbe in ihr WordPress-Favicon aufnehmen. Halten Sie es wieder einfach. Zu viele Farben können ein unscharfes Bild verursachen.

So fügen Sie ein Favicon zu WordPress hinzu

Fügen Sie ein WordPress-Favicon mit einer der folgenden Methoden hinzu:

1) Verwenden Sie die integrierte Site-Icon-Option in WordPress.

Bewegen Sie den Mauszeiger über Darstellung und wählen Sie Anpassen und dann die Registerkarte Website-Identität. Das Site-Symbol befindet sich unten im linken Bereich und ermöglicht Ihnen die Auswahl eines beliebigen quadratischen Bildes mit 512 Pixeln oder mehr, dessen Größe dann nach Bedarf angepasst wird.

Wenn die von Ihnen gewählte Datei kein Quadrat ist, bietet WordPress eine Schnittstelle, um das Bild auf ein Quadrat zuzuschneiden.

2) Bearbeiten Sie die header.php

Bearbeiten Sie die Datei header.php in Ihrem aktuellen Design und fügen Sie diesen Code hinzu:

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Ersetzen Sie „yourdomain“ durch den Domainnamen Ihrer Website und stellen Sie sicher, dass Sie das Favicon auf den Webspace hochladen.

Wenn Sie verhindern möchten, dass WordPress die Änderung in einem Update rückgängig macht, erstellen Sie vor der Bearbeitung ein untergeordnetes Design und bearbeiten Sie die untergeordnete Designdatei anstelle der Hauptdesigndatei.

3) Verwenden Sie ein WordPress-Plugin.

Verwenden Sie eines der Plugins, die wir unten auflisten.

So ändern Sie ein Favicon in WordPress

Das Ändern des WordPress-Favicons ähnelt dem Hinzufügen eines Favicons. Die gleichen Methoden funktionieren, um ein neues Favicon hochzuladen. Es ist auch möglich, ein neues hochzuladen und das alte zu überschreiben, wodurch es geändert wird, wenn Besucher ihren Cache löschen oder eine harte Aktualisierung durchführen.

Lassen Sie WP Buffs Ihre Upgrades und Änderungen handhaben, wenn Sie den Prozess verwirrend finden. Das Team steht rund um die Uhr für Service und Unterstützung zur Verfügung.

Vereinfachen Sie mit einem WordPress Favicon Plugin

Erleichtern Sie das Hinzufügen oder Ändern des WordPress-Favicons, indem Sie ein Plugin installieren.

• Sie können das Plugin Kopf- und Fußzeilen einfügen verwenden, um den obigen Code einfach hinzuzufügen. Fügen Sie den Code in den Header-Bereich ein und speichern Sie ihn.
• Das Plugin All in One Favicon fügt die Funktionalität hinzu, um das Hinzufügen eines Favicons zu vereinfachen.
• RealFaviconGenerator ist ein Plugin, das Symbole basierend auf den Anforderungen des Browsers generiert.
• Ein weiteres beliebtes Plugin ist der Heroic Favicon Generator, der ein Favicon aus einem hochgeladenen Bild oder einem Bild, das sich bereits in Ihrer Medienbibliothek befindet, generiert. Es verwendet Drag-and-Drop zum Hochladen von Bilddateien.

Warum wird mein WordPress Favicon nicht angezeigt?

Es gibt mehrere mögliche Gründe für Favicon-Fehler, von Benutzerfehlern bis hin zu Browser-Eigenheiten.

Zwischenspeicher

Wenn Ihre Website zwischengespeichert ist, dauert es einige Zeit, bis Änderungen an Elementen wie dem Favicon angezeigt werden. Sie können den Vorgang beschleunigen, indem Sie eine harte Aktualisierung (Strg + F5) durchführen oder den Browser-Cache leeren. Wenn das Problem dadurch nicht behoben wird, überprüfen Sie den Favicon-Dateityp. Wenn es sich nicht um eine .ico-Datei handelt, ist sie möglicherweise nicht mit dem Browser kompatibel.

Tippfehler

Wenn Sie einen typografischen Fehler im Code haben, wird das Favicon wahrscheinlich fehlschlagen, anstatt angezeigt zu werden. Einfache Fehler wie fehlende Anführungszeichen, Schrägstriche oder Klammern verursachen Fehler, die das Bild und möglicherweise die gesamte Webseite durcheinander bringen. Überprüfen Sie den Code sorgfältig.

WordPress-Favicon-Speicherort

Die Dateireferenz ist ebenfalls sehr spezifisch. Wenn der Link (der Teil innerhalb der href-Anführungszeichen) auf ein Bild verweist, das nicht existiert, wird das Favicon nicht angezeigt. Achten Sie darauf, die Favicon-Datei hochzuladen und den genauen Link zu kopieren. Der beste Weg, dies zu tun, ist die Verwendung der Medienbibliothek in WordPress.

Lokale Ansicht

Wenn Sie die Anzeige auf einem lokalen Computer überprüfen, anstatt die Internetseite zu laden, wird das WordPress-Favicon nicht angezeigt, da die meisten Browser nicht lokal nach dem Favicon suchen. Überprüfen Sie die Seite im Internet, um sicherzustellen, dass sie den Besuchern angezeigt wird.

Falscher Bildtyp

Der Standarddateityp für das Favicon-Bild ist .ico („image/ico“). Wenn ein anderer Dateityp verwendet wird, z. B. PNG oder SVG, muss dies im Code angepasst werden, wenn die Methode „Design bearbeiten“ verwendet wird. Der Dateityp muss mit dem Dateityp des Bildes übereinstimmen. Eine PNG-Datei sollte beispielsweise „image/png“ anstelle von „image/ico“ lauten.

Für weitere Informationen zu allen möglichen Themen rund um WordPress abonnieren Sie den WPBuffs-Newsletter.

Die Leute fragen auch