Favicon in WordPress hinzufügen


Um dein Eigenes Favicon zu deinem WordPress Blog hinzuzufügen hast du 4 verschiedene Möglichkeiten.

  1. Den WordPress Customizer benutzen, um dein Favicon hochzuladen
  2. WordPress Favicon im Theme einfügen
  3. Installiere ein Plugin um dein WordPress Favicon hinzuzufügen
  4. Manuelles Hinzufügen deines Favicons per FTP

Die Vorteile der Verwendung eines WordPress-Favicons

Der wohl größte Nutzen eines Favicons für den Leser deines Blogs zeigt sich spätestens wenn du einmal viele Tabs in deinem Browser geöffnet hast und eine bestimmte Seite wiederfinden möchtest.

Da der Titel der Webseite bei vielen geöffneten Tabs verkürzt oder gar nicht mehr angezeigt wird hilft dir ein Favicon Webseiten schnell zu identifizieren.

Daneben wirkt ein Blog mit einem Favicon professionell und glaubwürdig während ein WordPress Standard Icon deinen Blog unprofessionell und unseriös wirken lässt.

Zudem wird das Favicon in der Tab-Leiste, der Lesezeichen-Leiste, bei WordPress-Mobile-Apps, Home-Icons sowie in mobilen Suchergebnissen angezeigt.

  • Es steigert die Seriosität und Professionalität deines Blogs
  • Es erleichtert dem User, deinen Blog und deine Dienstleistung im Web leichter zu erkennen und verbessert so die User Experience deines Blogs
  • Es wirkt sich positiv auf die Suchmaschinenoptimierung aus
  • Hat ein User im Browser viele Tabs gleichzeitig geöffnet, sind die Seiten-Titel ausgeblendet. Das Favicon hingegen bleibt immer sichtbar

Wie man ein WordPress Favicon erstellt

Die meisten Unternehmen verwenden ihr Logo oder eine Variante davon. Das kannst du für deinen Blog in aller regel auch tun.

Wenn dein Logo allerdings zu filigran oder kompliziert gestaltet ist und viele Details besitzt kann es sein das es in einem 16×16 Pixel Format nicht mehr gut zu erkennen ist.

Die meisten modernen Browser unterstützen die Verwendung von ICO-, PNG- und GIF-Dateien für dein Favicon. JPEG wird ebenfalls weitgehend unterstützt.

Du kannst dein eigenes Favicon selbst in Photoshop oder Canva erstellen. Aber auch mit Plugins lassen sich eigene Favicons erstellen.

RealFaviconGeneratorOpens in a new tab. ist ein gutes Plugin zum erstellen deines Favicons 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.ccOpens in a new tab., mit der du ein Favicon von Grund auf neu erstellen oder ein bestehendes Bild hochladen kannst.
  • Favicon GeneratorOpens in a new tab., der ähnlich wie RealFaviconGenerator funktioniert.

Hier eine Anleitung wenn du RealFaviconGenerator benutzen willst:

  1. Hochladen des Bildes unter dem Punkt „Wähle dein Favicon-Bild“
  2. Nun kannst du spezifische Details zu deinem Favicon-Set konfigurieren
  3. Wenn du fertig bist drücke auf „Favicons und HTML-Code generieren“
  4. Klicke jetzt auf das „Favicon-Paket“ um deine Favicon-Bilder herunterzuladen

Wichtig: Lass die Seite unbedingt offen, wenn du vorhast, das Favicon manuell hinzuzufügen.

Tipps zum Erstellen eines WordPress-Favicons

Die empfohlene Größe für Favicons ist 512×512 Pixel.

Auch wenn dein Favicon als ein 16×16 Pixel Quadrat angezeigt wird empfiehlt es sich dein Favicon im Format 512×512 Pixel zu erstellen.

Denn so sieht es auf jeden Fall gut aus, wenn es auf die Maße 16×16 Pixel verkleinert wird.

Tipp: Es kann nicht schaden wenn du dir die Google-RichtlinienOpens in a new tab. für die Erstellung und Verwendung von Favicons durchliest.

Wie du ein WordPress Favicon zu deinem Blog hinzufügst (4 einfache Optionen)

Um ein Favicon zu deinem WordPress Blog hinzuzufügen hast du gleich 4 verschiedene Optionen:

  1. Den WordPress Customizer benutzen, um dein Favicon hochzuladen
  2. WordPress Favicon im Theme einfügen
  3. Installiere ein Plugin um dein WordPress Favicon hinzuzufügen
  4. Manuelles Hinzufügen deines Favicons per FTP

1. Den WordPress Customizer benutzen, um dein Favicon hochzuladen

Seit WordPress 4.3 bietet WordPress dir die Möglichkeit über eine Funktion, die es möglich macht, einfach ein Bild hochzuladen und zuzuschneiden um dieses dann als Favicon zu nutzen.

