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

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

Da sie den HTML-Inhalt nicht im Voraus abrufen, wird die <link> Tag wird nicht funktionieren. In diesem Fall sollten Sie eine mod_rewrite-Regel verwenden oder die Datei einfach am Standardspeicherort ablegen.

Answer 2

Ein ico kann sein ein png.

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

Die Unterstützung ist veraltet, die in Windows Vista erscheinen (2007) und wird von Browsern gut unterstützt, wenn auch nicht unbedingt von Software zur Bearbeitung von Symbolen.

Jede gültige png (einschließlich Header) kann mit einem vorangestellten 6 Byte ico-Header und 16 Byte Bildverzeichnis.
GIMP bietet native Unterstützung. Exportieren Sie einfach als ico und markieren Sie "Komprimiert (PNG)".

Answer 3

Wenn Sie mich fragen, tue ich das:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

Und ich immer noch behalten Sie die favicon.ico in Root.

Answer 4

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