favicon.png vs favicon.ico -为什么我应该使用PNG而不是ICO?

小开

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

小开

最佳答案

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

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

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

小开

所有现代浏览器(在Chrome 4、Firefox 3.5、IE8、Opera 10和Safari 4上进行了测试)总是会请求favicon.ico，除非你通过<link>指定了一个快捷图标。因此，如果你没有显式地指定一个，最好总是有一个favicon.ico文件，以避免404。雅虎建议你把它做得小一点，可缓存。

你也不必为了alpha透明度而使用PNG。ICO文件支持alpha透明度很好(即32位颜色)，尽管几乎没有任何工具允许你创建它们。我经常使用动态驱动器的FavIcon生成器创建带有alpha透明性的favicon.ico文件。这是我所知道的唯一能做到的在线工具。

还有一个免费的Photoshop插件可以创建它们。

小开

.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用户设计的一个网站快捷方式。

小开

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

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

小开

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

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

小开

一些社交工具，如谷歌+使用一个简单的方法来获取外部链接的favicon，抓取 http://your.domainname.com/favicon.ico < / p >

由于它们不预取HTML内容，<link>标记将不起作用。在这种情况下，您可能希望使用mod_rewrite规则，或者只是将文件放置在默认位置。

小开

ico可以是一个png。

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

支持是旧的，出现在Windows Vista中(2007)，浏览器很好地支持，尽管不一定是图标编辑软件。

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

小开

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

    <!-- 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在根目录。