Favicon in Wordpress und IE7 einbinden

Hier nun eine Kurzanleitung zum Erstellen eines Favicons für einen Wordpress Blog oder eine Wordpress Seite und was man im Zusammenhang mit IE7 beachten muss. Wenn alles klappt sollte es dann so aussehen:

Beispiel eines Favicon für Wordpress Blog

Ab dem IE5 gibt es die Möglichkeit für seine Website ein sog. Favicon einzublenden. Dieses Icon erscheint dann im IE sowohl in der Adressleiste als auch auf der Registerkarte der Seite.

Ich hatte bei der Erstellung meiner Favicons einige Probleme, die ich dann durch verschiedene Foren und einiges Selberprobieren gelöst habe. Da ich euch das nicht vorenthalten möchte, hier meine kleine Kurzanleitung zum Erstellen eines Favicons und das Einbinden in einen Wordpress Blog.

  1. Erstellen eines Favicon.ico:
    Als Erstes müssen wir für unsere Seite ein Favicon erstellen, das geht bspw. mit einem Bildeditor. Dort erstellt man ein ICON - .ico Datei in der Größe 16×16 Pixel und bearbeitet es nach eigenen Vorstellungen. Ich benutze immer einen Icongenerator, z.B. http://favicon.cc Dort lädt man einfach ein Bild seiner Seite hoch (wie den Teil des Titelslogos) und erhält ein fertiges Icon.
  2. Hochladen des Icons:
    Nun wird das fertige Icon auf den Webspace geladen. Es muss in das Rootverzeichnis, um vom IE und anderen Browsern gefunden zu werden.
  3. Anpassen der Rewrite Regel:
    Wer der Apache Server mit der Option mod_rewrite benutzt, kann die Regel für das Laden des Favicons anpassen:  RewriteEngine on RewriteRule ^(.+)/favicon\.ico$ /favicon.ico [R=permanent] [L] So sollten jetzt alle Favicon Anforderungen automatisch auf das neue Icon umgeleitet werden.
  4. Löschen des Cache: Als Letztes muss noch der Cache des IE gelöscht werden, damit das neue Icon geladen werden kann.
  5. Anpassen der Header.php:
    Trotz aller Anstrengungen will der IE7 das Icon oft nicht laden. Dazu verwende ich einfach einen kleinen Trick. Ich weise den IE an, das Icon zu laden. Dazu wird folgende Zeile in die Header.php hinzugefügt:   <link rel="shortcut icon" href="/favicon.ico" />   Somit wird in jeder Seitenanforderung explizit das Icon angefordert.

Viel Erfolg damit.

Einen coolen Favicon Generator gibt es unter http://www.favicon.cc/. Dort kann man ganz einfach ein Bild (png, jpeg…) hochladen und erhält ein entsprechendes Favicon. Einfach super.

Beitrag von Doe am 01. Januar 2008 | In Programmierung |

>> Zur Hauptseite <<

Mehr zu diesem Thema hier im Blog:

5 Kommentare »

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI

  1. 1

    […] Nicht nötig aber ein schönes Gimmick um den Wiedererkennungswert einer Page zu erhöhen. Wie man ein Favicon einbindet ist ausreichend dokumentiert. […]

    Pingback von Blog360 » Favicon — 1. Februar 2008 #

  2. 2

    Mir ist aber aufgefallen, das die meisten Erklärungen zum Einbinden eines Favicons sehr lang und ausschweifend sind und sich nicht auf den Kern konzentrieren. Auch mögliche Fehler (nicht angepasster Header) wird nicht beschrieben. Daher habe ich hier meine Erfahrungen niedergeschrieben und alle können bei ihrem Erstellen des Favicons davon profitieren ;D

    Kommentar von Doe — 4. Februar 2008 #

  3. 3

    Sorry, es hatte sich leider ein kleiner Fehler eingeschlichen: Hier die korrigierte Rewrite Regel:

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

    Jetzt sollte es tadeslos funktionieren.

    Kommentar von Doe — 10. März 2008 #

  4. 4

    Ganz schnell das eigene Favicon erstellen dafür gibts Online Generatoren wie http://www.favicon-maker.de

    Kommentar von Thomas — 21. September 2008 #

  5. 5

    Soeben habe ich entdeckt, dass der Firefox das Icon nun erkennt und anzeigt, supi. Bloß der blöde IE hat noch immer nichts entdeckt. Evtl. braucht der einfach länger…?

    Kommentar von Silke — 19. Dezember 2009 #

Einen Kommentar hinterlassen

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Impressum || Kontakt