Favicon
GreenSmilies.com hat nun ein eigenes Favicon - natürlich ist es Mr. Green! ![]()
Wer die letzten Tage aufmerksam war, müsste mich auch beim Experimentieren mit unterschiedlichen Favicons gesehen haben:
![]()
Links außen ein Standard 15×15 Smilie der lange Zeit hier zu sehen war, rechts außen vor dem Original dann das fertige Favicon. Da das ganze doch nicht so simple ist, möchte ich meine Erfahrungen damit kundtun.
Favicon einbauen
Was ein Favicon ist, verrät der obige Link zur Wikipedia, eingebaut wird das ganze am besten als Link-Tag im Head auf allen Seiten das zugehörige Favicon verlinkt. Ich verwende auf allen Seiten das gleiche Favicon und die dazu notwendige Codezeile sieht in meinem Fall so aus:
<link rel="SHORTCUT ICON" href="http://www.greensmilies.com/favicon.ico" type="image/vnd.microsoft.icon" />
Generell sollte das Favicon immer im root-Verzeichnis der Domain liegen, manche Browser ignorieren nämlich den Link-Tag und suchen im root der Domain eine Datei mit dem Namen “favicon.ico”.
Favicon erstellen
Nun kommen wir zur wichtigsten Frage: Wie erstelle ich ein Favicon? Technisch gesehen ist es eine Datei im Icon-Format (MIME-Type image/vnd.microsoft.icon) und ein meiner Ansicht nach gutes Programm zum Erstellen und Berarbeiten ist VariIcon. Auch wenn einige Browser damit umgehen können, ist es kein guter Stil *.bmp, *.gif oder *.jpg Bilder einfach in *.ico umzubenennen!
Hat man sich in das Programm mal eingearbeitet, wird die Frage nach dem passenden Format aufkommen, hierbei kann ich folgendes empfehlen:
16×16 Pixel bei 32bpp
Es kann nicht schaden auch alle darunter liegenden Farbtiefen mit anzubieten (16 Farben, 256 Farben und 24bbp). Wer es ganz schön haben will, legt dann auch noch eine Ebene mit 32×32 Pixel bei 8 bis 32bpp an, dann wird das Favicon nicht grobpixelig, wenn man es als Verknüpfung auf dem Desktop hat.
Einfache Transparenz scheinen die drei wichtigsten Browser (Internet Explorer, Firefox und Opera) alle zu beherrschen, von alphatransparenten PNGs welche man importieren kann bzw. allgemein von Alphatransparenz kann ich aber nur abraten, da der Internet Explorer 6 damit nicht zurechtkommt und das Icon dadurch sehr unschön aussieht.
Der Internet Explorer 6 zeigt ein Favicon nur an, wenn die Seite in den Favoriten gespeichert wird. Leider ist das kein Garant dafür, dass das Favicon auch weiterhin angezeigt wird - der IE leidet diesbzgl. scheinbar an Demenz.
Zusammenfassung
- Einbau als Link-Tag im Head-Bereich der Seite
- Name der Datei “favicon.ico”
- Immer im root Verzeichnis der Domain
- 16×16 Pixel groß
- Einfache Transparenz ja, aber keine Alphatransparenz
- Möglichst alle Farbtiefen anbieten, vor allem die kleineren
Die ganz Faulen, können einen dieser Favicon-Generatoren verwenden:
- FavIcon from Pics
- FavIcon Generator
- Favicon Creator
- favikon

(12 votes, average: 4.58 out of 5)

Am 25. Februar 2007 um 03:24 Uhr.
hab mir jetzt auch mal eines zugelegt.. passte gerade so gut ;)
MfG AveN
Am 25. Februar 2007 um 03:34 Uhr.
aber ich scheine damit noch einige probleme zu haben.
auf http://code.avengelina.de funzt es einwandfrei
wenn man mein anderes blog unter: http://www.avengelina.de aufruft immerhin auf der startseite.
unter http://thoughts.avengelina.de gehtS’ gar nid :/
MfG AveN
Am 25. Februar 2007 um 11:02 Uhr.
Im IE6 sieht dein Favicon aber nicht so prickelnd aus, wegen der fehlenden Alphatransparenz mit der, der IE6 nicht zurecht kommt.
Es sieht zwar im FF als transparentes “A” sehr stylisch aus, aber da du dich eh der dunklen Seiten verschrieben hast, kannst du auch deinem Favicon einen schwarzen Hintergrund verpassen:
http://www.niedermayr.cc/webstuff/avengelina2.ico
(ohne 2 bekommst du ein favicon ohne 32×32 Layer)
;)
Bzgl. der Sichtbarkeit, ich seh es im FF überall, welchen Browser verwendest du?
Am 25. Februar 2007 um 12:42 Uhr.
FF 2.0.0.2
komisch, mit deinem icon bekomme ich das teil nun gar nicht mehr zu sehen Oo
und kanste mir nen screenshot davon zeigen wie dis mit dem ie6 ausschaut das alte? die webrenderer haben den teil leider nid mit drinne ;) und ich hab schon 7 druff…. unter code hab ich das noch drinne…
das wär sehr lieb… Danke.
LG AveN
Am 2. März 2007 um 17:19 Uhr.
Im Firefox siehts sehr schick aus! Bloß im IE 6.0 wird es bei mir gar nicht angezeigt. Vielleicht einfach weißen Hintergrund benutzen?
Am 2. März 2007 um 17:26 Uhr.
Ich sollte noch dazuschreiben, das der IE6 das Favicon nur nach dem bookmarken der Seite anzeigt. Und trotzdem vergisst er es danach hin- und wieder.
Am 4. März 2007 um 01:04 Uhr.
war bei mir im firefox komischerweise auch so… mittlerweile zeigt er es an…
muss bei nächster gelegenheit auch das des 2. blogs ändern… und du solltest mal wieder was schreiben ;)
MfG AveN
Am 4. März 2007 um 01:20 Uhr.
Ich bin doch in meiner Lernpause!
Am 28. März 2007 um 14:57 Uhr.
Ein eigenes Favicon…
Mich hat es gestört, das man in der Adresszeile des Browsers nur so ein weißes Blatt mit abgeknickter Ecke sieht. Das einzige, was da Abhilfe schafft ist eines dieser kleinen Bildchen, die man manchmal bei einigen Seiten angezeigt bekommt. Wi…
Am 13. November 2007 um 22:18 Uhr.
[...] Noch mehr zum Thema hab ich zum Beispiel bei GreenSmilies.com gefunden. Auch den Link zum Generator. Danke an dieser Stelle. [...]
Am 21. Juli 2008 um 23:19 Uhr.
[...] ungewöhnlichen Spielumsetzng, gespielt wird nämlich in der Browseradresszeile und zwar im Favicon! Glaubt ihr nicht, dann klickt [...]
Am 8. September 2008 um 22:22 Uhr.
[...] AveN auch wollte, dass sein Favicon dem von Prinzzess folgt, habe ich mir gedacht, man könnte daraus eine kleine Blog-Aktion machen. [...]