WordPress Favicon einfügen (2024): Sofort in 1 Minute | 4 simple Wege

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

WordPress Favicon einfügen: Du erfährst in diesem kurzen & kompakten Artikel, alles was Du rund um das WordPress Favicon wissen musst!

Was ist ein Favicon genau? Wie erstellst Du es? Wie fügst Du ein Favicon in WordPress ein (4 Wege)? Wie löscht Du ein Favicon? Welche Tipps solltest Du unbedingt beachten?…

Das sind nur ein paar der Fragen, die Du gleich haargenau beantwortet bekommst. Also… legen wir direkt los…

Inhaltsverzeichnis

  1. Was ist ein WordPress Favicon?
  2. WordPress Favicon Vorteile
  3. Favicon erstellen
  4. Favicon einfügen über Customizer
  5. Favicon einfügen über Plugin
  6. Favicon einfügen über ein Theme
  7. WordPress Favicon manuell einfügen
  8. Hinweise zum Cache löschen
  9. WordPress Favicon löschen
  10. Unser WordPress Favicon Tipp für dich
  11. FAQ

1. Was ist ein WordPress Favicon?

Unter einem Favorite Icon, oder kurz Favicon, versteht man das kleine Symbol, das du im Browser-Tab neben dem Seitentitel angezeigt bekommst.

wordpress-favicon-anzeige browser

Das Favicon kommt allerdings nicht nur beim Browser-Tab zum Einsatz. Es wird außerdem bei Lesezeichen und Home Icons angezeigt und dient auch bei mobilen Endgeräten als Vorschausymbol in den Suchergebnisse (bei Google und anderen Suchmaschinen).

2. WordPress Favicon Vorteile

Was bringt es dir nun, einen WordPress Favicon zu nutzen? Auch wenn es nur einen sehr kleinen Bestandteil deiner WordPress Webseite darstellt, bietet dieser dann doch einige Vorteile:

  • Stärkung deiner Marke: Für eine gute Webseite ist es von großer Bedeutung, dass diese vielen Menschen im Gedächtnis bleibt. Mit einem Favicon kannst du deinen Wiedererkennungswert, beispielsweise durch Nutzung des Logos, schon mit kleinem Aufwand erheblich steigern.
  • Professionalität: Favicons sind bei professionellen Webseiten einfach ein Mindeststandard. Wenn du deiner Webseite also den bestmöglichen Gesamteindruck verschaffen willst, solltest du Favicon dabei nicht vergessen.
  • Bei mobiler Suche punkten: Wie bereits erwähnt, taucht das Favicon bei den Suchergebnissen als Symbol auf. Da inzwischen die Nutzer überwiegend auf mobilen Endgeräten googlen, kannst du durch ein Favicon dein Branding prominent platzieren.

3. Favicon erstellen

Bevor wir über das Einfügen von Favicons in WordPress sprechen, ist natürlich erstmal das Erstellen wichtig. Hierzu kannst du auf die unterschiedlichen Software-Angebote zur Bildbearbeitung zurückgreifen – als kostenlose Varianten stehen beispielsweise Gimp oder Canva zur Verfügung.

Was ist das richtige Favicon Motiv und wie ist es aufgebaut?

Als WordPress Favicon bietet sich in aller Regel erstmal dein Logo an. Dein Logo sollte allerdings so aufgebaut sein, dass es in eine quadratische Form problemlos eingefügt werden kann. Sollte das Logo dafür zu breit oder anderweitig geformt sein, kannst du beispielsweise auch nur einen essenziellen Teil des Logos nehmen oder die Initialien vor einen passenden Hintergrund setzen.

Das Ausgangsformat sollte dabei 512×512 Pixel groß sein und als .jpeg Datei gespeichert werden. Falls du einen transparenten Hintergrund verwenden möchtest, musst du deine Favicon Datei entsprechend als .png oder .gif Datei abspeichern.

Hinweis: Im Fall von Favicons bietet es sich an, die Auflösung der Ursprungsdatei deines Favicons zu komprimieren. Wie das funktioniert, zeigen wir dir in unserem Artikel zum WordPress Bilder optimieren.

4. Favicon einfügen über Customizer

Eine sehr einfache Methode, mit der du ein WordPress Favicon einfügen kannst, ist der integrierte Customizer. Diesen rufst du im WordPress Menü unter Design > Customizer auf. Nun öffnet sich eine neue Oberfläche mit Menü – dort wählst du den Eintrag „Website Informationen“ aus.

