ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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


m
mercator

所有现代浏览器(使用 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;大多数现代浏览器不太关心文件扩展名。顺便说一句,这是最好的答案,应该被接受。
3
3 revs, 2 users 93%

由于此线程中其他人的大量更新和注释,答案被替换(并转为社区 Wiki):

ICO 和 PNG 都允许基于全 alpha 通道的透明度

ICO 允许向后兼容旧浏览器(例如 IE6)

PNG 可能对透明度有更广泛的工具支持,但您也可以找到创建 alpha 通道 ICO 的工具,例如 @mercator 提到的 Dynamic Drive 工具和 Photoshop 插件。

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


ICO 还允许 alpha 通道
-1 ICO 支持多种分辨率,包括完整的 Alpha 通道。顺便说一句,1 位 alpha 被称为“透明度”。 ICO 唯一真正的限制是图标长度大于或等于 256(任何方向),尽管它已经被克服了好几次。
-1 .ico 还允许在一个文件中使用多种分辨率(例如 16x16 和 32x32)。因此,当您在桌面上创建快捷方式时,icone 会保持良好状态。
大多数浏览器更喜欢根目录中的 favicon.ico,而不是链接的。使用您的解决方案,大多数浏览器会选择不透明的 .ico 而不是链接的 png。
@lode 为什么它会特别选择不透明的 ico 而不是透明的 ico?
K
KyleMit

.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 用户。


PNG也可以提供alpha通道
是的,我的观点是,ico 可以做 png 可以做的所有事情(alpha-transparency)作为一个图标,此外,它们从第 0 年起就受到所有浏览器的支持。
根据维基百科,Internet Explorer 将无法支持这样的行:<link rel="icon" type="image/vnd.microsoft.icon" href="example.com/image.ico" />
很有可能该网站自第 0 年起就不支持浏览器了,那何必呢?尝试在 IE6 中加载一个现代网站,看看会发生什么;)
Á
Álvaro González

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

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


与此相关的是,IE9 也使用这些大图标固定到 win7 任务栏,请参阅:stackoverflow.com/questions/3723715/…
嗯,理论上的? Windows 7 附带的相同图标可在 Windows 95 中以 8 位颜色模式使用。我认为这很实用,不是吗?
请注意,这个答案写于 2009 年。当时的浏览器场景与现在大不相同。
p
pmoleri

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

要创建 Png 和图标文件,我建议使用 The Gimp


对于网站来说不是很多吗?等到每个人都开始使用类似视网膜的显示器;突然之间会有一个很好的理由为什么人们可能会在他们的 favicon 中包含 32x32 或更大的尺寸......
我们正在谈论网站图标,因此支持问题实际上与您所说的相反
+1 解决了最初的问题,并且不会陷入透明度的困境。还提到了一个支持 .ico 格式的应用程序。
C
Chris Forrence

一些社交工具(如 Google+)使用一种简单的方法来获取外部链接的网站图标,获取 http://your.domainname.com/favicon.ico

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


不知道它是真是假,但这是我决定在根目录中创建 favicon.ico 以及我拥有的 png 的决定性论据。
我在 telly.com 工作时知道这一点,-来自 google plus 团队的 paul lindner。 plus.google.com/117259934788907243749/about
将网站图标放在根目录中是事实上的标准,因此出于此答案中提到的原因,我会坚持使用它。
A
Adria

ico 可以是 png。

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

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

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


s
s3c

为了它的价值,我这样做:

    <!-- 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 并将其放在某个地方以便快速访问。
a
aehlke

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


没有理由不能同时使用这两者 - IE6 目录树中的 ico 和现代浏览器页面代码中通过 <link> 指定的 PNG。
你为什么要同时使用这两个?如果您要费心制作 ico,那么使用 png 有什么好处?当然,这只是额外的工作和额外的代码。
嗨@Orcra - 我想如果你在 8 年前写这个答案时读过这篇文章,你不会觉得这很有趣,并且不得不考虑像 IE6 之类的东西 :) StackOverflow 允许编辑答案,所以请随时自行更新为今天相关的事情
@aehike你说得对,我不检查时间戳是不好的。
@CFPSupport 为回击道歉 - 我可以管理这个具体的答案,但我绝对觉得没有持续的责任来积极管理和整理我近十年前在这里发布的所有内容,所以我希望有一个更好的系统解决方案

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