So sieht das dann aus (Beispielseite Yahoo):

Das kleine Y! vor http://de.yahoo.com/ ist der Favicon. Sie können den Favicon auch in Ihrem Head-Bereich im Quelltext genau einbinden - dies ist besonders dann wichtig, wenn Sie einen externen Favicon verwenden wollen, der nicht in dem Stammverzeichnis Ihrer Webseite gespeichert ist:
Bei Favicon im Stammverzeichnis
<html>
<head>
<title>Meine erste Homepage</title>
<link rel="shortcut icon" href="favicon.ico" >
</head>
Alternativ: extern verlinkter Favicon
<html>
<head>
<title>Meine erste Homepage</title>
<link rel="shortcut icon" href="http://www.meine-erste-homepage.com/bilder/favicon.ico" >
</head>
Der rote Teil ist im Quelltext einzufügen als Hinweis auf den Favicon. Wenn Sie keine Angabe über den Favicon im Head-Bereich erstellen, suchen die Browser automatisch im Stammverzeichnis nach der Datei favicon.ico. Favicons werden immer im Dateiformat ico erstellt, die möglichen Größe ist 16 x 16 Pixel (als alternative Größe kann zusätzlich der Favicon in 32 x 32 Pixel erstellt werden). Die Farbauswahl sollten auf 256 Farben beschränkt werden. Es gibt auch die Möglichkeit, transparente Bereiche in einem Favicon zu definieren.
Vorteile des Favicons: In der Favoritenliste Ihrer User fallen Webseiten mit einem individuellem Icon besser auf als mit einem Standard-Icon. Natürlich muss dabei der Favicon zum Design und Thema der Webseite passen. Dabei sollte folgender Sinnspruch gelten:
Einen Menschen erkennen Sie an seinem Gesicht!
Eine Stadt erkennen Sie anhand der Bauwerke!
Eine Homepage erkennen Sie wieder anhand des Favicon !
Wie erstellen Sie sich jetzt schnell und einfach ein Favicon? Es gibt nachfolgende Generatoren im Internet:
Sie können auch mit einigen Grafikprogrammen wie Michelangelo Favicons generieren, ebenso kann das Bildbetrachtungsprogramm Irfanview bestehende Grafiken in das ICO-Format umwandeln. Ein einfaches Umbenennen eines Gifs z.B. im Windows-Explorer in eine ICO-Datei funktioniert dagegen nicht (in der Regel wird sogar der Warnhinweis: "durch diese Umbennenung kann Ihre Datei unbrauchbar werden" angezeigt).
In einigen Browsern wird der Favicon nicht sofort nach dem Bookmarken einer URL angezeigt. Oftmals hilft es, den Cache zu leeren und es dann nochmal zu versuchen.
Weitere Infos zu Favicons finden Sie auf folgenden Internetseiten:
www.bjoernsworld.de/ie/favicon.html - Informationen zum Favicon
www.deltatangobravo.com/archives/2004/march/favourite - Favourite Favicons
www.favicon.de - Deutsche Seite, beschreibt die genaue Vorgehensweise der Erstellung und viele weitere Informationen zum Favicon. Hier gibt es auch das Patchwork www.patchwork.favicon.de, die größte (und erste) Sammlung von Favicons weltweit, da sind 768 Websites bzw. deren Favicons vertreten.
www.favicon.de/browser.html - Hier finden Sie eine Übersicht, welcher Browser die Favicon-Funktion unterstützt. Die Browser Microsoft Internet Explorer, Mozilla (und Klone wie Firefox), Netscape, Opera und Safari zeigen in den jeweils neuesten Versionen Favicons an.
www.favicon.com - Infos in Englisch, leider nur noch mit kostempflichtigem Icon-Service.
www.iconarchive.com - hier gibt es ein riesiges Icon-Archiv, hier finden Sie auch Ihren Traum-Favicon!!! Viele Icons werden frei zum Download angeboten.
www.icondatenbank.com - jede Menge kostenlose Icons, auch als Favions zu verwenden.
www.makikoitoh.com/archives/2004/01/03/favicon.php - Infos zu bekannten Favicons
www.peerbot.de - Favicon-Suchmaschine
www.uni-hohenheim.de/~agroth/webstube/eigene/favicon.htm - sehr ausführliche Informationen zum Favicon und weitere Links
www.webmaster-inside.net/hp-erstellung/favicon.php - Schritt für Schritt wird der Besucher in dies Thematik Favicon für die eigene Homepage eingeführt: Mit grundsätzlichen Informationen, einer tutorialartigen Anleitung zur eigenen Erstellung und Integrierung und schließlich mit kostenlosen Iconvorlagen. Ideal auch für Einsteiger.
www.willikuesters.de/Favicon.htm - Informationen zum Favicon mit Einbauanleitung und Muster-Favicons.
Weitere Rubriken, die für Sie interessant sein könnten:
- Buttons - erstellen Sie kleine Grafiken als Schaltflächen
- Grafiken - Bilder für die eigene Homepage
- Icons - kleine Grafiken - ideal für die Gestaltung Ihrer Internetseite
- Logo - erstellen Sie ein einprägsames Logo für Ihre Webseite