WordPress: Favicon einbinden – so funk­tio­niert’s

In der Tab-Leiste Ihres Browsers öffnet sich mit jeder neuen Seite ein eigener Tab. In diesem sind der Sei­ten­ti­tel der Website sowie ein kleines Symbol ab­ge­bil­det – das Favicon. Beide In­for­ma­tio­nen er­leich­tern dem User die Iden­ti­fi­zie­rung einer Homepage und die Ori­en­tie­rung, wenn mehrere Tabs gleich­zei­tig geöffnet sind. Das Favicon einer Website ist darüber hinaus Teil des Un­ter­neh­mens-Brandings und ver­bes­sert die User Ex­pe­ri­ence. Ihnen stehen drei Mög­lich­kei­ten zur Verfügung, ein Favicon in WordPress ein­zu­fü­gen. Wir erklären Schritt für Schritt, wie diese funk­tio­nie­ren und welche Vorteile jede einzelne Mög­lich­keit mit sich bringt.

Wozu ein Favicon in WordPress einfügen?

Der Begriff Favicon ist die Abkürzung für „Favorite Icon“. Dies kleine Icon ist ein in­te­gra­ler Be­stand­teil des Web-Auftritts eines Un­ter­neh­mens. Es wird in der Tab-Leiste, der Le­se­zei­chen-Leiste, bei WordPress-Mobile-Apps, Home-Icons sowie in mobilen Such­ergeb­nis­sen angezeigt. Dem­entspre­chend ist es emp­feh­lens­wert, ein aus­sa­ge­kräf­ti­ges und ein­deu­ti­ges Symbol als Favicon aus­zu­wäh­len. Das bringt viele Vorteile:

• Es steigert die Se­rio­si­tät und Pro­fes­sio­na­li­tät einer Website.
• Es er­leich­tert dem User, das Un­ter­neh­men und seine Dienst­leis­tung im Web leichter zu erkennen und ver­bes­sert so die User Ex­pe­ri­ence der Website.
• Es wirkt sich positiv auf die Such­ma­schi­nen­op­ti­mie­rung aus.
• Hat ein User im Browser viele Tabs gleich­zei­tig geöffnet, sind die Seiten-Titel aus­ge­blen­det. Das Favicon hingegen bleibt immer sichtbar.

Ein Favicon in WordPress einfügen

Ihnen stehen drei Mög­lich­kei­ten offen, ein Favicon in WordPress ein­zu­fü­gen: Mit dem WordPress Cus­to­mi­zer, einem Plug-in oder manuell. Im Folgenden stellen wir Ihnen die Optionen genauer vor.

Methode 1: Der WordPress Cus­to­mi­zer

Die ein­fachs­te und schnells­te Methode, ein Favicon in WordPress ein­zu­fü­gen, steht seit der WordPress-Version 4.3 zur Verfügung. Mit diesem Favicon-WordPress-Tool laden Sie das Favicon hoch, schneiden es bei Bedarf zu und richten es mit wenigen Klicks ein.

Bei dieser Variante ist die emp­foh­le­ne Min­dest­grö­ße für ein Favicon 512 x 512 Pixel. Im Browser-Tab wird das Bild jedoch in einer Größe von 16 x 16 Pixel angezeigt. Achten Sie daher darauf, dass Ihr Favicon auch in dieser Größe leicht erkennbar ist. Wir erklären Schritt für Schritt, wie Sie mit dem Cus­to­mi­zer ein Favicon in WordPress einfügen.

Schritt 1: Cus­to­mi­zer öffnen

Folgen Sie im WordPress-Dashboard dem Pfad „Design“ → „Cus­to­mi­zer“.

Schritt 2: Website-In­for­ma­tio­nen öffnen

Der WordPress-Cus­to­mi­zer öffnet sich. An­schlie­ßend wählen Sie den Abschnitt „Website-In­for­ma­tio­nen“ aus.

Schritt 3: Favicon-Auswahl öffnen

In diesem Bereich können Sie Titel und Un­ter­ti­tel der Website festlegen. Diese In­for­ma­tio­nen werden neben dem Favicon im Browser-Tab angezeigt. Klicken Sie im Abschnitt „Website-Icon“ auf den Button „Website-Icon auswählen“, um das Favicon in WordPress an­zu­pas­sen.

Schritt 4: Favicon auswählen

Die WordPress-Mediathek öffnet sich. Wenn Sie das Favicon bereits hoch­ge­la­den haben, wählen Sie dieses nun aus. An­dern­falls klicken Sie auf den Tab „Dateien hochladen“ und wählen die ent­spre­chen­de Datei auf Ihrem Computer aus. Be­stä­ti­gen Sie Ihre Auswahl mit einem Klick auf den Button „Auswählen“.

Schritt 5: Favicon zu­schnei­den

An­schlie­ßend haben Sie die Mög­lich­keit, das Bild zu­zu­schnei­den. WordPress zeigt im rechten Bereich au­to­ma­tisch eine aktuelle Vorschau des Favicons an. Sobald Sie den Bild­aus­schnitt fest­ge­legt haben, be­stä­ti­gen Sie Ihre Auswahl mit dem Button „Bild zu­schnei­den“. Hat Ihr Favicon bereits die richtige Größe, wählen Sie „Zu­schnei­den über­sprin­gen“.

WordPress übernimmt das Favicon au­to­ma­tisch. Um das WordPress-Favicon zu ändern, kehren Sie zu diesem Ein­stel­lungs­be­reich zurück.

