WordPress Favicon ändern: So legst du das Website-Icon fest
Möchtest du das WordPress Favicon ändern? Das Favicon ist das kleine Symbol, das neben der URL im Webbrowser erscheint. Es ist eine gute Möglichkeit, deiner Website ein gewisses Branding zu verleihen und sie von der Konkurrenz abzuheben.
Die kurze Antwort vorweg: Du legst das Favicon im Dashboard unter Einstellungen › Allgemein beim Punkt Website-Icon fest. Dieser Weg funktioniert seit WordPress 6.5 in jedem Theme. In diesem Beitrag zeige ich dir die Schritte im Detail, dazu die zusätzlichen Favicon-Optionen von vier bekannten Themes und die Tipps, worauf du bei der Wahl deines Favicons achten solltest.
Was ist ein Favicon und warum solltest du es verwenden?
Das Wort Favicon ist die Abkürzung für Favoritensymbol und stammt ursprünglich von der Favoriten-Funktion des Internet Explorers (wird von vielen Browsern auch Lesezeichen genannt). Hierbei handelt es sich um ein kleines Bild, das neben der URL der Website im Webbrowser angezeigt wird. Es wird auch auf der Registerkarte für deine Website angezeigt.
Favicons werden verwendet, um Nutzern zu helfen, Websites, die sie mit einem Lesezeichen versehen oder zu ihrer Favoritenliste hinzugefügt haben, schnell zu erkennen.
Außerdem ist das Hinzufügen eines Favicons zur WordPress Webseite eine gute Möglichkeit, das Branding der Website zu verbessern.
Gut zu wissen
Alternative Namen für Favicon sind unter anderem auch Browsersymbol, Favoritensymbol, Verknüpfungssymbol, Registerkartensymbol, URL-Symbol und Lesezeichensymbol.
WordPress Favicon ändern
Für das Favicon brauchst du nur ein Bild: quadratisch und mindestens 512 x 512 Pixel groß. Genau diese Vorgabe nennt dir WordPress auch selbst im Einstellungen-Dialog. Aus diesem einen Bild erzeugt WordPress im Hintergrund automatisch die kleineren Varianten, die je nach Gerät und Software ausgespielt werden, zum Beispiel für Browser-Tabs, Lesezeichen, Tablets und die Startbildschirme von Smartphones.
Website-Icon über die Einstellungen festlegen (der schnellste Weg)
Seit WordPress 6.5 sitzt das Favicon fest in den allgemeinen Einstellungen. Dieser Weg ist unabhängig vom Theme und dauert keine zwei Minuten:
- Öffne im Dashboard Einstellungen › Allgemein.
- Klicke beim Punkt Website-Icon auf Website-Icon auswählen.
- Lade dein Bild hoch oder wähle es aus der Mediathek aus.
- Schneide es bei Bedarf zu, bestätige mit Website-Icon festlegen und speichere die Seite unten mit Änderungen speichern.
Setzt du ein Block-Theme ein, zum Beispiel Twenty Twenty-Five, ist das sogar der einzige Weg im Dashboard. Unter Design findest du dort nur noch Themes, Editor und Schriften, den Customizer gibt es in Block-Themes nicht mehr.
Viele klassische Themes bringen zusätzlich eigene Favicon-Optionen mit, meist im Customizer. Nachfolgend zeige ich dir diese Alternative für vier verbreitete Themes:
Meine Empfehlung hinsichtlich WordPress Themes:
Kadence WP: Favicon ändern
Kadence bietet das Favicon zusätzlich im Customizer an. Rufe ihn dafür im Dashboard auf. (Dashboard › Design › Customizer)
Sobald der Customizer geöffnet ist, kann im linken Navigationsmenü der Reiter Seitenidentität ausgewählt werden.
Nun kann das gewünschte Favicon festgelegt werden (wird hier von Kadence als Website-Icon bezeichnet).
Nach einem Klick auf Website-Icon auswählen kann entweder ein Favicon hochgeladen werden oder ein bereits vorhandenes Bild aus der WordPress Mediathek ausgewählt werden.
Astra: WordPress Favicon anpassen
Ähnlich wie beim Kadence Theme findest du auch beim WordPress Theme Astra eine Einstellung für das Favicon im Customizer. (Dashboard › Design › Customizer)
Klicke im Customizer auf den Menü-Punkt Site Identity. Anschließend kann das Favicon festgelegt werden. (Hier wird anstelle von Favicon der Begriff Website-Icon verwendet).
Hello Elementor: WordPress Favicon
Das Hello Elementor Theme ist ein relativ spezielles WordPress Theme: Es ist auf die Verwendung von Elementor Pro ausgelegt und lässt sich auch nur mit diesem wirklich gut verwenden.
Um im WordPress Theme Hello Elementor das Favicon einzustellen, musst du zunächst den Customizer aufrufen. Wähle anschließend im Customizer-Menü den Reiter Website-Informationen aus.
Avada WordPress Theme: Favicon einstellen
Das WordPress Theme Avada bietet einerseits die Möglichkeit, das Favicon im Customizer festzulegen. Dies funktioniert bei diesem Theme genauso, wie ich es für das Theme Hello Elementor beschrieben habe.
Andererseits bietet Avada extra eigene Avada-Optionen. In diesen Optionen kann und sollte bei Verwendung des Avada Themes die Einstellung des Favicons erfolgen.
Möchtest du das WordPress Favicon ändern, so gehe mit dem Mauszeiger im Dashboard über den Eintrag Avada und wähle dort Optionen aus. Anschließend öffnet sich die Ansicht der unzähligen (und meiner Meinung nach sehr unübersichtlichen) Einstellungen, die Avada bietet. Klicke hier auf den Menü-Eintrag Logo und wähle danach Favicon aus. Nun kannst du das Favicon festlegen als auch ein Apple iPhone Icon und ein Apple iPad Icon bestimmen.
WordPress Plugin: Favicon by RealFaviconGenerator
Nicht jedes WordPress Theme stellt Optionen für das Favicon bereit. Und manchmal ist man mit den Möglichkeiten, die ein Theme im Bereich Favicon bietet, nicht zufrieden. Schließlich sollte das WordPress Theme das festgelegte Favicon angepasst für verschiedene Endgeräte ausliefern. Doch leider ist diese Funktionalität nicht immer gegeben.
Eine Möglichkeit etwaige Probleme mit dem WordPress Favicon zu beheben, ist der Einsatz des Plugins Favicon by RealFaviconGenerator. Wie der Name schon vermuten lässt, handelt es sich bei diesem Plugin um einen Favicon Generator. Genauer gesagt: Es wird auf den Favicon-Generator der Website https://realfavicongenerator.net/ zugegriffen.
Nach der Installation und Aktivierung des Plugins, kannst du im Dashboard unter Design › Favicon die Einstellungen für dein WordPress Favicon vornehmen. Nachdem du ein Bild als Favicon festgelegt hast, wird über eine API auf den Favicon Generator zugegriffen. Mit diesem generiert das Plugin mehrere Favicons, die jeweils passend für die verschiedenen Endgeräte und Anwendungen ausgegeben werden (zum Beispiel für iPhone, Tablet, Internet Explorer, etc.).
WordPress Favicon manuell per FTP einfügen (Notlösung)
Du kannst ein Favicon auch manuell per FTP-Client hochladen, zum Beispiel mit FileZilla. Lege die Datei dafür unter dem Namen favicon.ico in das Stammverzeichnis deiner WordPress-Installation. Browser fragen diese Adresse automatisch ab.
Wirklich nötig ist das heute nicht mehr, denn der Weg über die Einstellungen liefert zusätzlich die passenden Größen für Smartphones und Tablets aus. Betrachte den FTP-Weg deshalb als Notlösung, etwa wenn du an das Dashboard gerade nicht herankommst. Bleibt dein Favicon trotz aller Versuche unsichtbar, hilft dir die WordPress Soforthilfe von One Step Webdesign schnell weiter.
Fazit
Das Favicon soll den Wiedererkennungswert deiner Website steigern und verbessert gleichzeitig die Nutzerfreundlichkeit von Browser-Lesezeichen. Zudem stellt das WordPress Favicon eine Möglichkeit dar, das Branding zu verfeinern.
Der zuverlässigste Weg führt über Einstellungen › Allgemein › Website-Icon. Er gilt für jedes Theme. Viele klassische Themes bieten daneben eigene Optionen im Customizer an, nötig sind sie aber nicht.
Ich persönlich passe stets das Favicon an die Website an. Dieser Prozess ist schnell erledigt und die Website punktet dadurch nicht nur im Bereich der Wiedererkennung, es sieht auch einfach professioneller aus.
Übrigens: Das Favicon ist nur ein kleiner Baustein eines stimmigen Auftritts. Wenn du deine Website von Grund auf professionell und einheitlich aufgesetzt haben möchtest, sieh dir das Angebot für WordPress Webdesign an oder melde dich einfach direkt.
Empfehlung / Tipp
Bei der Erstellung von einem WordPress Favicon gibt es einige wenige Dinge zu beachten. Der wichtigste Teil des Prozesses ist die Auswahl eines Bildes, das leicht zu erkennen ist und auf allen Geräten gut angezeigt wird.
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
