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.

 

Seit über neun Jahren bin ich in der wunderbaren Welt von WordPress unterwegs. Heute erstelle ich nicht nur erfolgreich eigene WordPress-Websites, sondern sorge auch in einer bekannten Online-Marketing-Agentur für glückliche Kunden – auch hier oft dank WordPress.