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

Das Favicon gibt es schon seit den frühen Tagen des Internets. Das kleine Symbolbild erscheint im Browser-Tab, wird inzwischen aber auch in Suchmaschinen angezeigt. Im besten Fall weckt es Neugier und transportiert deine Marke – im schlimmsten Fall ist es einfach nur da. Doch wie sieht es mit dem WordPress-Favicon aus? Wie kannst du es anpassen oder optimieren? Brauchst du überhaupt noch ein Favicon – oder ist das kleine Symbol, meist als .ico-Datei, längst überholt? Die Antwort: Nein, das Favicon ist heute wichtiger denn je. Im Folgenden schauen wir uns an, worauf es bei Favicons in WordPress ankommt, welche Dateitypen sinnvoll sind und welchen Nutzen das kleine Symbol tatsächlich hat.

Das kleine Bild taucht vor allem in der Tab-Leiste des Browsers auf, damit du Websites leichter unterscheiden kannst. Manche Browser – wie Safari – haben Favicons lange ignoriert, doch inzwischen sind sie überall Standard. Selbst Suchmaschinen zeigen die Symbole inzwischen in den Ergebnissen an. Ein auffälliges Favicon kann dort sogar deine Klickrate erhöhen. Warum das so ist? Weil wir Symbole schneller wahrnehmen als Text. Erkennen Nutzer eine bekannte Marke im Favicon, wissen sie sofort: „Das ist die richtige Website.“ Es wirkt offiziell, schafft Vertrauen und ergänzt den Titel wie ein Teaserbild im Beitrag. Bild und Text zusammen entfalten eine viel stärkere Wirkung, als es Worte allein jemals könnten. Wer „Apfel“ liest, denkt an einen Apfel. Wer „Apfel“ liest und daneben einen glänzenden Apfel sieht, hat sofort das passende Bild im Kopf.

Fakt ist: Favicons sind weltweit im Einsatz – im Browser, in Suchmaschinen und sogar in RSS-Readern. Fehlt das Symbol, wirkt das inzwischen fast merkwürdig. Genau deshalb braucht auch deine WordPress-Website ein Favicon.

Früher durfte ein Favicon ausschließlich als .ico-Datei vorliegen. Und auch heute sollte diese Variante unbedingt vorhanden sein. Denn wenn Browser automatisch nach einem Favicon suchen, prüfen sie in der Regel nur, ob eine Datei mit dem Namen favicon.ico existiert. Mit dieser klassischen Windows-ICO-Datei hat alles begonnen. Inzwischen werden aber auch andere Formate unterstützt:

Das WordPress-Favicon muss dabei mindestens 16 × 16 Pixel groß sein – also quadratisch im Verhältnis 1:1. Viele Geräte stellen das Favicon in unterschiedlichen Größen dar. Deshalb erzeugen Generatoren gerne gleich ein ganzes Paket an Dateigrößen. Das klingt praktisch, führt aber schnell zu Chaos. Weniger Favicons sind oft mehr. Meine Empfehlung: Setze auf 32 × 32 Pixel. Diese Größe ist ideal für Tabs und für die Anzeige in Suchmaschinen. So bleibt es einfach, übersichtlich – und du vermeidest, dutzende verschiedene Favicon-Dateien pflegen zu müssen.

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:

<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Der Eintrag »sizes="32x32"« ist wichtig, weil es einen Chrome Bug gibt, der ansonsten die Icon-Datei statt der SVG verwendet. Prinzipiell [nutzen](https://caniuse.com/link-icon-svg) 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](http://www.favicon.pro/de/). 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.