favicon.png vs favicon.ico - 我为什么要使用PNG而不是ICO？

Question

favicon.png vs favicon.ico - 我为什么要使用PNG而不是ICO？

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

我支持所有支持PNG最爱图标的现代浏览器.

Answer 1

所有现代浏览器(使用Chrome 4,Firefox 3.5,IE8,Opera 10和Safari 4测试)将始终请求a,favicon.ico除非您通过指定了快捷方式图标<link>.所以如果你没有明确指定一个,最好总是有一个favicon.ico文件,以避免404.Yahoo !建议你把它缩小并可以缓存.

而且你也不必为了透明度而去寻找PNG.ICO文件支持alpha透明度很好(即32位颜色),但几乎没有任何工具允许您创建它们.我经常使用Dynamic Drive的FavIcon Generator来创建favicon.ico具有alpha透明度的文件.这是我所知道的唯一可以做到的在线工具.

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

很好的提示这个动态驱动工具!立即加入书签.谢谢! (6认同)
对于那些没有650美元的Photoshop的人,您可以使用pixlr.com(免费)创建,编辑和保存.png文件,具有完整的分层和透明度:) (4认同)
重新工具,这在很大程度上是不真实的; 有几个图标设计工具.我过去自己写了一个简单的. (3认同)
@Pacerier在PS中编辑`.ico`非常困难.即使你这样做,最终结果太糟糕了,你会认为`.bmp`是一种更好的格式(它增加了很多元数据,使得重新编辑成为一种巨大的痛苦). (3认同)
@mikevoermans:它仍被视为PNG; 大多数现代浏览器都不关心文件扩展名.顺便说一句,这是最好的答案,应该是公认的答案. (3认同)
感谢Dynamic Drive FavIcon.非常非常酷! (2认同)
不要将photoshop用于小图标......不要问为什么,只是不要.它污染了图标的格式声誉.:) (2认同)
@Christian,为什么？ (2认同)
叫我疯了,但是我通过创建.png(完全透明)并仅重命名扩展来制作favicon.到目前为止没问题.思考？ (2认同)
@mikevoermans你疯了.但允许它工作的人更疯狂. (2认同)

Answer 2

Amb*_*ber 221

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

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

有关更多详细信息,请随时查阅其他答案.

ICO还允许alpha通道 (78认同)
-1 ICO支持多种分辨率,包括完整的alpha通道.顺便说一句,1位alpha被称为"透明度".ICO唯一真正的限制是图标长度大于或等于256(任何方向),尽管已被多次克服. (58认同)
-1 .ico还允许在一个文件中使用多个分辨率(例如16x16和32x32).因此,当您在桌面上创建快捷方式时,icone会保持良好状态. (26认同)
大多数浏览器都喜欢根链接的favicon.ico.使用您的解决方案,大多数浏览器会选择*非透明*.ico而不是链接的png. (4认同)

Answer 3

Wou*_*ick 45

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

Run Code Online (Sandbox Code Playgroud)

apple-itouch很适合为网站提供快捷方式的iphone用户.

PNG还可以提供alpha通道 (14认同)
是的,我的观点是ico可以做所有可以做的事情(alpha-transparency)作为favicon,而且从0年开始它们都得到了所有浏览器的支持. (10认同)
该网站可能从第 0 年起就不支持浏览器了，为什么还要麻烦呢？尝试在 IE6 中加载一个现代网站，看看会发生什么；) (3认同)

Answer 4

Álv*_*lez 24

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

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

请注意，这个答案是 2009 年写的。当时的浏览器场景与现在有很大不同。 (3认同)

Answer 5

pmo*_*eri 15

PNG有两个优点:它具有更小的尺寸,并且它被更广泛地使用和支持(除了例如favicon).正如ICO之前提到的,可以有多个大小的图标,这对桌面应用程序很有用,但对网站来说不是太多.我建议你在你的应用程序的根目录中放一个favicon.ico.如果您有权访问网站页面的头部,请使用标记指向png文件.因此,较旧的浏览器将显示favicon.ico和更新的png.

要创建Png和Icon文件,我建议使用The Gimp.

对网站而言并非如此？等到每个人都开始使用类似视网膜的显示器; 突然间会有一个很好的理由让人们可以在他们的图标中加入32x32或更大的尺寸...... (3认同)

Answer 6

jda*_*net 12

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

由于它们不预取HTML内容,因此<link>标记将无法使用.在这种情况下,您可能希望使用mod_rewrite规则或仅将文件放在默认位置.

我从http://telly.com的工作中了解到这一点,-via paul lindner是google plus团队的成员.https://plus.google.com/117259934788907243749/about (2认同)

Answer 7

Adr*_*ria 7

ico可以是 png。

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

支持已久，出现在Windows Vista（2007）中，并且得到了浏览器的很好支持，尽管不一定由图标编辑软件提供。

任何有效的png（包括标头）都可以由6字节的ico标头和16字节的图像目录作为前缀。
GIMP具有本机支持。只需将其导出为ico，然后勾选“压缩（PNG）”即可。

Answer 8

aeh*_*lke 5

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

没有理由不能同时使用 IE6 目录树中的 ico 和现代浏览器页面代码中通过“<link>”指定的 PNG。 (21认同)
为什么要同时使用两者？如果你要费心制作一个 ico，那么使用 png 会有什么好处呢？当然，这只是额外的工作和额外的代码。 (10认同)
嗨@Orcra - 我想如果你在8年前读过这篇文章，你就不会觉得这很有趣，当时我写了这个答案，并且不得不考虑像IE6这样的事情:) StackOverflow允许编辑答案，所以请随时自己更新它今天相关的事情 (9认同)
@aehike，你说得有道理，但我没有检查时间戳，这很糟糕。 (3认同)

Answer 9

s3c*_*s3c 5

对于它的价值，我这样做：

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

Run Code Online (Sandbox Code Playgroud)

而且我仍然将 favicon.ico 保留在根目录中。

归档时间：	16 年，1 月前
查看次数：	288239 次
最近记录：	8 年，3 月前