Favicon – ich will auch so ein kleines Bildchen!

Aloha

Neuer Blog..und ich habe mal wieder vergessen wie man dieses doofe FavIcon einbindet. Nun fragen sich einige sicherlich: „Was zum Geier ist ein FavIcon?“
FavIcon wird das kleine Icon oben Links direkt neben der Adressezeile genannt. In meinem Falle sieht das FavIcon so aus:

In Opera sieht das ganze z.B. so aus:

Für meinen Geschmack sollte jede Webseite mit so einem 16×16 FavIcon aufgehübscht sein. Es steigert den Wiedererkennungswert enorm. Auch zeigt z.B. der Firefox das FavIcon innerhalb der Lesezeichen an. Ebenso kann der GoogleReader diese anzeigen. Ebenso wird er in den Tabs in eurem Browser angezeigt. Das macht es einfach zu navigieren.

Das einbinden von solch einem FavIcon sollte eigentlich bei allen Webseiten möglich sein die Zugriff auf die  HTML/PHP Dateien gewähren. Somit ist dies auch für Blogger User möglich.

Wie erstelle ich ein FavIcon?

Da gibt es unterschiedliche Möglichkeiten. Ich habe damals ein Motiv genommen das mir gefiel, habe es in Photoshop bearbeitet und quadratisch zugeschnitten und online unter Favinator.de auf die Dateiendung .ico geändert. Dies könnte ihr auch direkt auf Eurem Rechner z.B. mit dem Programm IrfanView machen (Photoshop kann dies meines Wissens nicht). Da dies eine spezielle Dateiendung ist, ist es nicht damit getan die Datei nur umzubenennen!

Online habe ich für euch auch noch einen Favicon Generator gefunden. Hier könnt ihr selbst ein Pixelbild erstellen, oder auch eure Datei hochladen und dann nochmal Pixel für Pixel bearbeiten.

Bei beiden Onlineprogrammen könnt Ihr eure Datei dann herunterladen und abspeichern. Die Datei sollte am Ende favicon.ico heißen.

TIP: Es gibt auch die Möglichkeit ein animiertes Favicon zu nutzen, z.B. eine kleine GIF Datei.

Und wie binde ich das FavIcon nun bei WordPress ein?

Zuerst ladet Ihr euer FavIcon in das Hauptverzeichnis eurer WordPressinstallation.

Daraufhin ruft Ihr die Datei header.php entweder direkt in eurem WordPress Dashbord unter Design/Editor auf oder bearbeitet diese per offline Editor. Die Datei selbst findet ihr in eurer WordPress Installation unter:  /wp-content/themes/nameeuresThemes/….

Der Code sollte  direkt über/vor dem Header/Kopf Tag eingebuden werden: </header>
oder auch </head>

Der Code lautet wie folgt:

<link rel=”shortcut icon” href=”<?php bloginfo(’url’); ?>/favicon.ico” type=”image/x-icon” />

Nach spätestens Neustart des Browsers sollte euer FavIcon nun angezeigt werden 🙂

Und  bei blogspot.com/Blogger?

Da ist auch sehr einfach 🙂 Der Codeschnipsel den ihr benötigt ist hier fast der Gleiche:

<link href=‘http://URL_zum_Icon‚ rel=’shortcut icon‘ type=’image/ico’/>

Wichtig ist hier, das ihr eure FavIcon vorher irgendwo hochladet wovon es auch abgerufen werden kann. Dies kann ein eigener Webspeicher sein, oder frei zugängliche Speicherplätze.

Nun geht ihr in eure Blogger Einstellungen und geht dort auf Layout/HTML bearbeiten. Im Feld Vorlage bearbeiten seht ihr nun den Code von eurem Template. Dort sucht hier nach folgenden Zeilen:

</head>

<body>

Direkt über/vor dem </head> fügt ihr nun den Codeschnipsel ein:

Damit wird das Standard FavIcon das von Blogger kommt überschreiben und stattdessen eures angezeigt 🙂 Und das wars dann auch schon.

Ich wünsche euch viel Spass beim Einbau und würde mich sehr über Feedback freuen!

Pink Püppi ★

…ich bin Janine…oder auch PinkPüppi…im echten Leben dann aber meist Ninchen. Ich bin leidenschaftlicher Kosmetikjunkie mit einer Vorliebe für knallige Farben. Nude, und Taupe…find ich langweilig, fad…und zum davonlaufen.

Modekrimskram, Nerdiniges, Gothic, Rockabilly und Tattoos sind Dinge die mich begeistern. Mit meinem Kosmetik Shop Shades of Pink habe ich mich vor kurzem selbstständig gemacht.