HowTo:Favicon
Inhaltsverzeichnis |
[Bearbeiten] Einleitung
Ein favicon.ico ist letztendlich das kleine Icon, welches bei manchen Webpages in der Adresszeile des Browsers angezeigt wird.
- Grösse und Format: 16x16 pixel, 72dpi, 8bit, RGB, Microsoft Icon Format (.ico)
[Bearbeiten] "normale" Einbindung
Die Datei muss zwingend "favicon.ico" (kleingeschrieben!) heissen.
Sobald die Datei im Hauptverzeichnis der Webpage liegt, also dort, wo auch die index.html (oder .php) liegt, wird sie in der Browser-Adressleiste auch angezeigt.
Probleme können auftreten, wenn der Domainname z.B. aus Umlauten besteht. Bei IDN-Domains (also z.B. Umlautdomains) haben einige Browser - u.a. IE9 - Probleme, die Favicon-Datei im Hauptverzeichnis zu finden. In diesem Fall muss - wie weiter unten beschrieben - im Head-Bereich der Website ein Pfad zur Favicon-Datei angegeben werden.
Um ganz sicher zu gehen, solltest Du Deinen Cache leeren, bevor Du die Seite neu aufrufst, damit die Änderung auch sichtbar wird.. ;)
[Bearbeiten] Pfad des favicon.ico hardcoden
Es gibt die Möglichkeit, über eine Anweisung im Seitenkopf (HEAD), den Pfad auf das Icon zu definieren. Dies hat den Vorteil, dass man die Datei nicht mehr zwingend favicon.ico nennen muss, sondern man einen Alternativnamen wählen kann.
Falls das favicon.ico im Hauptverzeichnis liegt:
<link rel="SHORTCUT ICON" href="/favicon.ico">
Falls das favicon.ico in einem Unterverzeichnis liegt:
<link rel="SHORTCUT ICON" href="http://www.yourdomain.com/images/favicon.ico">
Bei IDN-Domains, also z.B bei Umlautdomains, kann die Favicon-Datei weiterhin im Hauptverzeichnis abgelegt werden. Damit die Browser diese dort aber auch finden, sollte zusätzlich im Head-Bereich der Seite wie oben beschrieben der Pfad zur Favicon-Datei angegeben werden, wobei dabei der ausführliche Domainname (http://xn-...) benutzt werden muss:
<link rel="SHORTCUT ICON" href="http://www.xn-yourdomain.com/favicon.ico">
[Bearbeiten] favicon.ico erstellen
Siehe hierzu auch die nette Anleitung von GLTIPS
[Bearbeiten] The Gimp
Das erstellte Bild einfach im "Microsoft Windows Icon"-Format speichern.
[Bearbeiten] Photoshop
Für Photoshop gibt es ein kleines plug-In, welches das abspeichern von Graphikdateien im ICO-Format ermöglicht. Dieses kostenlose Plugin kann bei Telegraphics downgeloadet werden: http://www.telegraphics.com.au/sw/
Einfach das entpackte File in das Plugin/File Formats-Verzeichnis von Phototshop legen, und los gehts.
