Favicons in WordPress implementieren

16. Februar 2009 | Von stefan | Kategorie: Favicons in WordPress

Die gängige Installation eines Favicons in WordPress ist sehr einfach und wird bereits in diversen Blogs und Foren beschrieben. Bei einigen Installationen scheitert jedoch die Anzeige des Favicons, wenn mit Speaking URL-Pathsegments gearbeitet wird.

Beispiel:
www.meinewebseite.de/blog
zeigt nach der Einrichtung das Favicon korrekt an. Jedoch fehlt das Icon unter:
www.meinewebseite.de/blog/kategorie oder
www.meinewebseite.de/blog/kategorie/thema-nummer-eins

  1. Erstellung des Favicons
    Im ersten Schritt wird ein Favicon erstellt, sofern noch kein fertiges Icon zur Verfügung steht. Das Icon hat die Größe 16×16 Pixel und lässt sich z.B. mit Photoshop erzeugen. Standardmäßig kann Photoshop keine .ico-Dateien speichern. Dafür gibt es praktischer Weise jedoch ein Plugin, mit dem sich das .ico-Format abspeichern lässt: Windows-Icon-Format-Plugin (ICO).

    Wer das Favicon ohne Photoshop erstellen will (oder muss), kann auf diverse Programme (z.B. IrfranView) zurückgreifen.

    Online lassen sich Favicons beispielsweise hier erstellen.

  2. Implementierung des Favicons
    Nachdem das Favicon erstellt wurde, wird es ins Hauptverzeichnis der WordPress-Installation hochgeladen.
    Anschließend wird die header.php-Datei des verwendeten Themes angepasst. Entweder lokal und anschließendes Upload per FTP auf den Server oder direkt im WordPress-Adminbereich unter “Design » Themes » Editor” » Header (header.php).

    Zwischen <head></head> wird folgender Code eingefügt:

    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" />
    <link rel="icon" href="/favicon.ico" type="image/ico">

    Einige Browser haben die Angewohnheit, das Favicon zu cachen. Wer möchte, kann über die mod-rewrite des Apache Servers die Regel für das Laden des Favicons in der .htaccess-Datei des Rootverzeichnisses anpassen:

    Options +FollowSymLinks
    RewriteEngine On
    RewriteBase /

    RewriteRule ^(.+)/favicon\.ico$ ./favicon.ico [R=permanent] [L]

  3. Fallstricke umgehen
    Wie Eingangs erwähnt, ist es möglich, dass das Favicon nur auf der Startseite gezeigt wird, nicht aber in tieferen Verzeichnisebenen. Um dieses Problem zu umgehen, gibt es eine nützliches Plugin für WordPress: Favicon Manager WordPress Plug.

    Installation und Verwendung:
    Plugin herunterladen, im Admin-Panel unter „Plugins » Installieren“ via „Durchsuchen“ auf der eigenen Festplatte lokalisieren und installieren.
    Anschließend steht unter „Einstellungen“ der Menüpunkt „Favicons“ zur Verfügung, wo als Location „favicon.ico“ eingetragen wird und ggf. das Favicon zu RSS2 und Atom Feeds hinzugefügt wird.

Diesen Artikel bookmarken/weiterempfehlen:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • MisterWong
  • Yigg
  • Technorati
  • LinkArena
  • YahooMyWeb
  • Webnews.de

3 Kommentare
Hinterlasse einen Kommentar »

  1. Hi,

    danke, genau so etwas habe ich gesucht. Das hat super funktioniert.

    Beste Grüße

  2. Danke für die Anleitung, ich hatte vor ein paar Wochen schonmal probiert das Icon einzurichten, das hatte aber irgendwie nicht geklappt - jetzt funktionierts, super danke!

    Mich wundert es nur das man es nicht in Wordpress selber einstellen kann, dort kann man doch sonst auch alles einstellen!

  3. Danke für die einfache, eigentlich selbstverständlichen Zeilen im Header-Bereich. Aber Vorsicht: Besser den Slash entfernen vor dem Dateinamen, hat zumindest in meinem Fall Probleme bereitet. Also href=”favicon.ico” statt href=”/favicon.ico”

Schreibe einen Kommentar