Favicon bei WordPress-Website einbinden

Ein Favicon hat jeder Internetnutzer bestimmt schonmal gesehen, auch wenn viele aus dem Stegreif heraus nicht wissen, worum es sich hierbei handelt. Ein Favicon ist das kleine Bildchen, das du direkt im Tab bzw. in den Lesezeichen siehst, solltest du die Seite zum Beispiel in deinem Browser abgespeichert haben. Mittlerweile zeigt auch Google in den Suchergebnissen das Favicon neben dem Titel der Ergebnisse an.

Heute will ich mich damit auseinandersetzen, wie du ein Favicon bei deiner WordPress-Seite einbinden kannst und warum du dies überhaupt machen solltest.

Warum ein Favicon hinterlegen?

Der Grund ist einfach: Das Favicon hilft bei der Identifizierung deiner Seite. Favicons sind oft kleinere Versionen des eigenen Logos. Wer ein Favicon bei seiner WordPress-Website hinterlegt, unterstützt seine Leser dabei, dass sie die eigene Seite schnell wieder finden können unter all den bestehenden Lesezeichen. Denke dabei beispielsweise an die Favoritenleiste deines Internetbrowsers. Wenn man hier die Seitennamen entfernt, weil man möglichst viele speichern will, kann man keine Seite mehr von der anderen ohne Favicon unterscheiden.

Selbiges gilt natürlich auch dann, wenn deine Besucher mehrere Tabs geöffnet haben und deine Website dabei gerade nicht im Fokus ist. Auch dann hilft as kleine Icon dabei, sie alle voneinander zu unterscheiden. Es dient also schlichtweg auch dem eigenen Branding.  Wusstest du übrigens, dass deine Besucher deine Seite auch auf ihrem Home-Screen am Smartphone (z.B. auf dem iPhone) speichern können? Auch dann wird auf dein individuelles Favicon zurückgegriffen und dieses als Bildchen hinterlegt.

Mittlerweile hilft das Favicon auch, in den Suchergebnissen von Google aufzufallen. Hier zeigt der Suchmaschinenbetreiber die Favicons schließlich mittlerweile direkt neben dem Ergebnis an. Wer klug ist, gestaltet sein Favicon also auffällig, um mehr Aufmerksamkeit zu generieren.

Wie das Favicon einbinden?

Vor ein paar Jahren war das noch sehr viel komplizierter, als die kleine Grafik ein ganz bestimmtes Dateiformat haben musste, damit es als Favicon hinterlegt werden konnte. Dafür wurden dann spezielle Generatoren genutzt, die es auch heute noch gibt. Der Bedarf solcher Generatoren ist auf jeden Fall noch immer da, denn nicht jedes CMS (Content-Management-System, wie WordPress) ist dazu in der Lage, jenes Icon automatisch zu hinterlegen. Bei statischen HTML-Websites ist es natürlich auch nach wie vor ein manueller Prozess.

Unter den Website-Informationen im WordPress-Customizer kann ich mein Favicon selbst hochladen.

WordPress erlaubt es aber durch die meisten Themes und die WordPress-Grundeinstellungen bereits. Im Customizer wird dann einfach das Favicon hinterlegt. Hierfür gibt es dann einen Abschnitt, der entweder mit dem Begriff oder alternativ „Site Icon“ ausgezeichnet ist.

Favicon einbinden mit WordPress-Plugin

Sollte das bei dir nicht klappen, kannst du hier mit Plugins aushelfen. Lies dir daher am besten die Detailseiten und Erfahrungsberichte zu den WordPress-Plugins genau durch und überlege, ob ein manueller Einbau nicht lohnenswerter ist.

Favicon manuell einbinden

Alternativ kannst du es auch manuell durch einen Code hinterlegen. Öffne dafür die Datei header.php und füge folgendes in die Datei ein:

<link rel=“icon“ href=“https://www.deinblog.de/deinfavicon.png“ type=“image/x-icon“ />
<link rel=“shortcut icon“ href=“https:// www.deinblog.de/deinfavicon.png“ type=“image/x-icon“ />

Fertig! Dein Favicon sollte nun hinterlegt sein. Damit die Änderungen dann auch übernommen werden, solltest du zur Sicherheit noch den Cache löschen – sowohl den Cache deiner WordPress-Website als auch den deines Internetbrowsers.

Wie erstellt man ein Favicon?

Favicons sind Grafiken, die im besten Fall 512×512 Pixel groß sind. So stellst du dir sicher, dass das Favicon auch als Lesezeichensymbol auf Smartphones scharf und deutlich dargestellt wird.

Du kannst aber – sofern du es über WordPress direkt inkludierst – auch eine größere Datei anlegen. Dabei musst du dann nur darauf achten, dass sie über quadratische Maße verfügt. Wichtig ist es, dass jene Grafik auch in der kleinen Ausführung, wie man sie beispielsweise in der Tab-Ansicht innerhalb des Browsers findet, klar zu erkennen ist. Auf kleine Details und vielen Design-Elementen sollte also verzichtet werden. Am einfachsten ist es, wenn du für die Erstellung des Favicons ein Grafikprogramm wie Photoshop oder Gimp dazu nutzt.

 

WordPress-Enthusiast

Ich bin Pascal und betreibe diesen Blog, um mein Wissen rund um das beliebte System WordPress mit dir zu teilen. Egal, ob du gerade erst anfängst oder schon Erfahrung hast – ich zeige dir, wie du deine Website einfach erstellst, anpasst und optimierst.

* Bei einem mit einem Sternchen gekennzeichneten Link handelt es sich in der Regel um einen sogenannten Partnerlink. Dabei kann ich einen gewissen Prozentsatz des unveränderten Kaufpreises als Provision erhalten.

Andere Beiträge

  • Test für Elemente

    edfefef Post Page Add your splash of colors, pick your header, choose your favorite font — all with a few quick clicks. No coding skills required. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio…

  • WordPress-Website erstellen: Diese Anleitung hilft dir in 2025

    WordPress-Website erstellen: Diese Anleitung hilft dir in 2025

    Du möchtest deine eigene Website erstellen, weißt aber nicht, wo du anfangen sollst? Keine Sorge – mit WordPress kannst du ohne große Programmierkenntnisse eine professionelle Website selbst aufbauen. In diesem Artikel zeigen wir dir Schritt für Schritt, wie du eine WordPress-Website erstellen kannst. Ob du eine Anfängerin, Kleinunternehmerin oder Unternehmerin bist – diese Anleitung hilft…

  • WordPress-Themes für Architekten und Immobilienmakler

    WordPress-Themes für Architekten und Immobilienmakler

    Architekten und Immobilienmakler fischen zwar oft branchentechnisch im selben Gewässer, brauchen aber eine ganz unterschiedliche Herangehensweise, wenn es um die eigene Webpräsenz geht. Es ist wichtig, dass sie den aktuellen Zeitgeist perfekt einfangen, ihn präsentieren und gleichzeitig so zeitlos wie möglich bleiben, um sich einen Namen zu machen. Und noch nie war es so wichtig,…