So kannst du ein Favicon bei WordPress einfügen

So kannst du ein Favicon bei WordPress einfügen

Ein Favicon ist eine kleine Grafik, die du in deine WordPress Seite einbinden kannst. Diese wird anschließend an mehreren Stellen im Browser deiner Besucher angezeigt. Das sorgt für einen professionellen Eindruck und du steigerst damit den Wiedererkennungswert deiner Webseite. In diesem Artikel erfährst du, wie du ein Favicon erstellst und in deine WordPress Seite einfügen kannst.

Was ist ein Favicon?

Ein Favicon ist eine quadratische Grafik im Windows Icon Format mit der Dateiendung .ico. Diese wird von den Desktop Browsern im Browser-Tab neben dem Seitentitel angezeigt. Wenn du eine Webseite mit Favicon zu deinen Favoriten/Lesezeichen hinzufügst, wird das Icon dort ebenfalls angezeigt. Vor allem wenn gerade ein anderes Browser-Tab aktiv ist, lässt sich deine Webseite anhand des Favicons leicht identifizieren.

Favicons werden in Browser-Tabs angezeigt

In den Browsern mobiler Endgeräte verhält es sich ähnlich. Wenn hier eine Webseite für den schnellen Zugriff als Favorit angelegt wird, wird das Favicon häufig als großes Symbol auf der Startseite oder dem Homescreen dargestellt. Favicons steigern also in jedem Falle den Wiedererkennungswert deiner Webseite und sollten daher genutzt werden.

Favicon erstellen

Die Erstellung eines Favicons ist nicht schwer. Damit das Icon vernünftig angezeigt wird, müssen aber einige Dinge beachtet werden. Deine Grafik muss auch in der kleinen Auflösung gut aussehen und die Datei muss von möglichst allen Browsern gefunden werden.

Geeignete Grafik wählen

Für einen hohen Wiedererkennungswert verwenden die meisten Webseiten verwenden ihr Logo im Favicon. Heutzutage zeigen die meisten Browser die Favicons in einer Auflösung von 32×32 Pixeln an. Wenn man komplexe Logos einfach auf diese Auflösung runterskaliert, sehen diese oft unscharf aus und die Details gehen verloren.

In diesem Fall solltest du dir in einem Grafikprogramm eine vereinfachte Version deines Logos erstellen. Das Ziel muss es sein, eine Grafik mit wenigen Details zu erstellen, welche auch bei 32×32 Pixeln scharf dargestellt werden kann. Dazu kannst du einige Details deines Logos weglassen. Alleine über die Farbgestaltung lässt sich schon der Zusammenhang zu deiner Webseite herstellen.

Welches Grafikprogramm verwenden?

Wenn du noch kein favorisiertes Grafikprogramm hast, kannst du dir diese beiden kostenlosen Tools ansehen:

  • Canva ist ein beliebtes Online-Tool
  • Gimp ist ein Offline-Tool für alle Plattformen

Favicon Dateiformat

Das geläufige Dateiformat für Favicons ist das ICO-Format. Nachdem du deine Icon-Grafik erstellt hast, kannst du diese als .ico Datei abspeichern. Nicht alle Grafikprogramme unterstützen dieses Dateiformat. In dem Fall kannst du auch ein Online-Tool für die Konvertierung verwenden.

Favicon einbinden

Nach der Erstellung des Favicons musst du dieses noch in deine WordPress Seite einbinden. Hierfür gibt es mehrere Wege:

  • Upload ins Root Verzeichnis
  • Einbinden über das Theme
  • Nutzung eines Plugins

Upload ins Root Verzeichnis

Am einfachsten ist es, der ICO-Datei den exakten Namen favicon.ico zu geben. Anschließend muss diese nur noch per FTP in das Root Verzeichnis deiner Domain hochgeladen werden. Die meisten Browser rufen nämlich beim Aufruf einer Webseite automatisch auch die URL www.deine-domain.de/favicon.ico auf und suchen hier nach einem Favicon.

Nachdem du die Datei hochgeladen hast, sollten die Browser hier fündig werden und das Favicon anzeigen. Damit dieser Automatismus funktioniert, muss die Datei aber exakt den beschriebenen Namen haben und sich im Root Verzeichnis, wo auch deine WordPress Installation liegt, befinden.

Einbinden über das Theme

Wenn du das Favicon nicht direkt in das Root Verzeichnis mit dem festgelegten Dateinamen laden möchtest, muss dem Browser der alternative Pfad mitgeteilt werden. Viele Themes bringen in den Einstellungen ebenfalls eine Möglichkeit mit, ein Favicon mit beliebigem Namen hochzuladen. Dieser Pfad wird dann automatisch im HTML Code eingebunden, damit der Browser es findet und anzeigen kann.

Favicon in Theme Einstellungen einbinden

Der Screenshot zeigt die entsprechende Einstellung vom Divi und Extra Theme.

Nutzung eines Plugins

Als weitere Möglichkeit lassen sich Favicons mit Hilfe eines Plugins einbinden. In der WordPress Plugin Datenbank finden sich unzählige Varianten für diese Aufgabe. Eine der aktuellsten Lösungen ist das Plugin Favicon by RealFaviconGenerator. Dieses kann nicht nur Icons in der bekannten Standardauflösung erstellen und einbinden. Das Plugin generiert auch höher aufgelöste Icons beispielsweise für Geräte mit Retina Display.

Favicon ändern

Zur Änderung deines Favicons musst du eine neue entsprechende Grafik erstellen und auf dem von dir bevorzugten Weg einbinden. Trotzdem zeigt dein Browser in den meisten Fällen weiterhin das alte Favicon an. Grund dafür ist der Browser-Cache, der das Icon nach dem ersten Abruf etwa zur Anzeige in den Lesezeichen zwischenspeichert. Du kannst hier nun einfach abwarten, bis der Cache automatisch erneuert wird oder diesen einmal manuell löschen.

Fazit

Die Nutzung eines Favicons ist für die meisten Webseiten sinnvoll. So finden deine Besucher deine WordPress Seite in ihren Favoriten oder bei vielen geöffneten Browser-Tabs leicht wieder. Mit den beschriebenen Schritten kannst du dir eine passende Grafik für ein Favicon erstellen und in WordPress einbinden.

Das könnte dich auch interessieren