WordPress-Favicon ändern: Du wirst überrascht sein, wie wichtig das Favicon auch heute noch ist

Das Favicon existiert seit den Urzeiten des Internets.

Das kleine Symbolbild dient dabei vorwiegend als Symbol für den Browser, wird mittlerweile aber auch in Suchmaschinen angezeigt. Im besten Fall sagt das kleine Bild mehr als tausend Worte und macht neugierig auf mehr. Im schlimmsten Fall ist es einfach nur da.

Doch was hat es mit dem WordPress-Favicon auf sich?

Wie lässt sich das Favicon in WordPress anpassen, verändern und für die eigene Website perfektionieren?

Braucht es überhaupt noch ein Favicon oder ist das kleine Symbol, meist in Form einer .ico Datei, nicht längst aus der Mode gekommen?

Letzteres ganz sicher nicht, denn du wirst überrascht sein, wie wichtig das Favicon auch heute noch ist.

Das alles und noch viel mehr werde ich dir im Folgenden einmal klären.

Vor allem aber zeige ich dir, worauf es heutzutage ankommt, wenn es um das WordPress-Favicon geht. Also welche Dateitypen Sinn ergeben und was der tatsächliche Nutzen des Favicons im Alltag ist.

Der Begriff Favicon steht eigentlich für »Favorite Icon«.

Das Bild selbst hingegen wird größtenteils in der Tab-Leiste des Browsers präsentiert, um einfacher zwischen den verschiedenen Websites unterscheiden zu können. Einige Browser, wie Safari, haben Favicons zudem lange vernachlässigt, doch inzwischen sind die kleinen Bilder auch bei Apple nicht mehr wegzudenken. Und wie in der Einleitung schon erwähnt, haben auch Suchmaschinen vor einigen Jahren damit angefangen, die Favicons in den Suchergebnissen anzuzeigen.

Ein auffälliges Favicon erhöht hier also die Klickrate.

Doch warum ist das so?

Vermutlich, weil es uns viel leichter fällt, ein Symbol wahrzunehmen, als einen längeren Text zu verstehen. Wer eine bekannte Marke im Favicon erkennt, weiß sofort, dass das Ergebnis ihn dorthin führen wird. Es hat etwas sehr »Offizielles« und schafft sofort Vertrauen bei den Nutzerinnen und Nutzern.

Außerdem ergänzt es den Titel, ähnlich wie ein Teaserbild in einem Beitrag. Bild und Text funktionieren gemeinsam einfach immer noch am besten und entfalten eine starke Wirkung, die einander befruchtet.

Wer »Apfel« liest, denkt sich einen Apfel. Wer »Apfel« liest und einen leckeren, schmackhaften Apfel sieht, hat hingegen sofort die Verknüpfung, ganz ohne eigenes Denken.

Doch spinnen wir diese Theorie mal nicht zu weit und machen auch nicht mehr daraus, als es ist.

Fakt ist einfach, dass Favicons im Internet weltweit verwendet werden, sowohl im Browser als auch in Suchmaschinen oder RSS-Readern. Sie sind also wichtig. Wichtiger sogar als je zuvor, denn fehlt ein Favicon, wirkt das inzwischen fast ein wenig merkwürdig.

Eine seriöse Website ohne Favicon? Undenkbar!

Genau deshalb benötigt deine WordPress Website ein Favicon.

Ursprünglich durfte das Favicon nur als eine .ico Datei vorliegen.

Auch heute ist es noch so, dass Favicons immer auch als .ico vorhanden sein sollten, da der Support hier einfach durchweg vorhanden ist. Speziell dann, wenn Browser automatisch nach Favicons suchen, schauen sie meist nur, ob ein »favicon.ico« vorhanden ist. Mit der Windows-ICO-Datei fängt also alles an. Unterstützt werden inzwischen aber folgende Typen.

Das WordPress-Favicon muss dabei mindestens 16 × 16 Pixel groß sein, also quadratisch und im Seitenverhältnis 1:1 vorliegen. Viele Geräte zeigen das Favicon unterschiedlich groß an, weshalb Favicon-Generatoren gerne unzählige Größen erstellen. Das würde ich jedoch vermeiden und dir davon abraten.

Vielmehr empfehle ich dir, eine Größe von 32 × 32 Pixeln zu wählen. Die ist ideal für Tabs und die Anzeige in Suchmaschinen. Auf diese Weise vermeidest du außerdem, dass du am Ende dutzende unterschiedliche Favicon-Dateien verwalten musst.

Meinungen gibt es hier viele.

Ich selbst habe jahrelange Erfahrung mit WordPress und Jahrzehnte Erfahrung mit Websites im Allgemeinen. Im Grunde hat sich herausgestellt, dass es am besten ist, eine gängige und breit unterstützte »favicon.ico« einzubinden. Allerdings ergänzt mit einem Favicon im modernen SVG-Format und einem größeren Bild als Apple Touch Icon, welches für den Safari Browser wichtig ist. Das sieht im Code dann so aus:

