Das Favicon, oder Favoriten Icon
Was ist ein Favicon?
Das Favicon ist ein 16x16 Pixel kleines Icon, welches meist im linken oberen Bereich des Browsers in der Adressleiste und auch in den Lesezeichen (Mozilla), bzw. in den Favoriten (IE) zu finden ist.
Es wurde im März 1999 mit dem Internet Explorer Version 5 eingeführt und sehr schnell von anderen Browserherstellern übernommen.
Das Favicon sorgt für eine gewisse Wiedererkennbarkeit einer Website und ist für einen professionellen Internetauftritt unerlässlich.
Sehr oft liegt es im ICO Format vor. Mittlerweile wird es jedoch von nahezu allen modernen Browsern auch im GIF und PNG Format unterstützt, wodurch auch animierte Favicons möglich sind.
Bei Erstellung werden die Farbtöne, meist so gewählt, das diese Übereinstimmend mit dem Logo des Webauftritts sind.
- Grundsätzlich gibt es zwei Möglichkeiten Favicons zu produzieren:
- mit einem Bildbearbeitungsprogramm wie z.B. Photoshop
- mit einem der zahlreichen Favicon-Generatoren
Erstellung eines Favicons mit Photoshop:
Beim Erstellen eines einfachen geometrischen Icons bevorzuge ich Photoshop. Dabei gehe ich folgendermaßen vor:
Als erstes erstelle ich ein neues Dokument mit einer Arbeitsfläche von 16x16 Pixeln und öffne ein zweites Fenster.
Dateiname
Nun stelle ich das neue Fenster unter das ursprüngliche und vergrößere es auf 3200% und lege mir die Farbpalette mit den Farben, die ich brauchen werde direkt daneben.
Jetzt lege ich entweder mit dem Buntstift, oder dem Zeichenstift-Werkzeug die Konturen des Favicons fest und kann das Ergebnis im oberen Fenster direkt kontrollieren.
Nachdem ich das Icon im groben fertig habe, mache ich noch etwas Finetuning
und teste noch diverse Effekte wie Verläufe etc. Dabei gehe ich aber wirklich nur sehr dezent vor, da es sehr schnell übertrieben wirken kann.
Ist das Icon fertiggestellt exportiere ich es im ICO Format.
Leider wird dieses Format standesgemäß von Photoshop nicht unterstützt. Das passende Plugin kann man jedoch bei Telegraphics downloaden und dann einfach im Plugin-Ordner von Photoshop hinterlegen. Nach einem Neustart, sollte auch das Speichern im ICO Format möglich sein.
Einbindung in den Quellcode
Prinzipiell sollte das Favicon immer im Rootverzeichnis der Webpräsenz als favicon
+ Dateiendung (in den meisten Fällen .ico) abgelegt werden, da es dort auch ohne explizite Angabe im HTML-Code von den meisten Browsern angezeigt wird.
Trotz alledem ist es ratsam das Icon im Headerbereich der Website zu referenzieren, um es allen Browsern bekannt zu machen.
<header> ... <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> ... </header>
Nach Neustart des Browsers sollte das Favicon nun in dem Kästchen, links neben der Adresszeile im Browser erscheinen.
Sollte das nicht der Fall sein, einfach den Cache des Browsers löschen und nochmals neustarten.