| Wie erstelle ich ein "FAVICON" (FAVoriten ICON) | |
|
Was ist ein "Favicon" ? Sicherlich hast Du es schon oft gesehen, wenn Du mit einem Browser wie dem MSIE (Internet-Explorer), Firefox oder Opera surfst: Klitzekleine Bildchen vor manchen Internet-Adressen.  Und wenn Du eine solche Seite in Deine Favoriten speicherst ("bookmark"), dann ist das Bildchen auch dort zu sehen. Welches Format hat ein "Favicon" ? Ein Favicon hat 16 x 16 Pixel mit 256 oder auch nur 16 Farben. Bei anderen Formaten (zB 32 x 32 Pixel) ist die Darstellung im Browser mehr zufällig als garantiert, wobei beim MSIE 6 sowieso das Glück der Darstellung eine große Rolle spielt. Wie kommt das "Favicon" vor die URL einer Website ? Nachdem Du Dir, zB mit Hilfe dieser Anleitung, ein Favicon erstellt hast, ist die einfachste Möglichkeit, das Favicon mit dem Namen "favicon.ico" in das Verzeichnis auf dem Server zu übertragen, von wo aus die entsprechende html-Datei geladen wird. In der Regel ist das also im Hauptverzeichnis ("Root") die index.htm (index.html). Dieses Favicon wird nun laufend angezeigt, auch wenn im Folgenden andere Seiten der Homepage als die Startdatei "index.htm" aufgerufen werden. Hast Du eine Homepage mit mehreren Themenbereichen, die sich alle in einem separaten Verzeichnis befinden, dann kannst Du in jedes Verzeichnis ein passendes "favicon.ico" einfügen und der Browser lädt es automatisch mit der aufgerufenen html-Datei mit und zeigt es dann auch bei allen anderen Seiten innerhalb dieses Verzeichnisses. Dies gilt aber nur dann, wenn diese Seite direkt aufgerufen wird, also nicht über einen Link aus dem Hauptverzeichnis, wo sich bereits ein (allen anderen Seiten "favorisiertes") favicon.ico befindet. Praktisch kannst Du aber mit jeder beliebigen html-Datei ein eigenes Favicon anzeigen lassen und das Favicon muss auch nicht "favicon.ico" heißen, nur musst Du es dann im Header der entsprechenden html-Datei gezielt aufrufen. Hierzu füge im Dateikopf zwischen head und /head folgende Zeile ein: <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> oder <LINK REL="SHORTCUT ICON" HREF="http:///zhansel.de*/faviconname.ico"> *(anstatt zhansel.de natürlich den Ort Deiner eigenen Homepage) Und wie wird ein "Favicon" erstellt ? Du brauchst lediglich ein einfaches Programm zum Zeichnen (zB "Paint") und ein Programm, mit dem die Zeichnung in das Format "ICO" transportiert werden kann (zB "IrfanView"). "Paint" befindet sich (normalerweise) im ZUBEHÖR von Windows, "IrfanView" kannst Du Dir zB auf meiner Software-Seite unter Grafik/Viewer oder bei www.irfanview.com runterladen. Aber vorweg: Für ein pixelgenaues Bildchen empfehle ich JDraw, welches ebenfalls unter Grafik/Viewer zum Download bereit steht. |
|
| 1. Erstellung einer Favicon-Vorlage mit Microsoft Paint | |
|
Zur Veranschaulichung nehme ich mal eines meiner;-) Favicons: 
--->
 Du kannst natürlich gleich Deine eigenen Vorstellungen umsetzen. Nachdem Paint gestartet wurde, wird, falls gewünscht, als erstes die Hintergrundfarbe gewählt. Dazu wird unten links auf das entsprechende Farbfeld geklickt:  |
