In 4 Schritten WordPress Favicon einstellen, ändern und testen

Zusammenfassung

Diese vier Schritte sind notwendig um das WordPress Favicon zu ändern:

1. In WordPress als Administrator einloggen
2. Auf „Einstellungen > Allgemein“ klicken
3. Beim „Website-Icon“ ein Bild auswählen und „Änderungen speichern“ klicken
4. Zum Testen den Webseiten Cache leeren oder im Inkognito Tab öffnen

Dieser Weg gilt ab WordPress 6.5 und für jedes Theme. Bei älteren WordPress-Versionen und bei klassischen Themes geht es auch über „Design > Customizer“, bei Block-Themes zusätzlich über den Website-Editor. Beide Wege beschreibe ich weiter unten.

Im Folgenden erkläre ich die Schritte, best Practises und Hintergrundinformationen noch einmal im Detail.

Was ist ein Favicon

Ein Favicon ist ein kleines Symbol oder Icon, das eine Webseite repräsentiert. Es wird in der Adressleiste des Browsers neben der URL der Webseite angezeigt. Dieses kleine Icon hilft den Nutzern, Ihre Webseite in einer Reihe von offenen Tabs schnell zu identifizieren.

Wenn Sie mehrere Tabs in Ihrem Browser offen haben, ist das Favicon das kleine Bild, das in jedem Tab neben dem Seitentitel erscheint. Es ist ein visueller Hinweis, der es einfacher macht, zwischen verschiedenen Webseiten zu wechseln. Ein gut gestaltetes Favicon verbessert die Benutzererfahrung und fördert die Markenidentität.

Neben der Anzeige in Browser-Tabs und der Adressleiste wird das Favicon auch in den Google-Suchergebnissen angezeigt. Wenn jemand nach Ihrer Webseite sucht, wird das Favicon neben dem Titel und der Beschreibung Ihrer Seite in den Suchergebnissen erscheinen. Dies erhöht die Sichtbarkeit und Wiedererkennbarkeit Ihrer Marke.

Favicon Anforderungen

Favicon Größen

Die Größe des Favicons ist ein entscheidender Faktor für seine Wirksamkeit. Die am häufigsten verwendeten Größen sind 16×16, 32×32 und 48×48 Pixel. Einige moderne Browser unterstützen jedoch auch größere Favicons, die für Retina-Displays optimiert sind. Grundsätzlich sollte das Format jedoch immer quadratisch sein.

WordPress schlägt eine Größe von mindestens 512×512 Pixeln vor, um sicherzustellen, dass das Icon auf allen Geräten gut aussieht.

Favicon Dateiformat

Das Dateiformat ist ein weiterer wichtiger Aspekt bei der Erstellung eines Favicons. Die gängigsten Formate sind .ico, .png und .jpg. Das .ico-Format ist das traditionelle und am weitesten verbreitete, aber .png bietet mehr Flexibilität in Bezug auf Transparenz.

Favicon Design Best Practices

Neben der Größe und dem Format sollten Sie auch die Farbpalette und das Design des Favicons sorgfältig auswählen. Es sollte gut zum Design Ihrer Website und zu Ihrer Markenidentität passen. Ein schlecht gestaltetes Favicon kann einen negativen Eindruck hinterlassen, während ein gut gestaltetes Favicon die Benutzererfahrung verbessern kann.

WordPress Favicon ändern unter „Einstellungen > Allgemein“

Seit WordPress 6.5 steht das Website-Icon dort, wo auch Titel und Untertitel der Website stehen: unter „Einstellungen > Allgemein“. So beschreibt es auch die offizielle WordPress-Dokumentation zum Favicon. Der Weg funktioniert mit klassischen Themes genauso wie mit Block-Themes.

Auch wenn es Plugin-Alternativen gibt, mit denen man das WordPress Favicon ändern kann, sollte man sich nach den Best Practises richten und die eingebaute Einstellung von WordPress nutzen. Zu viele Plugins wirken sich nämlich negativ auf Sicherheit und Performance aus.

In WordPress einloggen

Loggen Sie sich in Ihr WordPress-Dashboard ein. Sie benötigen Administratorrechte, um diese Änderungen vornehmen zu können.

Im WordPress Backend Klick auf „Einstellungen > Allgemein“

Klicken Sie im Menü links auf „Einstellungen“. WordPress öffnet direkt die Seite „Allgemein“ mit den Grundeinstellungen Ihrer Website. Die Zeile „Website-Icon“ steht gleich unter „Website-Titel“ und „Untertitel“.

Website-Icon auswählen und speichern

