wake-up-neo.com

favicon.png vs favicon.ico - warum sollte ich PNG anstelle von ICO verwenden?

Abgesehen von der Tatsache, dass PNG ein häufigeres Bildformat ist, gibt es einen technischen Grund, favicon.png gegenüber favicon.ico zu bevorzugen?

Ich unterstütze moderne Browser, die alle PNG-Lieblingssymbole unterstützen.

421
Jon Galloway

Die Antwort wurde aufgrund zahlreicher Aktualisierungen und Notizen von verschiedenen anderen Nutzern in diesem Thread ersetzt (und als Community-Wiki aktiviert):

  • Sowohl ICOs als auch PNGs ermöglichen eine vollständige Transparenz auf Alpha-Kanal-Basis
  • ICO ermöglicht die Abwärtskompatibilität mit älteren Browsern (z. B. IE6).
  • PNG bietet wahrscheinlich eine breitere Werkzeugunterstützung für Transparenz. Sie können jedoch auch Werkzeuge zum Erstellen von Alpha-Kanal-ICOs finden, z. B. das Dynamic Drive-Werkzeug und Photoshop Plugin von @mercator erwähnt.

Fühlen Sie sich frei, die anderen Antworten hier für weitere Details zu konsultieren.

217
Amber

Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4)) fordern immer einen favicon.ico An, außer Sie Habe über <link> ein Verknüpfungssymbol angegeben. Wenn Sie eines nicht explizit angeben, ist es am besten, immer eine favicon.ico - Datei zu haben, um 404 zu vermeiden. Yahoo! Schlägt vor, dass Sie es klein und cachefähig machen.

Und Sie müssen sich nicht nur für die Alpha-Transparenz für ein PNG entscheiden. ICO-Dateien unterstützen Alpha-Transparenz (d. H. 32-Bit-Farbe), obwohl Sie sie mit kaum einem Tool erstellen können. Ich verwende regelmäßig den FavIcon Generator von Dynamic Drive , um favicon.ico - Dateien mit Alpha-Transparenz zu erstellen. Es ist das einzige Online-Tool, von dem ich weiß, dass es das kann.

Es gibt auch ein kostenloses Photoshop-Plug-In , mit dem sie erstellt werden können.

358
mercator

.png-Dateien sind nett, aber .ico-Dateien bieten auch Alpha-Channel-Transparenz plus Sie bieten Abwärtskompatibilität.

Schauen Sie sich an, welchen Typ StackOverflow zum Beispiel verwendet (beachten Sie, dass er transparent ist):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="Apple-touch-icon" href="http://sstatic.net/so/Apple-touch-icon.png"> 

Das Apple-iTouch-Ding ist für iPhone-Nutzer gedacht, die eine Verknüpfung zu einer Website herstellen.

45

Der theoretische Vorteil von * .ico-Dateien besteht darin, dass es sich um Container handelt, die mehr als ein Symbol enthalten können. Sie können zum Beispiel ein Bild mit Alphakanal und einer 16-Farben-Version für ältere Systeme speichern oder 32x32- und 48x48-Symbole hinzufügen (die beim Ziehen eines Links zum Windows-Explorer angezeigt werden sollten).

Diese gute Idee kollidiert jedoch häufig mit Browserimplementierungen.

24

PNG hat zwei Vorteile: Es ist kleiner und wird häufiger verwendet und unterstützt (mit Ausnahme von Favicons). Wie bereits erwähnt, kann ICO Symbole in mehreren Größen haben, was für Desktop-Anwendungen nützlich ist, für Websites jedoch nicht zu viel. Ich würde Ihnen empfehlen, eine favicon.ico im Stammverzeichnis Ihrer Anwendung zu platzieren. Wenn Sie Zugriff auf den Kopf Ihrer Website-Seiten haben, verwenden Sie das Tag, um auf eine PNG-Datei zu verweisen. Daher wird in älteren Browsern die Datei favicon.ico und in neueren Browsern die Datei png angezeigt.

Zum Erstellen von Png- und Icon-Dateien würde ich The Gimp empfehlen.

15
pmoleri

Einige soziale Tools wie Google+ verwenden eine einfache Methode, um ein Favicon für externe Links abzurufen: http: //Ihr.Domänenname.com/favicon.ico

Da sie den HTML-Inhalt nicht vorab abrufen, wird der <link> Tag wird nicht funktionieren. In diesem Fall möchten Sie möglicherweise eine mod_rewrite-Regel verwenden oder die Datei einfach am Standardspeicherort ablegen.

12
jdavid.net

Ein ico kann sein ein png.

Genauer gesagt können Sie ein oder mehrere PNGs in diesem minimalen Containerformat speichern, anstatt der üblichen Bitmap + Alpha, die jeder stark mit ico assoziiert.

Die Unterstützung ist alt, erscheint in Windows Vista (2007) und wird von Browsern gut unterstützt, jedoch nicht unbedingt von Software zur Symbolbearbeitung.

Jedem gültigen PNG (Ganzes einschließlich Header) können ein 6-Byte-ICO-Header und ein 16-Byte-Image-Verzeichnis vorangestellt werden.
GIMP hat native Unterstützung. Einfach als ico exportieren und "Compressed (PNG)" ankreuzen.

7
Adria

Vermeiden Sie PNG auf jeden Fall, wenn Sie eine zuverlässige IE6-Kompatibilität wünschen.

3
aehlke