除了PNG是一种更常见的图像格式之外,还有什么技术上的原因让我们更喜欢favicon.png而不是favicon.ico吗?

我支持所有支持PNG收藏图标的现代浏览器。


当前回答

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

其他回答

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

ico文件理论上的优势是它们是可以容纳多个图标的容器。例如,您可以存储带有alpha通道的图像和用于遗留系统的16色版本的图像,或者您可以添加32x32和48x48图标(当拖动链接到Windows资源管理器时将显示)。

然而,这个好主意往往与浏览器实现相冲突。

答案被替换了(并变成了社区维基),因为在这个帖子中有许多其他人的更新和注释:

ico和png都允许完全基于alpha通道的透明度 ICO允许向后兼容旧浏览器(例如IE6) PNG可能对透明度有更广泛的工具支持,但你也可以找到创建alpha通道ico的工具,比如@mercator提到的Dynamic Drive工具和Photoshop插件。

请在这里咨询其他答案以了解更多细节。

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

    <!-- 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)”。