Der Eintrag »sizes="32x32"« ist wichtig, weil es einen Chrome Bug gibt, der ansonsten die Icon-Datei statt der SVG verwendet.

Prinzipiell nutzen fast alle modernen Browser das SVG-Favicon. Das Favicon als .ico dient also lediglich als Backup, wenn SVG nicht unterstützt wird. Das Apple Touch Icon hingegen wird vor allem im Safari Browser angezeigt, zum Beispiel, wenn Besucherinnen und Besucher die Website als Favorit abspeichern.

Es ist ebenso wichtig wie das Favicon, da iPhones sehr verbreitet sind und das Bild dort in den Favoriten prominent angezeigt wird, also eine wichtige Rolle für das Branding spielt.

Neben dem Favicon als .ico braucht es also immer auch eine SVG-Datei.

Die ist für Neulinge natürlich schwieriger zu erstellen. Du kannst aber auch auf das SVG-Favicon verzichten. Für Profis sind SVG-Dateien meist ideal, da sie skalierbare Grafiken enthalten, also niemals unscharf oder pixelig werden.

Ein Logo als SVG hinterlegt, ist also immer die beste Wahl. Wenn du keine SVG erstellen kannst, lässt du den Eintrag einfach weg und kümmerst dich stattdessen nur um die »favicon.ico« und das »apple-touch-icon.png«.

Beides reicht bereits völlig aus.

Im Grafikprogramm deiner Wahl solltest du mit dem Apple Touch Icon starten. Das ist nämlich größer und muss immer 180 × 180 Pixel groß sein. Hast du das dann erstellt und gespeichert, kannst du aus diesem wiederum ein Favicon generieren.

Ein einfaches und richtig gutes Tool dafür, auch wenn es alt aussieht, ist Favicon Pro. Ich mag das Online-Tool vordergründig deshalb, weil es mir exakt das richtige Favicon erstellt, und zwar in einer vergleichsweise geringen Dateigröße (einige andere Tools blähen .ico Dateien sehr auf).

Probier das Tool also gerne mal aus oder nutze stattdessen einen der hundert anderen Anbieter, denn Favicon-Generatoren gibt es wie Sand am Meer.

Theoretisch über die WordPress-Option Website-Icon. Die findest du unter »Einstellungen« und dort »Website-Icon«. Einfach ein Logo hochladen, schon wird es entsprechend auch als Favicon verwendet.

Alternativ gehst du in den Bereich »Design«. Dort dann auf »Themes« und bei dem von dir verwendeten Theme auf »Customizer«. Hier findest du jetzt, meist ganz oben, den Block »Website-Logo«. Lade dein Favicon als Bild hoch, anschließend erscheint die Option, um es als Website-Icon zu aktivieren. Das Gleiche wie oben also, nur mit einem kleinen Umweg.

Meine Empfehlung ist natürlich der direkte Weg, um die Ausgabe im Code bestmöglich kontrollieren zu können. Dazu gehst du unter »Design« in den »Editor« und öffnest die »header.php« von deinem WordPress Theme. Hier fügst du dann den Code-Block von oben hinzu. Also den hier.

Die Links passt du noch entsprechend an. Du könntest die Favicons auch einzeln in WordPress hochladen und dann die Links aus der Mediathek kopieren. Ich lade sie immer in den Theme-Ordner hoch und verlinke sie dann entsprechend im Header. Für mich gehört das Favicon nämlich immer mit zum jeweiligen WordPress Theme. Außerdem ist es die erste Änderung, die ich vornehme, wenn ich einen neuen WordPress Blog erstelle.

Falls du gar keine Ahnung davon hast, kannst du das Favicon auch via Plugin generieren und einfügen. Das ist aber ein eher unsauberer Weg, der in meinen Augen viel zu aufwendig ist und nur wieder Ballast erzeugt. Besser ist es immer, so etwas händisch in WordPress zu integrieren.

Wie erwähnt wirken Favicons oft altbacken, sind aber moderner denn je. Denn egal wo, überall werden die kleinen Symbole inzwischen ausgelesen und angezeigt. Egal, ob im Browser bei den Tabs oder innerhalb von Suchmaschinen. Ein cleveres Favicon zieht immer auch Aufmerksamkeit auf deine Website.

Ohne geht es einfach nicht.

Wichtig ist nur, keinen Spam damit zu betreiben. Es sollte weder blinken noch nerven oder gar unangebrachtes präsentieren. Integriere also nur dein Logo, die verwendeten Farben deiner Website und halte es möglichst simpel. Gerade Google ist allergisch auf Pfeile, Häkchen oder andere nach Aufmerksamkeit schreiende Symbolik.

Dadurch, dass das Favicon überall im Browser angezeigt wird, sollte es auch einen entsprechenden Nutzen und Wiedererkennungswert besitzen. Da du dabei aber nur begrenzt Platz hast, sind Spielereien meist überflüssig. Konzentriere dich auf das, was deine Website ausmacht und lass die Nutzerinnen und Nutzer es im Favicon wiederkennen. Das schafft Vertrauen.