favicon.png 与 favicon.ico - 为什么我应该使用 PNG 而不是 ICO？
除了 PNG 是一种更常见的图像格式这一事实之外，还有其他技术原因支持 favicon.png 与 favicon.ico 吗？
我支持现代浏览器，它们都支持 PNG 最喜欢的图标。
Other than the fact that PNG is a more common image format, is there any technical reason to favor favicon.png vs. favicon.ico?
I'm supporting modern browsers which all support PNG favorite icons.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
如果您想要可靠的 IE6 兼容性，请在任何情况下避免使用 PNG。
Avoid PNG in any case if you want reliable IE6 compatibility.
所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 进行测试）将始终请求
favicon.ico，除非您通过指定了快捷方式图标。因此，如果您没有明确指定，最好始终有一个favicon.ico文件，以避免 404。雅虎！建议您将其缩小并可缓存。而且您也不必仅仅为了 alpha 透明度而选择 PNG。 ICO 文件 支持 alpha 透明度很好（即 32 位颜色），尽管几乎没有工具允许您创建它们。我经常使用 Dynamic Drive 的 FavIcon Generator 创建带有 alpha 的
favicon.ico文件透明度。这是我所知道的唯一可以做到这一点的在线工具。还有一个免费的 Photoshop 插件可以创建它们。
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a
favicon.icounless you've specified a shortcut icon via<link>. So if you don't explicitly specify one, it's best to always have afavicon.icofile, to avoid a 404. Yahoo! suggests you make it small and cacheable.And you don't have to go for a PNG just for the alpha transparency either. ICO files support alpha transparency just fine (i.e. 32-bit color), though hardly any tools allow you to create them. I regularly use Dynamic Drive's FavIcon Generator to create
favicon.icofiles with alpha transparency. It's the only online tool I know of that can do it.There's also a free Photoshop plug-in that can create them.
由于该线程中其他人的大量更新和注释，答案被替换（并变成了社区 Wiki）：
请随时查阅此处的其他答案以了解更多详细信息。
Answer replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread:
Feel free to consult the other answers here for more details.
.png 文件很好，但 .ico 文件也提供 alpha 通道透明度，加上它们为您提供向后兼容性。
例如，看看 StackOverflow 使用的类型（请注意，它是透明的）：
apple-itouch 是为 iphone 用户创建网站快捷方式的。
.png files are nice, but .ico files provide alpha-channel transparency, too, plus they give you backwards compatibility.
Have a look at which type StackOverflow uses for example (note that it's transparent):
The apple-itouch thingy is for iphone users that make a shortcut to a website.
*.ico 文件的理论上的优点是它们是可以容纳多个图标的容器。例如，您可以为旧系统存储带有 Alpha 通道和 16 色版本的图像，或者您可以添加 32x32 和 48x48 图标（例如，将链接拖动到 Windows 资源管理器时会显示）。
然而，这个好主意往往会与浏览器的实现发生冲突。
The theoretical advantage of *.ico files is that they are containers than can hold more than one icon. You could for instance store an image with alpha channel and a 16 colour version for legacy systems, or you could add 32x32 and 48x48 icons (which would show up when e.g. dragging a link to Windows explorer).
This good idea, however, tends to clash with browser implementations.
PNG 有两个优点：尺寸更小，使用和支持更广泛（除了案例图标）。
正如之前提到的 ICO，可以有多种尺寸的图标，这对于桌面应用程序很有用，但对于网站来说就不太方便了。
我建议您将 favicon.ico 放在应用程序的根目录中。如果您有权访问网站页面的标题，请使用标签指向 png 文件。
因此，较旧的浏览器将显示 favicon.ico，而较新的浏览器将显示 png。
要创建 Png 和 Icon 文件，我推荐 The Gimp。
PNG has 2 advantages: it has smaller size and it's more widely used and supported (except in case favicons).
As mentioned before ICO, can have multiple size icons, which is useful for desktop applications, but not too much for websites.
I would recommend you to put a favicon.ico in the root of your application. An if you have access to the Head of your website pages use the tag to point to a png file.
So older browser will show the favicon.ico and newer ones the png.
To create Png and Icon files I would recommend The Gimp.
一些社交工具（例如 Google+）使用一种简单的方法来获取外部链接的图标，即获取
http://your.domainname.com/favicon.ico
因为它们不会预取 HTML内容，
标记将不起作用。在这种情况下，您可能需要使用 mod_rewrite 规则或仅将文件放置在默认位置。Some social tools like Google+ use a simple method to get a favicon for external links, fetching
http://your.domainname.com/favicon.ico
Since they don't prefetch the HTML content, the
<link>tag will not work. In this case, you might want to use a mod_rewrite rule or just place the file in the default location.ico 可以为 png。
更准确地说，您可以在这种最小容器格式中存储一个或多个 png，而不是每个人都与 ico 强烈关联的通常位图+alpha。
支持是旧的，出现在 Windows Vista (2007) 和浏览器很好地支持，但图标编辑软件不一定支持。
任何有效的 png（包括标头）都可以在前面加上 6 字节 ico 标头 和 16 字节图像目录。
GIMP 有本机支持。只需导出为 ico 并勾选“压缩 (PNG)”即可。
An ico can be a png.
More precisely, you can store one or more png inside this minimal container format, instead of the usual bitmap+alpha that everyone strongly associates with ico.
Support is old, appearing in Windows Vista (2007) and is well supported by browsers, though not necessarily by icon editing software.
Any valid png (whole including header) can be prepended by a 6 byte ico header and 16 byte image directory.
GIMP has native support. Simply export as ico and tick "Compressed (PNG)".
为了它的价值，我这样做：
并且我仍然将favicon.ico保留在根目录中。有上百万种工具可以将 PNG 转换为 ICO。我使用 PNG2ICO。
我使用的其他工具是 Derivv。对于输入，我使用任何至少 228px * 228px 大的方形图像，并且我想将其用于图标。我将其命名为“favicon.png”，因此输出的名称始终如上面的 HTML 代码片段所示。为了避免手动输入所有尺寸，我导出了一次 CSV，然后每次都重复使用同一个。其内容为：
For what it's worth, I do this:
And I still keep the favicon.ico in root. There's a million tools for converting PNG to ICO out there. I use PNG2ICO.
Additional tool I use is Derivv. For input I use any square image that is at least 228px * 228px big, and I want to use for the favicon. I name it "favicon.png", so the output is always named as in the HTML snippet above. To avoid typing all of the sizes manually I exported the CSV once, and then I reuse the same one every time. It's contents: