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

Question

Außer der Tatsache, dass PNG ist ein häufiges Bildformat, gibt es keinen technischen Grund zu bevorzugen favicon.png vs. favicon.ico?

Ich unterstütze modernen Browser, die alles Unterstützung PNG Liebling Symbole.

Answer 1

Antwort ersetzt (und wandte sich Community Wiki) aufgrund zahlreicher Updates und Notizen von verschiedenen anderen in diesem Thread:

• ICOs und PNGs beide erlauben Alphakanal-basierte Transparenz
• ICO ermöglicht die Abwärtskompatibilität zu älteren Browsern (z IE6)
• PNG hat wahrscheinlich breitere Werkzeug Unterstützung für Transparenz, aber Sie können finden Werkzeuge Alpha-Kanal ICOs als auch, wie die Dynamic Drive Tool und Photoshop-Plugin von @mercator erwähnt.

Sie können ferner die anderen Antworten hier, um weitere Informationen zu konsultieren.

Answer 2

Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) wird verlangen immer eine favicon.ico, wenn Sie ein Verknüpfungssymbol über <link> angegeben haben. Also, wenn Sie nicht explizit eine angeben, ist es am besten, immer eine favicon.ico Datei zu haben, ein 404. Yahoo! es klein und zwischenspeicherbar schlägt vor, die Sie machen.

Und Sie müssen nicht für eine PNG gehen entweder nur für die Alpha-Transparenz. ICO-Dateien Unterstützung Alpha-Transparenz nur in Ordnung (dh 32-Bit-Farbe), kaum obwohl jede Tools ermöglichen es Ihnen, sie zu schaffen. Ich benutze regelmäßig Dynamic Drive des FavIcon Generator favicon.ico Dateien mit Alpha-Transparenz zu schaffen . Es ist das einzige Online-Tool, die ich kenne, kann es tun.

Es gibt auch eine kostenlose Photoshop-Plug-in , die sie erstellen können.

Answer 3

.png Dateien sind nett, aber ICO-Dateien bieten Alpha-Kanal-Transparenz auch und geben sie dir die Abwärtskompatibilität.

Haben Sie einen Blick auf welche Art Stackoverflow Anwendungen zum Beispiel (beachten Sie, dass es 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"> 

Die Apfel-itouch Dingen ist für iPhone-Nutzer, die eine Verknüpfung zu einer Website zu machen.

Answer 4

Der theoretische Vorteil von * ICO-Dateien ist, dass sie Container als mehr halten kann als ein Symbol. Sie könnten zum Beispiel Speicher ein Bild mit Alphakanal und eine 16 Farb-Version für Legacy-Systeme, oder man könnte hinzufügen, 32x32 und 48x48-Icons (die würde sollten, wenn eine Verbindung zum Windows-Explorer ziehen).

Diese gute Idee, neigt jedoch dazu, mit Browser-Implementierungen zu kollidieren.

Answer 5

PNG hat zwei Vorteile: Es hat kleinere Größe und es ist weit verbreitet und unterstützt (außer im Fall Favicons). Wie bereits erwähnt ICO können mehrere Größen Symbole haben, die für Desktop-Anwendungen nützlich ist, aber nicht zu viel für Websites. Ich würde Ihnen empfehlen, ein favicon.ico in der Wurzel Ihrer Anwendung zu setzen. Ein, wenn Sie Zugriff auf den Leiter der Seiten Ihrer Website verwenden, um die Tag-Nummer auf eine png-Datei. So ältere Browser zeigt die favicon.ico und neuere die png.

So erstellen png und Icon-Dateien Ich würde empfehlen, The Gimp .

Answer 6

Einige sozialen Tools wie Google+ verwenden, um eine einfache Methode, ein Favicon für externe Links zu erhalten, holen http://your.domainname.com/favicon.ico

Da sie den HTML-Inhalt nicht vorab abzurufen, wird der <link> Tag nicht arbeiten. In diesem Fall sollten Sie eine mod_rewrite Regel verwenden oder einfach die Datei im Standardverzeichnis setzen.

Answer 7

Ein ico kann sein ein png.

Genauer gesagt, können Sie speichern eine oder mehrere png in diesem minimal-Container-Format, statt der üblichen Bitmap + alpha, dass jeder stark assoziiert mit ico.

Support alt ist, erscheinen in Windows Vista ( obwohl 2007) und von Browsern gut unterstützt wird, nicht unbedingt durch Symbol Editing-Software.

Jeder gültige png (ganz einschließlich Header) durch einen 6 Byte ico-Header vorangestellt werden und 16-Byte-Bild-Verzeichnis.
GIMP hat native Unterstützung. Exportieren Sie einfach als ico und tick "Compressed (PNG)".

Answer 8

Vermeiden PNG in jedem Fall, wenn Sie zuverlässige IE6 Kompatibilität mögen.