 eigenes Favicon
Hier geht es um die kleine Grafik in in den modernen Browsern in der Adresszeile links neben der URL angezeigt wird: das 'Favicon'. FavIcon ist ein Kunstwort und steht für "Favorisiert + Icon".
|
|
 29.09.2008 12:00 Uhr, Info animiertes Favicon
Ein kleines Bildchen in der Adresszeile eines Browsers anzeigen
Allgemeines zum Favicon
Favorits nennt der Angelist seine liebsten (favorisierten) Lesezeichen (Bookmaks), deren Adresse der Browser speichern kann.
Der englische Ausdruck Icon (griechisch: Bild, deutsch: Symbol) bezeichnet im Computerbereich ein Piktogramm, welches eine Datei auf der Festplatte oder einen Link repräsentiert. (Denken sie einfach an 'Ikone', wenn sie sich 'Icon' nicht merken können.
Das Favicon wird bei den neuen Browsergenerationen in der Adresszeile vor der URL angezeigt. In der Liste der abgelegten Lesezeichen erscheint das Faficon ebenfalls und dient als Blickfänger.
|
|
Das kleine Icon für meine favorisierten Seiten macht es leichter, ein Lesezeichen aufzufinden!
Wie das in ihrem Browser aussieht, können sie bei meiner Seite austesten: Einfach bei angezeigter Seite ein Lesezeichen hinzufügen. Sollte das Favicon nicht gleich zu sehen sein, wird es in der Regel beim nächsten Anklicken der Seite erscheinen. Das funktioniert aber nur, wenn ihre Browsereinstellungen das zulassen. Schließlich muss diese Information auf ihrer Festplatte abgelegt werden.
Favicon für Ihre Seite
Sie als Webmaster können für ihre Webseite ein Favicon anbieten. Dazu müssen sie eine Grafik (ein Icon) in das Stammverzeichnis ihrer Webseite auf den Server hochladen.
 So könnte das Favicon aussehen - Beispiel (als GIF-Datei)
- Das Favicon ist eine Grafik mit der Dateiendung 'ico'
- in der Regel 16 x 16 Pixel oder 32 x 32 Pixel groß
- die Anzahl der Farben soll auf 256 Farben beschränkt sein (alte Regel)
- Favicons können auch transparente Bereiche haben
- das Motiv des Favicon sollte möglichst einen Bezug zum Seiteninhalt haben
Einige neue Browser-Versionen akzeptieren nun auch andere Grafikformate für die Favicon-Darstellung. Erlaubt sind die Dateiformate GIF und PNG.
ganz automatisch
Ohne expliziten Hinweis zum Favicon im Head-Bereich, suchen ein Browser automatisch im Stammverzeichnis nach der Datei favicon.ico . Wenn sie also ein Favicon in das Stammverzeichnis ihrer Seite hochladen, wird der FF, IE, Oprea und NS6 beim Anlegen eines Lesezeichens (Bookmark) in der Regel dieses kleine Bildchen neben dem Link anzeigen.
Link auf den Favicon eintragen, wie geht das?
Referenzieren sie das Favicon durch einen Link im HEAD ihrer HTML-Datei.
Beispiel: das Icon hat den Dateinamen 'favicon.ico':
<html>
<head>
<titel>Schmetterlinge im Regenwald</title>
<meta name="description" content="Schmetterlinge im Regenwald ... ">
<meta name="keywords" content="Schmetterlinge, Regenwald, ... ">
<link rel="shortcut icon" href="favicon.ico">
...
Falls für Unterseiten in anderen Verzeichnissen das gleiche Icon
angezeigt werden soll, muss im HEAD der entspechenden Datei ein
Link auf das Icon im Stammverzeichnis eingetragen sein.
Absoluter Link:
(z.B. bei einer Umleitungsseite auf einem anderen Server)
<link rel="shortcut icon" href="http://www.ihreseite.de/meinicon.ico">
Relativer Link:
../verzeichnis/IhrIcon.ico oder
icon-spassseiten.ico
Einige neue Browser-Versionen akzeptieren nun auch andere Grafikformate für die Favicon-Darstellung. Erlaubt sind die Dateiformate GIF und PNG.
<link rel="icon" href="http://Ihredomain.de/favicon.ico" type="image/gif" />
<link rel="icon" href="http://Ihredomain.de/favicon.ico" type="image/png" />
Animierte Favicons
Die meisten Webbrowser können inzwischen auch animierte Favicons anzeigen. Ein animiertes Favicon muss, anders als das Standard-Favicon, im GIF-Bildformat und einer Größe von 16 x 16 Pixel mit maximal 256 Farben (8 Bit) erstellt werden. Zusätzlich zum animierten Favicon wird immer ein statisches Favicon im ICO-Bildformat (16 x 16 Pixel, 256 Farben) hochgeladen und verlinkt. Das wird dann in den Browsern angezeigt, die keine Amzeige von animierten Favicons unterstützen.
<html>
<head>
<titel>Schmetterlinge im Regenwald</title>
<meta name="description" content="Schmetterlinge im Regenwald ... ">
<meta name="keywords" content="Schmetterlinge, Regenwald, ... ">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon-ani.gif" type="image/gif">
Wenn das favicon nicht im Stammverzeichnis abgelegt wurde, gelten die oben beschriebenen Anweisungen zur Referenzierung.
Das passende Icon einbinden
Ich habe für ihre ersten Versuche einmal einige Icons erstellt. Angezeigt wird eine GIF oder JPG-Datei, zum Download kommt eine ICO-Datei. Um ein Favicon (durch Rechtsklick) herunter zu laden klicken sie die Vorschau-Grafik mit der rechten Maustaste an und wählen im Optionsmenü 'Ziel speichern unter' um das Icon im Dateiformat ICO zu speichen.
 |
 |
 |
 |
|
yingyang.ico |
kirschen.ico |
kaffe.ico |
fussball.ico |
 |
 |
 |
 |
|
favicon-baum.ico |
favicon-hund.ico |
favicon-kamera.ico |
favicon-pilz.ico |
 |
 |
 |
 |
| herz.ico |
favicon-stern.ico |
schneemann.ico |
favicon-weihnacht.ico |
Wie sie sehen, habe ich ein Weihnachtsmann-Favicon für den  Adventskalender erstellt.
Nach dem Download können sie ihr Favicon umbenennen oder entsprechend verlinken.
Wie ich schon erwähnte, wäre es doch ganz passend, wenn das Icon etwas über Ihre Seite aussagt, themenbezogen ist und man gleich einen Bezug zu ihrer Seite herstellen kann.
Eine große Auswahl finden sie in  Leos Icon-Archive
Dort werden unzählige Icons angeboten die nach Themen sortiert sind. Die Bildchen stehen als GIF- und ICO-Dateien zur Verfügung. Laden sie das Favicon im Dateiformat ICO herunter.
Eigenes Favicon herstellen
Es gibt zahlreiche Programme, mit denen man ein Favicon herstellen kann (z.B. Michelangelo). Auf der Seite http://favicon.image-generator.net/ finden sie einen Favicon-Generator, der aus einer vorhandenen Bilddatei ein Favicon erstellt, dass sie dann herunterladen können.
Favicon online erstellen
Gute Ergebnisse habe ich bei einem Test auf der Seite dynamicdrive erzielt. Die Seite ist zwar englischsprachig, aber auch mit nur geringen Sprachkenntnissen ist der Favicon-Generator zu bedienen. Für die Seite der Igelstation-Heinsberg habe ich aus dem Logo (Gif-Datei) das 16 x 16 Pixel große Favicon erstellt:
Klicken sie den Link an, um die Seite zu besuchen.
akzeptierte Grafikformate: gif, jpg, png, und bmp
dynamicdrive.com:
Einfach eine Bilddatei auf der eigenen Festplatte auswählen und 'Create Icon' anklicken. Danach wird sofort eine Vorschau als Demo der Browser-Adressleiste angezeigt und das Icon steht zum Download bereit.
Probleme ?
Einige Browser zeigen ein Favicon nicht sofort nach der Aufnahme in die Liste der Lesezeichen an. Manchmal hilft es, den Browser zu schließen und dann die Seite aus der Liste noch einmal aufzurufen.
In einigen Versionen des IE verschwindet das Favicon ab und an (Browserbug / Fehler)
 Bitte lassen sie sich keine grauen Haare wachsen falls das bei ihnen nicht funktioniert obwohl sie sämtliche Fehlerquellen ausgeschlossen haben. Manche Provider, besonders bei Um- und Weiterletungsmechanismen unterstützen die Anzeige des Favicons nicht!
|
|
Ob der Server / Provider das emöglicht können sie überprüfen. Laden sie dazu das Testfavicon herunter, welches sie dann ins Stammverzeichnis ihrer Seite hochladen.
|
HOME
FaviCon als ZIP
ZURÜCK 
Beschreibung