Zum Inhalt springen

WordPress: Favicon einbinden

Diese Anleitung berschreibt allgemein, wie man ein Favicon zu einer Webseite oder einem Blog zuordnet.

Wie dies in Tatami Theme gemacht wird, zeigt dieser Beitrag: Favicon im Tatami Theme

Ein Favicon ist ein kleines Bildchen, das zu einer Webseite gehört und in den meisten Fällen das Logo einer Seite ist. Browser benutzen das Favicon in der URL-Leiste, in Tabs oder überall sonst, wo eine Webseite mit einem Bild verknüpft werden soll. Normalerweise sind Favicons 16×16 Pixel groß und haben den Namen favicon.ico.

Die favicon.ico gehört nach /html/Wordpress/ und muss so eingebunden werden:

header.php

<link rel=“shortcut icon“ href=“/favicon.ico“ type=“image/x-icon“ />

… und sollte vor dem abschliessenden /head eingefügt werden

Ein Favicon kann im Prinzip jedes mögliche Bild sein, welches auf eine Größe von 16×16 Pixel verkleinert und als .ico konvertiert und abgespeichert wird. Um Bilddateien in ein anderes Format zu konvertieren, kann man entweder kommerzielle Programme wie Photoshop benutzen, oder man greift auf eines der vielen kostenlosen Programme zurück. Hierbei würde sich zum Beispiel GIMP oder XNVIEW anbieten.

Nachdem man das passende Bild und Programm gefunden hat, muss man nur noch folgende 3 Schritte durchführen:

  • Das Bild sollte in jedem Fall quadratisch sein, wenn das Bild nicht quadratisch ist, sollte man es auf die passende Größe zuschneiden, oder es auf einen quadratischen Hintergrund packen.
  • Größe auf 16×16 Pixel ändern.
  • Das Bild als favicon.ico abspeichern.

Es gibt sogar Onlineservices wie http://www.favicon.co.uk, mit denen man unkompliziert und schnell Favicons erstellen kann.

Die favicon.ico Datei wird im Hauptordner des Themes abgespeichert, sollte bereits eine favicon.ico Datei existieren, kann man diese einfach löschen oder überschreiben. Zusätzlich sollte das Favicon auch noch im Hauptordner der Seite, in dem die index.php liegt eingefügt werden. Sodass das Favicon unter http://example.com/favicon.ico erreichbar ist. Dies ist dazu notwendig, dass auch Feedleser das Icon korrekt in ihrem Feedreader angezeigt bekommen.

Nachdem das Favicon in die entsprechenden Verzeichnisse hochgeladen wurde, muss nun noch die header.php des Themes angepasst werden.

Dazu sucht man im <head> Tag nach folgendem Code:

1
<link rel="shortcut icon" href=".../favicon.ico" />

Dieser muss anschließend durch einen Link auf das eigene Favicon ersetzt werden.

1
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico" />

Als letztes müssen die Änderungen noch gespeichert und eventuell der Cache des Browser gelöscht werden. Danach sollte das Favicon ordnungsgemäß angezeigt werden.

Die header.php lässt sich übrigens im Admin-Bereich unter Design – Editor – Kopfzeile (header.php) bearbeiten. Unter Umständen kann es passieren, dass das Favicon nicht sofort angezeigt wird. Dann hilft es, den Browser neu zu starten oder es muss gar der Browser-Cache geleert werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert