如果你想要可靠的IE6兼容性，在任何情况下都不要使用PNG格式。

如果你想要可靠的IE6兼容性，在任何情况下都不要使用PNG格式。

.png文件很好，但是.ico文件也提供alpha通道的透明度，而且它们还提供向后兼容性。

看看StackOverflow使用的是哪种类型(注意它是透明的):

<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"> 
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">

apple-itouch是为iphone用户设计的一个网站快捷方式。

不管怎样，我是这样做的:

    <!-- 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">

我仍然将favicon.ico保存在根目录中。

ico可以是png。

更准确地说，你可以在这个最小的容器格式中存储一个或多个png，而不是通常的位图+alpha，每个人都强烈地与ico关联。

Support已经很老了，出现在Windows Vista(2007)中，浏览器也很支持它，不过图标编辑软件不一定支持它。

任何有效的png(包括头)都可以以一个6字节的ico头和16字节的图像目录作为前缀。 GIMP具有本机支持。只需导出为ico，并勾选“压缩(PNG)”。

PNG有两个优点:它的尺寸更小，它的使用和支持更广泛(favicons除外)。 如前所述，ICO可以有多个大小的图标，这对桌面应用程序很有用，但对网站来说并不太多。 我建议你把favicon.ico放在应用程序的根目录中。一个如果你有访问你的网站页面的头部使用标签指向一个png文件。 旧的浏览器会显示favicon.ico，新浏览器显示png。

要创建Png和图标文件，我建议使用Gimp。