Im Bereich Website Icon kannst du dein zuvor erstelltes Favicon nun hochladen beziehungsweise auswählen.

Je nach Theme, das Du verwendest, kann das Favicon auch anders eingefügt werden. Mehr dazu hier.

Im Video, am Anfang dieser Seite, ist das Einfügen nochmal genau erklärt.

5. Favicon einfügen über Plugin

Ein WordPress Favicon einzufügen funktioniert auch prima über Plugins. Wir möchten dir an dieser Stelle zwei Plugins vorstellen, die die Handhabung mit Favicons deutlich vereinfacht.

Plugin Nr. 1: Favicon by Realfavicongenerator

Das Plugin von Realfavicongenerator ist ein Mix aus WordPress Plugin mit einer Webseiten-Anbindung. Nach der Installation und Aktivierung des Plugins bekommst du im WordPress Menü „Design“ einen neuen Eintrag „Favicon“. Wähle diesen aus und lade dein erstelltes Favicon an dieser Stelle hoch.

Nach dem Upload wird sich ein neues Browser-Fenster öffnen, in dem du verschiedene Detail-Einstellungen an deinem Favicon vornehmen kannst. Dazu gehören beispielsweise ein farblicher Hintergrund oder einen Rahmen um dein Favicon.

Denke daran, am Ende deine Einstellungen über den blauen Button „Generate your favicons and HTML Code“ zu bestätigen und an das WordPress Backend zu übertragen.

Cooles Zusatz-Feature: Du kannst für verschiedene Benutzeroberflächen prüfen, ob dein Favicon dort wie gewünscht dargestellt wird. Zur Auswahl stehen iOS und Android Web-Lesezeichen sowie die Windows-Kacheln und der macOS Safari Tab in der Touch Bar.

Plugin Nr. 2: All-in-one Favicon

Dieses eher minimalistische Plugin umfasst in einer Übersicht alle notwendigen Einstellungen rund um das Favicon einfügen. Nach der Aktivierung kann in der Plugin-Übersicht direkt beim Plugin der Button „Einstellungen“ ausgewählt werden.

Hier gibt es jeweils Upload-Möglichkeiten für Frontend und Backend in verschiedenen Dateiformaten. Hier solltest du mindestens einen Upload im Frontend durchführen, damit dein Favicon möglichst allen Besuchern deiner Webseite angezeigt wird.

Darüber hinaus bietet das All-in-one Favicon Plugin zusätzliche Tipps und Links zu Favicons im Allgemeinen sowie Online-Editoren und Validatoren.

6. Favicon einfügen über ein Theme

Die Nutzung eines Themes bietet viele Möglichkeiten, um seine Webseite optisch zu verändern. Bei den meisten Themes gibt es daher auch die Möglichkeit, ein Favicon einzufügen und zusätzliche Einstellungen anzupassen.

In den meisten Fällen findest du die Einstellungen zu Favicons in den allgemeinen Theme-Optionen. Das ist allerdings von Theme zu Theme unterschiedlich und kann daher leider nicht pauschal beantwortet werden.

Beim Thrive Theme Builder beispielsweise, fügst Du es unter „Thrive Dashboard > Thrive Theme Builder > Branding > Favicon“ ein.

Auch im Video, am Anfang dieser Website, ist das Favicon Einfügen nochmal Schritt für Schritt erklärt.

7. WordPress Favicon manuell einfügen (FTP)

Die vierte und letzte Methode, um ein WordPress Favicon hinzuzufügen, ist der manuelle Weg über das File Transfer Protocol (FTP). Hierzu greifen wir erneut auf den Real Favicon Generator zurück, um die notwendigen HTML-Daten zu erhalten.

Schritt 1: Lade deine gewünschte Favicon-Grafik bei realfavicongenerator.net hoch und passe bei Bedarf weitere Einstellungen an. Klicke anschließend ganz unten auf den Button „Generate your Favicons and HTML Code“.

Schritt 2: Nun kannst du das generierte Favicon-Paket herunterladen. Benenne dieses in „favicon.ico“ um, sodass es beim Upload auf deinen FTP-Server direkt als Favicon erkannt wird. Der bereitgestellte HTML-Code wird später noch benötigt.

Schritt 3: Logge dich auf deinem FTP-Server (beispielsweise über FileZilla) ein und lade das Favicon-Paket im Hauptverzeichnis deiner WordPress Daten hoch. Die Favicons sollten sich hier auf gleicher Ebene wie die Ordner „WP-Content“ und „WP-Admin“ befinden.

Schritt 4: Zu guter Letzt öffnest du die header.php Datei im Theme-Editor bei WordPress und fügst den zuvor generierten HTML-Code innerhalb des <head> Bereichs ein. Hierbei ist es noch wichtig, dass deine Domain hinter dem „href=“ noch ergänzt wird.

Hinweis: Solltest du mit HTML und Codes noch nicht wirklich vertraut sein, greife am Besten auf die anderen drei Alternativen zurück.

8. Hinweise zum Cache löschen

In manchen Fällen kann es passieren, dass dein Favicon nicht angezeigt wird. Das hat in aller Regel zwei mögliche Gründe: Wenn Du ein Caching Plugin nutzt, solltest Du nach dem Einfügen des Favicons den Cache leeren. Ansonsten kommt es vor, dass das Favicon nicht angezeigt wird.

Die zweite Möglichkeit hängt wiederum mit dem allgemeinen Browser Cache zusammen. Hier ist der häufigste Lösungsansatz, den Cache über die jeweiligen Einstellungen im Browser zu leeren. Dadurch wird der Browser angehalten, alle Website-Daten noch einmal komplett neu von deinem Server zu laden.

Alternativ kannst du aber auch in den Inkognito-Modus deines Browsers wechseln. Wenn du dann deine Webseite lädst und das Favicon erscheint, hast du beim Einfügen alles richtig gemacht.

9. WordPress Favicon löschen

So wie du dein eigenes WordPress Favicon einfügen kannst, so kannst du es auf dem gleichen Weg auch wieder löschen.

  • Über den Customizer kannst du mit einem einfachen Klick auf den Button „Entfernen“ das Favicon wieder löschen.
  • Bei den Plugins und Themes kannst du in der Regel die getätigten Uploads mit ein paar wenigen Klicks wieder entfernen.
  • Im manuellen Verfahren entfernst du Code aus der header.php Datei und löschst das hinzugefügte Favicon-Paket von deinem FTP-Server.

10. Unser WordPress Favicon Tipp für dich

Beim WordPress Favicon gilt in aller Regel: Weniger ist mehr. Die Nutzung eines Favicons ist in jedem Fall sehr wichtig, um deiner Webseite eine professionellere Wirkung zu geben.

Achte bei der Gestaltung allerdings darauf, dass das Favicon nicht zu detailreich ist. Die allermeisten Benutzer werden dein Favicon nur in einer Pixelgröße von 32×32 oder kleiner zu Gesicht bekommen. Daher kommt es darauf an, dass dein Logo klar erkennbar ist und nicht aufgrund der geringen Auflösung kaum wahrgenommen wird.

Sollte das für dein Logo kaum möglich sein, sind Buchstaben beziehungsweise Initialien vor einem farblich passenden Hintergrund die praktischste Alternative. Nutze außerdem Tools wie den vorgestellten Favicon Generator. Diese sind sehr hilfreich, um zu prüfen, ob dein Favicon auf allen Ebenen optisch ansprechend aussieht.

11. FAQ – Häufige Fragen zu WordPress Favicon einfügen

Was ist die richtige Favicon Größe?

Wenn du die Standard-Variante über den Customizer wählst, dann nutze eine Auflösung von 512×512 Pixel. Wichtig hierbei: Achte unbedingt auf die Größe deiner Favicon-Datei und minimiere sie bestmöglich.

Wie das funktioniert, findest du in unserem Artikel zum WordPress Bilder optimieren.

WordPress Favicon wird nicht angezeigt?

Wenn du bei der Anzeige deines Favicons Probleme hast, dann muss das nicht unbedingt ein Fehler bei der Erstellung sein. Häufig liegt es daran, dass der Cache der Webseite oder des Browsers nicht geleert wurde und daher Aktualisierungen nicht sofort erkennt.


Diese Artikel könnten Dir auch gefallen


Tags

wordpress favicon, wordpress favicon ändern, wordpress favicon einfügen, wordpress favicon generator, wordpress favicon größe, wordpress favicon hinzufügen, wordpress favicon löschen, wordpress favicon plugin, wordpress optimierung

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Du bist nur einen Klick entfernt, mit Deiner Website richtig durchzustarten...