488

除了 PNG 是一种更常见的图像格式这一事实之外，是否有任何技术理由支持 favicon.png 与 favicon.ico？

我支持现代浏览器，它们都支持 PNG 最喜欢的图标。

4

9 回答 9

380

所有现代浏览器（用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）总是会请求 a favicon.ico，除非您通过<link>. 因此，如果您没有明确指定一个，最好始终有一个favicon.ico文件，以避免 404。Yahoo ！建议您将其缩小且可缓存。

而且您也不必为了 alpha 透明度而选择 PNG。ICO 文件很好地支持 alpha 透明度（即 32 位颜色），尽管几乎没有任何工具允许您创建它们。我经常使用Dynamic Drive 的 FavIcon Generator来创建favicon.ico具有 alpha 透明度的文件。这是我所知道的唯一可以做到这一点的在线工具。

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

于 2009-08-28T00:03:55.347 回答
262

由于此线程中其他人的大量更新和注释，答案被替换（并转为社区 Wiki）：

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

请随时在此处查阅其他答案以获取更多详细信息。

于 2009-08-27T22:44:22.590 回答
58

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

例如，看看StackOverflow使用哪种类型（注意它是透明的）：

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

apple-itouch thingy 适用于制作网站快捷方式的 iPhone 用户。

于 2009-08-30T10:58:40.257 回答
28

*.ico 文件的理论优势在于它们是容器，不能容纳多个图标。例如，您可以为旧系统存储带有 alpha 通道和 16 色版本的图像，或者您可以添加 32x32 和 48x48 图标（例如，在将链接拖到 Windows 资源管理器时会显示）。

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

于 2009-11-18T17:33:21.000 回答
16

PNG有两个优点：它的尺寸更小，使用和支持更广泛（除非是网站图标）。之前提到过 ICO，可以有多种尺寸的图标，这对桌面应用很有用，但对网站来说不是太多。我建议您将 favicon.ico 放在应用程序的根目录中。如果您有权访问网站页面的 Head，请使用该标签指向 png 文件。所以较旧的浏览器将显示 favicon.ico 和较新的 png。

要创建 Png 和图标文件，我会推荐The Gimp。

于 2010-11-02T13:30:09.160 回答
12

一些社交工具（如 Google+）使用一种简单的方法来获取外部链接的 favicon，获取 http://your.domainname.com/favicon.ico

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

于 2012-06-18T23:49:44.153 回答
9

ico 可以是png。

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

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

任何有效的 png（包括标题在内）都可以在前面加上一个6 字节的 ico 标题和 16 字节的图像目录。
GIMP 具有本机支持。只需导出为 ico 并勾选“压缩 (PNG)”。

于 2017-02-22T19:49:22.900 回答
6

为了它的价值，我这样做：

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

于 2020-05-26T08:41:26.773 回答
5

如果您想要可靠的 IE6 兼容性，请在任何情况下避免使用 PNG。

于 2009-08-27T22:44:10.530 回答