Methode 2: Favicon-Plug-in

WordPress bietet für (fast) alle Funk­tio­nen ein passendes Plug-in, so auch für das Einfügen eines Favicons. Eines der be­lieb­tes­ten kos­ten­lo­sen Plug-ins ist der Favicon by Re­al­Fa­vicon­Ge­ne­ra­tor. Dieser bietet gegenüber dem WordPress Cus­to­mi­zer zu­sätz­li­che Ein­stel­lungs­op­tio­nen, um die Kom­pa­ti­bi­li­tät des Favicons mit ver­schie­de­nen Geräten und App-Icons zu ver­bes­sern. Im Folgenden erklären wir, wie Sie mit diesem Plug-in ein Favicon in WordPress ein­rich­ten.

Schritt 1: Plug-in in­stal­lie­ren

Öffnen Sie im WordPress-Dashboard den Abschnitt „Plug-ins“ und an­schlie­ßend den Bereich „In­stal­lie­ren“.

Suchen Sie nach dem Plug-in „Favicon by Re­al­Fa­vicon­Ge­ne­ra­tor“, wählen Sie das passende Such­ergeb­nis aus und klicken Sie ab­schlie­ßend auf „Jetzt in­stal­lie­ren“. Im Anschluss klicken Sie auf „Ak­ti­vie­ren“ und das Plug-in ist ein­satz­be­reit.

Schritt 2: Ein­stel­lun­gen des Plug-ins öffnen

Ist das Plug-in in­stal­liert, folgen Sie im Menü dem Pfad „Design“ → „Favicon“. Dort finden Sie die Ein­stel­lun­gen des Plug-ins.

Schritt 3: Favicon auswählen

Klicken Sie auf „Select from the Media Library“, um die WordPress-Mediathek zu öffnen und das Bild für Ihr Favicon aus­zu­wäh­len. In diesem Fall benötigen Sie das Favicon in einer Größe von min­des­tens 70 x 70 Pixel, empfohlen sind jedoch 260 x 260 Pixel oder mehr. Nachdem Sie das Bild aus­ge­wählt haben, be­stä­ti­gen Sie Ihre Auswahl mit dem Button „Generate favicon“.

Schritt 4: Favicon ein­rich­ten

Das Plug-in leitet Sie daraufhin au­to­ma­tisch auf die eigene Website weiter. Sobald das Bild er­folg­reich hoch­ge­la­den ist, stehen Ihnen optionale Ein­stel­lungs­mög­lich­kei­ten zur Verfügung. Passen Sie auf Wunsch die Dar­stel­lung des Favicons für den Desktop-Browser, für die Google-Such­ergeb­nis­se oder für ver­schie­de­ne Smart­phones an.

Haben Sie alle Ein­stel­lun­gen über­nom­men oder möchten Sie die ver­blei­ben­den über­sprin­gen, klicken Sie am Ende der Seite auf den Button „Generate your Favicons and HTML Code“.

Das Plug-in leitet Sie zurück ins WordPress-Backend und bestätigt die er­folg­rei­che In­stal­la­ti­on des Favicons in WordPress.

Methode 3: Manuelles Einfügen

WordPress bietet in vielen Fällen auch die Mög­lich­keit, Ein­stel­lun­gen manuell vor­zu­neh­men. Ein WordPress-Favicon lässt sich daher auch per File Transfer Protocol (FTP) hin­zu­fü­gen. Dazu benötigen Sie ein Favicon-Paket mit ver­schie­de­nen Dateien sowie einen HTML-Code. Beides lässt sich pro­blem­los mit einem kos­ten­lo­sen Online-Tool erstellen.

Schritt 1: Favicon-Dateien ge­ne­rie­ren

Öffnen Sie ein Online-Tool zur Ge­ne­rie­rung eines Favicons. In diesem Beispiel nutzen wir den „Real Favicon Generator“. Klicken Sie auf den Button „Select your Favicon image“, um das ent­spre­chen­de Bild für das WordPress-Favicon hoch­zu­la­den.

An­schlie­ßend stehen Ihnen optionale Ein­stel­lungs­mög­lich­kei­ten zur Verfügung, um die Bildgröße sowie den Hin­ter­grund zu ändern. Nehmen Sie die ge­wünsch­ten Än­de­run­gen vor oder über­sprin­gen Sie diese. An­schlie­ßend klicken Sie am Ende der Seite auf den Button „Generate your Favicons and HTML code“.

An­schlie­ßend haben Sie die Mög­lich­keit, das Favicon-Paket her­un­ter­zu­la­den sowie den HTML-Code zu kopieren. Laden Sie das Paket herunter und benennen Sie dieses in „favicon.ico“ um. So wird die Grafik direkt als Favicon erkannt.

Schritt 2: Favicon-Paket per FTP hochladen

Greifen Sie per FTP auf die WordPress-Daten zu. Öffnen Sie das Haupt­ver­zeich­nis und laden Sie dort das Favicon-Paket hoch. Achten Sie darauf, dass es sich im selben Ordner wie der WP-Admin-Ordner oder der WP-Content-Ordner befindet.

Schritt 3: HTML-Code einfügen

An­schlie­ßend öffnen Sie die Datei header.php und fügen den HTML-Code des Favicons im Header-Bereich ein. Achten Sie darauf, dass Ihre Domain und der Favicon-Pfad korrekt angegeben sind.