Favicon erstellen

xurzon.comWas ist ein Favicon und wozu braucht man das? Na, da brauche ich mich nicht selbst abmühen, denn Wikipedia liefert die beste Erklärung:

Ein Favicon (kurz für favorite icon, engl. für Favoriten-Symbol) ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das unter anderem in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Von den Browsern werden aber nur 16×16 Pixel angezeigt. Das Favicon taucht auch in der Lesezeichenleiste (Favoriten), bei den Registerkarten (oder Tabs) und unter Windows beim Speichern einer Seite auf dem Desktop auf. Es wurde von Microsoft mit dem Internet Explorer 4 eingeführt.

(Quelle: http://de.wikipedia.org/wiki/Favicon)

Wie erstellt man ein Favicon?

Auch das ist ganz einfach. Ich habe heute, als ich einen kleinen Artikel für Xurzon.com geschrieben habe, gedacht, irgendetwas fehlt. Dann ist mir aufgefallen, dass meine Seite noch kein Favicon hat. Also habe ich mir ein paar Minuten Zeit genommen, um dieses Manko zu beheben.

Xurzon.com LogoZuerst habe ich dieses Logo im Format 300×300 Pixel erstellt. Dazu habe ich Photoshop benutzt. Das Logo habe ich als .png abgespeichert. Dann habe ich die Bildgröße auf 32×32 Pixel angepasst und nochmals als .png abgespeichert. Anschließend habe ich die Datei mit Format Factory zu einer .ico formatiert. (Format Factory ist ein kleines Tool mit dem man Dateien aller Formate in andere Formate konvertieren kann. Es ist kostenlos und via Suchmaschine leicht zu finden.) Photoshop selbst bietet nach meiner Information auch ein Tool um Favicons zu erstellen, da weiß ich aber nicht so genau bescheid. Ist das Favicon erstellt, lädt man es ganz normal auf den Webspace hoch. Ob über FTP oder aus der Benutzeroberfläche des CMS heraus spielt dabei keine Rolle. Lediglich der Pfad sollte bekannt sein. Damit das Favicon im Browser angezeigt wird, muss noch ein Code im Header der Website eingebaut werden. Auf dieser Website sieht der Code so aus:

<link href="http://xurzon.com/wp-content/uploads/2011/08/xurzon_f.ico" rel="shortcut icon" type="image/x-icon" />

Der Code muss natürlich durch den individuellen Link zum Favicon abgeändert werden, dann wars das schon. Ein Favicon zu entwerfen dauert also nur wenige Minuten. Da die Größe des Favicons vom Browser ohnehin nur im Format 16×16 Pixel dargestellt wird, sollte man auf komplexe Grafiken verzichten, denn die Wirkung würde ohnehin verloren gehen.

Es dauert nur ein paar Minuten, dafür wird die Website oder der Blog unverwechselbar!

 

Ein Gedanke zu „Favicon erstellen“

  1. Hab gerade noch mal diese Anleitung durchgelesen, ist sehr gut beschrieben zum Nachmachen. Allerdings ist der Schritt mit der Konvertierung in ein .ico nicht zwingend notwendig. Das Ganze funktioniert auch im .png Format! Gruss, Uli

Schreibe einen Kommentar

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