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

Question

Gibt es außer der Tatsache, dass PNG das gängigere Bildformat ist, einen technischen Grund, favicon.png gegenüber favicon.ico zu bevorzugen?

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

Answer 1

Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) fordern immer eine favicon.ico es sei denn, Sie haben ein Verknüpfungssymbol über <link> . Wenn Sie also nicht explizit eine angeben, ist es am besten, wenn Sie immer eine favicon.ico Datei, um eine 404 zu vermeiden. Yahoo! empfiehlt, sie klein und cachefähig zu gestalten.

Und Sie müssen sich auch nicht nur wegen der Alpha-Transparenz für ein PNG entscheiden. ICO-Dateien unterstützen Alphatransparenz sehr gut (d.h. 32-Bit-Farbe), obwohl kaum ein Werkzeug es erlaubt, sie zu erstellen. Ich verwende regelmäßig Der FavIcon-Generator von Dynamic Drive zu erstellen favicon.ico Dateien mit Alpha-Transparenz. Es ist das einzige Online-Tool, das ich kenne, das das kann.

Außerdem gibt es eine kostenlose Photoshop-Plug-in die sie schaffen können.

Answer 2

Antwort ersetzt (und in Community Wiki umgewandelt) aufgrund zahlreicher Aktualisierungen und Hinweise von verschiedenen anderen in diesem Thread:

• ICOs und PNGs erlauben beide volle Transparenz auf Basis des Alphakanals
• ICO ermöglicht die Abwärtskompatibilität mit älteren Browsern (z. B. IE6)
• PNG hat wahrscheinlich eine breitere Unterstützung für Transparenz, aber Sie können auch Werkzeuge finden, um ICOs mit Alphakanal zu erstellen, wie zum Beispiel das Dynamic Drive Werkzeug et Photoshop-Plugin erwähnt von @mercator.

Weitere Einzelheiten finden Sie in den anderen Antworten hier.

Answer 3

.png-Dateien sind gut, aber auch .ico-Dateien bieten Transparenz im Alphakanal, plus sie bieten Abwärtskompatibilität.

Schauen Sie sich an, welcher Typ StackOverflow verwendet (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"> 

Das Apple-itouch-Dingsbums ist für iPhone-Benutzer, die eine Verknüpfung zu einer Website herstellen.

Answer 4

Der theoretische Vorteil von *.ico-Dateien ist, dass sie Container sind, die mehr als ein Symbol enthalten können. Sie könnten z. B. ein Bild mit Alphakanal und eine 16-Farben-Version für ältere Systeme speichern, oder Sie könnten 32x32- und 48x48-Symbole hinzufügen (die z. B. angezeigt werden, wenn Sie einen Link in den Windows-Explorer ziehen).

Diese gute Idee kollidiert jedoch häufig mit den Browser-Implementierungen.

Answer 5

PNG hat 2 Vorteile: Es ist kleiner und wird häufiger verwendet und unterstützt (außer im Fall von Favicons). Wie bereits erwähnt, können ICO-Symbole mehrere Größen haben, was für Desktop-Anwendungen nützlich ist, aber nicht allzu sehr für Websites. Ich würde Ihnen empfehlen, ein Favicon.ico in die Wurzel Ihrer Anwendung zu setzen. Und wenn Sie Zugriff auf den Kopf Ihrer Website haben, verwenden Sie den Tag, um auf eine png-Datei zu verweisen. So zeigen ältere Browser das favicon.ico und neuere das png an.

Um Png- und Icon-Dateien zu erstellen, empfehle ich Die Gimp .