favicon.png 与 favicon.ico - 为啥我应该使用 PNG 而不是 ICO？

Posted 2023-02-18

【中文标题】favicon.png 与 favicon.ico - 为啥我应该使用 PNG 而不是 ICO？

【英文标题】：favicon.png vs favicon.ico - why should I use PNG instead of ICO?favicon.png 与 favicon.ico - 为什么我应该使用 PNG 而不是 ICO？

【发布时间】：2010-11-23 13:37:10

【问题描述】：

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

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

【参考方案1】：

所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）将始终请求 favicon.ico，除非您已通过 <link> 指定快捷方式图标。因此，如果您没有明确指定一个，最好始终有一个favicon.ico 文件，以避免出现 404。Yahoo! suggests you make it small and cacheable.

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

还有一个免费的Photoshop plug-in 可以创建它们。

【讨论】：

这个动态驱动工具的好提示！即时书签。谢谢！

重新工具，这在很大程度上是不真实的；有几种图标设计工具。过去我自己写过一个简单的。

对于那些没有 650 美元购买 Photoshop 的人，您可以使用 pixlr.com（免费）创建、编辑和保存具有完整分层和透明度的 .png 文件 :)

@Pacerier 在 PS 中编辑 .ico 非常困难。即使你这样做了，最终结果也很糟糕，你会认为.bmp 是一种更好的格式（它添加了很多元数据，使重新编辑变得非常痛苦）。

@mikevoermans：它仍然被读取为 PNG；大多数现代浏览器不太关心文件扩展名。顺便说一句，这是最好的答案，应该被接受。

【参考方案2】：

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

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

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

【讨论】：

ICO 也允许 alpha 通道

-1 ICO 支持多种分辨率，包括完整的 Alpha 通道。顺便说一句，1 位 alpha 被称为“透明度”。 ICO 唯一真正的限制是图标的长度（任何方向）大于或等于 256，尽管它已经被克服了好几次。

-1 .ico 还允许在一个文件中使用多种分辨率（例如 16x16 和 32x32）。因此，当您在桌面上创建快捷方式时，icone 会保持良好状态。

大多数浏览器更喜欢根目录中的 favicon.ico，而不是链接的。使用您的解决方案，大多数浏览器会选择 non-transparent .ico 而不是链接的 png。

@lode 为什么会特别选择不透明的 ico 而不是透明的 ico？

【参考方案3】：

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

看看 *** 使用哪种类型（注意它是透明的）：

<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 适用于制作网站快捷方式的 iPhone 用户。

【讨论】：

PNG也可以提供alpha通道

是的，我的意思是 ico 可以做 png 可以做的所有事情（alpha-transparency）作为一个图标，此外它们从第 0 年起就受到所有浏览器的支持。

根据*** Internet Explorer 将无法支持这样的行：example.com/image.ico" />

很可能该网站从第 0 年起就不支持浏览器了，那何必呢？尝试在 IE6 中加载一个现代网站，看看会发生什么;)

【参考方案4】：

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

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

【讨论】：

与此相关的是IE9也使用那些大图标固定到win7任务栏见：***.com/questions/3723715/…

嗯，理论上的？ Windows 7 附带的相同图标可在 Windows 95 中以 8 位颜色模式使用。我认为这很实用，不是吗？

请注意，这个答案写于 2009 年。当时的浏览器场景与现在大不相同。

【参考方案5】：

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

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

【讨论】：

对于网站来说不是很多？等到每个人都开始使用类似视网膜的显示器；突然之间会有一个很好的理由让人们在他们的 favicon 中包含 32x32 或更大的尺寸...

我们谈论的是网站图标，所以支持问题实际上与您所说的相反

+1 解决了原始问题，并且不会陷入透明度的困境。还提到了一个确实支持.ico格式的应用程序。

【参考方案6】：

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

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

【讨论】：

不知道是真是假，但这是我决定的论点，除了我拥有的 png 之外，还要在 root 中创建 favicon.ico。

我在telly.com 工作时知道这一点，-来自 google plus 团队的 paul lindner。 plus.google.com/117259934788907243749/about

将网站图标放在根目录是 de facto 标准，因此出于此答案中提到的原因，我会遵守它。

【参考方案7】：

图标可以成为 png。

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

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

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

【参考方案8】：

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

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

【讨论】：

我还使用 derivv.com 从超大方形 favicon.png 中获取所有尺寸。一次设置所有尺寸，然后导出 CSV 并将其存放在某个地方以便快速访问。

【参考方案9】：

如果您想要可靠的 IE6 兼容性，请避免使用 PNG。

【讨论】：

没有理由不能同时使用两者——IE6 目录树中的 ico 和现代浏览器页面代码中通过 <link> 指定的 PNG。

你为什么要同时使用这两个？如果您要费心制作 ico，那么使用 png 有什么好处？当然，这只是额外的工作和额外的代码。

嗨@Orcra - 我想你不会觉得它很有趣，如果你在大约 8 年前写这个答案时读到这个，并且不得不考虑像 IE6 之类的东西 :) *** 允许编辑答案，所以请随时自行将其更新为今天相关的内容

@aehike 你说得有道理，我不检查时间戳不好。

@CFPSupport 为回击道歉 - 我可以管理这个具体的答案，但我断然觉得没有持续的责任来积极管理和修饰我近十年前在这里发布的所有内容，所以我希望更好的系统解决方案