|
Dann wird in der Werkzeugleiste der
Farbeimer angeklickt und das Feld mit der neuen Farbe gefüllt: |
Anschließend wählen wir das [A] für
Text und klicken unten in der Werkzeugleiste auf "Transparent" (=
Hintergrund beibehalten): |
Nun wird mit gedrückter linker
Maustaste ein Rahmen (Markierung) gezogen: |
Nach dem Loslassen der Maustaste
öffnet sich eine Leiste für die Schriftart-Wahl: |
Wir wählen ComicSansMS in der größten
vorgeschlagenen Schrift, also 72 Pixel: |
Zudem werden die Attribute Fett und
Kursiv gesetzt und als Farbe rot gewählt: |
Damit ist der erste Buchstabe, das
Z, fertig gestellt. Da der 2. Buchstabe, das h, ganz andere
Eigenschaften hat, klicken wir irgendwo außerhalb der gestrichelten
Markierung und ziehen dann eine neue Markierung irgendwo im Feld: |
Zum geänderten Schrifttyp Arial
werden die Attribute Fett und Kursiv entfernt. Als neue Größe wird 60 in
das Feld eingetippt und der Mauscursor in das Textfeld gesetzt. Zum
Schluss wird noch die Schriftfarbe gelb gewählt:  |
In der Werkzeugleiste wird das
Auswahl-Symbol gewählt und mit links gedrückter Maustaste eine
Markierung um das h gezogen: |
Nun den Cursor in die Markierung
setzen und mit gedrückter linker Maustaste das h ganz nah an das Z
heranschieben: |
Zur Korrektur evtl. entstehender
ungewollter Überschneidungen wählen wir das Lupe-Symbol und klicken auf
die entsprechende Stelle: |
Nun kann mit dem Bleistift links in
der Werkzeugleiste der Fehler "weggepixelt" werden, natürlich in der richtigen Farbe:  |
Falls notwendig, kann die durch das
Verschieben entstandene Farblücke wieder aufgefüllt werden (Du brauchst
die Textfelder aber nicht so nah aneinander setzen wie ich es hier getan
habe): |
Eigentlich könnte hiermit die Vorlage
für das Favicon fertig sein. Aber machen wir zur Übung noch einen Rahmen
um die Buchstaben. Dazu wird zuerst die Rahmenstärke gewählt: |
Als Rahmen stehen das Rechteck
(Quadrat), das Vieleck, die Ellipse (Kreis) und das abgerundete Rechteck
zur Verfügung. Nach der Farbwahl wird mit links gedrückter Maustaste der
Rahmen gezogen: |
Abschließend wählen wir in der
Werkzeugleiste oben rechts erneut das Symbol für Auswahl und ziehen mit
links gedrückter Maustaste eine Markierung um das Resultat unserer
Vorlage für das Favicon: |
Jetzt wählen wir ganz oben in der
Leiste [Bearbeiten - Kopieren nach...] ... |
... und speichern den Inhalt der
Markierung unter einem eindeutigen Namen als Bitmap ab: |
 |
|
| 2. Umwandlung des favicon.bmp in favico.ico mit IrfanView | |
Anschließend wird IrfanView gestartet
und das eben gespeicherte Bitmap geladen. Nun wählen wir [Bild - Größe
ändern...] |
Zunächst wird das Häkchen bei
"Proportional" entfernt. Als Größe wird Breite: 16 und Höhe: 16
eingegeben. Als Einheit wählen wir Pixel: |
Um dem MSIE die Arbeit leichter zu
machen, wird die Farbtiefe auf 256 (oder 16) Farben reduziert: |
In der Bild-Infoleiste von IrfanView
sollte nun 16x16x8BPP stehen: |
Jetzt noch abschließend über [Datei -
Speichern unter...] das Format ICO wählen, um das favicon.bmp als
favicon.ico zu speichern: |
Um dieses klitzekleine Bildchen zukünftig in der Adressleiste des Browsers anzuzeigen, musst Du es nur noch auf den Webserver übertragen. |
|
|
|
|
|
|
|
Schlussbemerkung: Es gibt auch extra Programme zum Erstellen von Favicons (siehe unter Viewer), sogar über Online-Dienste mit Zusendung per Mail (29 € für so einen Pimpf? ;-), aber mit Paint hast Du "coolere" Gestaltungsmöglichkeiten und die Umwandlung mittels IrfanView ist ja wohl echt "easy" !? |
|
|
Nachtrag im November 2007: Inzwischen gibt es eine Seite, auf der man aus einer Vorlage, zB einem Foto!, eben mal so und kostenlos sein Favicon, sogar "animiert", erstellen lassen kann: |
|
 Seiteneinsteiger - links keine Navigation zu sehen ? Dann klick auf den Banner, um auf die Hauptseite zu kommen:  |
|