Gestern wurde ich in Twitter gefragt, wie man ein Favicon erstellt und in WordPress einbindet. Favicons sind die kleinen Icons, die man oben in der Adressleiste im Browser angezeigt bekommt oder auch wenn man eine Webseite in seinen Favoriten abspeichert. In den meisten RSS-Readern werden die Icons auch angezeigt. So kann man die einzelnen Webseiten unterscheiden und sie durch ihr Icons schneller erkennen.

Als erstes braucht ihr ein Grafikbearbeitungsprogramm. Damit erstellt ihr euch ein Logo oder Bild das ihr verwenden möchtet und speichert es als 16×16 Pixel große .gif oder .png Datei ab. Manche Leute verwenden auch 32×32 Pixel große Icons, eigentlich sind 16 Pixel aber der Standard. Der Grund warum wir erst im .png oder .gif Format speichern, ist ganz einfach. Die meisten Grafikbearbeitungsprogramme können keine Icons (.ico) erstellen.

Als nächstes ladet ihr euch Irfanview herunter. Das Programm ist kostenlos und kann u.a. sehr leicht Icons erstellen. Nach der Installation öffnet ihr eure vorhin erstellte Grafik und geht direkt wieder auf „Datei“ -> „Speicher unter„. Im neuen Fenster wählt ihr dann den Speicherort und unten wählt ihr als Datei-Typ  „ICO Windows Icon“ aus. Es öffnet sich ein weiteres Fenster in dem ihr spezielle Einstellungen wie z.B. die Transparenz des Icons auswählen könnt. Das Icon sollte mit dem Dateinamen „favicon.ico“ abgespeichert werden.

Als nächstes ladet ihr es auf euren Server ins Hauptverzeichnis von WordPress. Nicht ins Hauptverzeichnis eures Themes sondern direkt ins Hauptverzeichnis von WordPress. Habt ihr kein WordPress, dann kommt das Icon einfach ins Web-Hauptverzeichnis eurer Domain.

Zum Schluss ist noch eine kleine Anpassung der „header.php“ in WordPress nötig bzw. in eurer Template-Datei. Sucht in der Datei nach „<header>“ logischerweise ist es ziemlich weiter oben. ^^ Darunter fügt ihr dann folgende Zeile ein:

Abspeichern und fertig!

Ganz nebenbei: Irfanview ist ein sehr mächtiges Programm, dass sehr viele Funktionen hat. Die Installation lohnt sich also. Wer absolut kein Programm installieren möchte, kann auch verschiedene Favicon Online Generatoren probieren, die meisten Dienste dieser Art haben ihre Webseiten aber mit Werbung vollgestopft, deswegen erstelle ich so Kleinigkeiten lieber selbst.

Beruflich setze ich zum Programmieren von Webseiten „Dreamweaver CS5“ von Adobe ein. Das Programm gefällt mir seit Jahren sehr gut. Es ist umfangreich und kann alles was ich benötige. In letzter Zeit kommt es aber immer häufiger vor, dass mir unterwegs ein paar Zeilen Code einfallen oder ich einfach mal etwas testen/programmieren möchte. Für mein Netbook ist Dreamweaver allerdings etwas übertrieben. Es braucht viel Systemressourcen und es nimmt auf dem Bildschirm viel Platz durch Menüs weg. Die minimal Auflösung von 1280×800 Pixel kann mein Netbook nicht darstellen. Außerdem bräuchte ich eine weitere Lizenz die zum „ab und zu programmieren“ mit ca. 600 Euro viel zu teuer wäre.

Eine kostenlose Alternative bietet Notepad++. Der Editor ist sehr schlicht, hat aber theoretisch auch alles was man braucht. Er unterstützt viele Sprachen und was mir besonders gefällt, sind die vielen Plugins und die Möglichkeit Makros aufzuzeichnen. Ein sehr nützliches Plugin ist z.B. NppFTP mit dem es möglich ist auf einen FTP-Server direkt in Notepad++ zuzugreifen um die Dateien auf dem Server zu bearbeiten. Notepad++ kann mit Dreamweaver natürlich nicht mithalten, aber das muss es in dem Fall auch nicht. Für unterwegs ist es also genau das richtige Programm!