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:
Favicon History
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

Dieser Beitrag wurde unter Green Smilies intern abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

12 Kommentare zu Favicon

  1. AveN sagt:

    hab mir jetzt auch mal eines zugelegt.. passte gerade so gut ;)

    MfG AveN

  2. AveN sagt:

    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

  3. michael sagt:

    Im IE6 sieht dein Favicon aber nicht so prickelnd aus, wegen der fehlenden Alphatransparenz mit der, der IE6 nicht zurecht kommt. Smilie
    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?

  4. AveN sagt:

    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

  5. Thomas sagt:

    Im Firefox siehts sehr schick aus! Bloß im IE 6.0 wird es bei mir gar nicht angezeigt. Vielleicht einfach weißen Hintergrund benutzen?

  6. michael sagt:

    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. Smilie

  7. AveN sagt:

    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

  8. michael sagt:

    Ich bin doch in meiner Lernpause! Smilie

  9. Pingback: BasH-online.com

  10. Pingback: Ein eigenes Favicon — BasH-online.com

  11. Pingback: Ninjai: The Little Ninja - GreenSmilies

  12. Pingback: Ich mampf dein Favicon! - GreenSmilies

Kommentare sind geschlossen.