Klicken Sie auf „Website-Icon auswählen“. Es öffnet sich die Mediathek. Laden Sie dort Ihr Favicon hoch oder wählen Sie ein vorhandenes Bild aus und klicken Sie auf „Als Website-Icon festlegen“. Ist das Bild nicht genau 512 × 512 Pixel groß, lässt WordPress Sie im nächsten Schritt einen quadratischen Ausschnitt wählen. Bestätigen Sie ihn mit „Bild zuschneiden“.

Danach zeigt WordPress eine Vorschau, wie das Icon im Browser-Tab und als App-Icon aussieht. Gespeichert ist es aber erst, wenn Sie unten auf der Seite auf „Änderungen speichern“ klicken. Diesen Schritt übersieht man leicht, weil die Vorschau das neue Icon schon zeigt.

Favicon über den Customizer ändern (klassische Themes)

Vor WordPress 6.5 war der Customizer der einzige eingebaute Weg. Bei klassischen Themes gibt es ihn weiterhin, er führt zur selben Einstellung. Bei Block-Themes blendet WordPress den Menüpunkt „Customizer“ aus. Er taucht dort nur auf, wenn ein Plugin oder das Theme eigene Customizer-Einstellungen mitbringt.

Im WordPress Backend Klick auf „Design > Customizer“

Navigieren Sie im Dashboard-Menü zum Bereich „Design“ und wählen Sie dort die Option „Customizer“ aus. Dies öffnet den WordPress Customizer, ein leistungsstarkes Tool, das eine Live-Vorschau Ihrer Änderungen bietet. Hier können Sie verschiedene Aspekte Ihrer Website anpassen, einschließlich des Favicons.

Im Customizer unter „Website-Informationen > Website-Icon“ austauschen

Im Customizer finden Sie auf der linken Seite verschiedene Einstellungsoptionen. Klicken Sie auf den Abschnitt „Website-Informationen“ und scrollen Sie dort nach unten bis zur Option „Website-Icon“, wo Sie Ihr neues Favicon hochladen können. Klicken Sie auf „Hinzufügen“ oder „Ändern“, um ein neues Bild auszuwählen oder ein vorhandenes zu ersetzen.

Nachdem Sie das gewünschte Bild ausgewählt haben, klicken Sie auf „Veröffentlichen“, um die Änderungen zu speichern. Ihr neues Favicon sollte jetzt auf Ihrer Website sichtbar sein.

Favicon bei Block-Themes im Website-Editor setzen

Auch mit einem Block-Theme ist „Einstellungen > Allgemein“ der einfachste Weg. Soll Ihr Logo gleichzeitig das Favicon sein, geht es zusätzlich im Website-Editor:

1. Öffnen Sie „Design > Editor“ und dort das Template oder den Template-Teil mit Ihrem Logo, meistens den Header.
2. Klicken Sie auf den Block „Website-Logo“.
3. Aktivieren Sie in der Seitenleiste rechts den Schalter „Als Website-Icon verwenden“.
4. Klicken Sie oben rechts auf „Speichern“.

WordPress verwendet das Logo dann auch als Website-Icon. Das lohnt sich nur, wenn das Logo quadratisch ist und auch in 16 × 16 Pixeln noch erkennbar bleibt. Ein breites Logo mit Schriftzug wird im Browser-Tab unlesbar klein. Für ein eigenes Icon, das sich vom Logo unterscheidet, verweist WordPress direkt im Block auf die Website-Icon-Einstellungen unter „Allgemein“.

Favicon testen

Nachdem Sie Ihr neues Favicon in WordPress hinzugefügt haben, ist es wichtig zu überprüfen, ob es korrekt angezeigt wird. Der Browser wird das alte Favicon sehr wahrscheinlich zwischengespeichert haben. Aus diesem Grund muss die Webseite mit leerem Cache neu geladen werden. Hierfür gibt es zwei Möglichkeiten.

Cache leeren

Um sicherzustellen, dass das neue Favicon angezeigt wird, leeren Sie den Browser-Cache über die Einstellungen oder den Verlauf Ihres Browsers.

Inkognito Tab nutzen

Schließen Sie zunächst alle offenen Inkognitofenster. Öffnen Sie jetzt ein neues Inkognitofenster in Ihrem Browser, um das aktuellste Favicon ohne Cache-Einfluss zu sehen.

Machen Sie Ihr Favicon besonders

Anderes Favicon im Mobile verwenden

Ein separates Favicon für mobile Geräte kann die Benutzererfahrung auf kleineren Bildschirmen verbessern.

Animiertes Favicon verwenden

Ein animiertes Favicon, meist im GIF-Format, fügt Ihrer Website Dynamik hinzu. Es wird je nach Browser jedoch manchmal als statisches Bild und manchmal als Animation angezeigt.

Für beide dieser einzigartigen Favicon-Funktionen können Sie das „All-in-One Favicon“ Plugin verwenden.

Häufig gestellte Fragen zu Favicons