Diese Methode ist mit Abstand die einfachste und schnellste Methode.

  • Um den Customizer zu nutzen gehst du zum Punkt „Design“ und dann auf den Unterpunkt „Customizer“ in deinem WordPress-Dashboard auf der linken Seite.
  • Navigiere von dort zur Registerkarte „Website Informationen“. Hier kannst du den Titel sowie Untertitel deiner s Blogs eingeben. Etwas darunter kannst du unter „Website Icon“ dein Favicon hochladen.
  • Das normale WordPress Media Library Interface wird sich nach einem Klick auf „Website Icon hochladen“ öffnen
  • Hier kannst du nun entweder ein bestehendes Bild in deiner Mediathek auswählen oder ein neues Bild hochladen.
  • Wenn du RealFaviconGenerator benutzt hast musst du sicherstellen das du das Zip Paket entpackt hast
  • Wenn dein Bild nicht bereits ein perfektes Quadrat ist hast du die Möglichkeit, es auf dem nächsten Bildschirm zuzuschneiden
  • Auf der rechten Seite des Fensters siehst du deine Vorschau
  • Klicke jetzt auf „Bild beschneiden“, um deine Wahl abzuschließen
  • Wähle jetzt „Speichern & Veröffentlichen“ aus, um dein Favicon live zu schalten

2. WordPress Favicon im Theme einfügen

Einige WordPress Themes bieten dir die Möglichkeit, ein Website-Icondirekt über das Theme in WordPress einzufügen.

So hat zum Beispiel das Theme EnfoldOpens in a new tab. direkt einen Reiter namens „Theme Optionen“ um dein Favicon hochzuladen.

3. Installiere ein Plugin um dein WordPress Favicon hinzuzufügen

Auch der Upload und die installation über ein Plugin ist möglich. Plugin-Lösungen wie Favicon by RealFaviconGeneratorOpens in a new tab. sind genauso einfach zu benutzen wie der WordPress Customizer.

Sobald du das Plugin aktiviert hast, gehe zu Design → Favicon um dein Favicon zu installieren.

Zunächst wählst du ein Bild aus oder lädst eins hoch, das mindestens 70×70 Pixel groß ist.

Nun drückst du auf „Favicon generieren“.

Das Plugin bringt dich nun außerhalb deiner WordPress Webseite auf die RealFaviconGenerator Webseite.

Scrolle auf der Webseite nach unten und wähle „Generate your Favicons and HTML code“.

Nachdem du auf „Generate your Favicons and HTML code“ geklickt hast schickt dich der RealFavicon Generator zurück zu deinem WordPress-Dashboard.

Zusätzlich kannst dir im Interface des Plugins eine Vorschau ansehen.

4. Manuelles Hinzufügen deines Favicons per FTP

Du kannst dein Favicon auch manuell zu deiner WordPress Webseite via File Transfer Protocol (FTP) oder File Manager hinzuzufügen, wenn dein Host cPanel unterstützt.

Natürlich musst du, wenn du es manuell hochladen willst erst einmal ein eigenes Favicon-Bild erstellen.

Um ein WordPress-Favicon manuell zu deiner Webseite hinzuzufügen, musst du Folgendes tun:

  1. Greife auf die Dateien deiner Webseite zu, entweder über einen FTP-Client oder den Dateimanager in deinem Host cPanel.
  2. Ö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

  • Benutze ein Plugin wie „Insert Headers and FootersOpens in a new tab.„, 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 eines Plugins das 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.

Unter Einstellungen → Kopf- und Fußzeilen fügst du jetzt den Code deines Favicons in die Sektion „Scripts in Header“ ein.

Geschafft. Stelle sicher, dass du deine Änderungen speicherst.

Zusammenfassung

Um dein eigenes Favicon zu deinem Blog hinzuzufügen hast du unterschiedliche Möglichkeiten. In den meisten Fällen musst du aber erst einmal ein Favicon erstellen, um dieses dann später hochzuladen.

Plugins wie RealFaviconGeneratorOpens in a new tab. erleichtern dir deine Arbeit sehr. Mithilfe des Plugins kannst du sogar eigene Favicons erstellen und diese dann später auf deiner WordPress Installation einbinden.

jens

Jens Evers ist der Gründer von Content-Ninja. Er ist WordPress-Fan, Blogger und SEO-Experte seit mehr als 10 Jahren. Seine Spezialität ist das erstellen Themen-relevanter Blogs. Er zeigt dir wie du Traffic auf deine Inhalte Leitest und wie du durch wertvolle Beiträge mehr Geld verdienen kannst.

Leave a Reply

Your email address will not be published. Required fields are marked *

Meine neusten Artikel

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Wenn du erfahren willst, wenn ein neuer Beitrag veröffentlicht wird und du gratis mein Geschenk bekommen willst, dann melde dich einfach zum kostenlosen Content-Ninja.de Newsletter an!

Du hast dich erfolgreich eingetragen.