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

442

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

我支持所有都支持PNG最喜欢图标的现代浏览器。

png favicon ico

— 乔恩·加洛韦
source

233

由于此线程中的许多其他更新和注解，答案被替换（并变为社区Wiki）：

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

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

— 琥珀色
source

78

ICO还允许alpha通道

— 阿尔瓦罗冈萨雷斯

58

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

— 克里斯蒂安

26

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

— gagarine

4

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

— 洛德（Lode）

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

— 罗布·格兰特

367

favicon.ico除非您通过指定了快捷方式图标，否则所有现代浏览器（经过Chrome 4，Firefox 3.5，IE8，Opera 10和Safari 4的测试）都将始终请求<link>。因此，如果您未明确指定一个文件，则最好始终有一个favicon.ico文件，以避免404。Yahoo ! 建议您将其缩小并缓存。

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

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

— 墨卡托
source

6

这个动态驱动工具很好的提示！立即添加书签。谢谢！

— Marcos Buarque'2

3

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

— 克里斯蒂安

4

对于那些没有650美元用于Photoshop的用户，您可以使用pixlr.com（免费）来创建，编辑和保存具有完全分层和透明度的.png文件：）

— Scott B

3

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

— 基督教徒

4

@mikevoermans：仍以PNG格式读取；大多数现代的浏览器都不太在乎文件扩展名。顺便说一句，这是最好的答案，应该被接受。

— rvighne 2014年

48

.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 whaty适用于为网站建立快捷方式的iPhone用户。

— 伍特·范·尼夫特里克
source

16

PNG还可以提供alpha通道

— 阿尔瓦罗冈萨雷斯

10

是的，我的观点是，ico可以作为png进行png可以做的所有事情（alpha透明），此外，它们从0

— 。– Wouter van Nifterick 2010年

根据Wikipedia的说法，Internet Explorer将无法支持这样的行：<link rel =“ icon” type =“ image / vnd.microsoft.icon” href =“ example.com/image.ico ” />

— 弗兰克斯特

2

很有可能是网站从0年起就不支持浏览器了，为什么还要打扰呢？尝试在IE6中加载现代网站，看看会发生什么；）

— Dominic

26

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

但是，这个好主意容易与浏览器实现冲突。

— 阿尔瓦罗·冈萨雷斯（ÁlvaroGonzález）
source

与此相关的是，IE9还采用了那些大图标销到任务栏WIN7看到这样的事实：stackoverflow.com/questions/3723715/...

— GazB

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

— 基督教徒

请注意，此答案写于2009年。当时的浏览器场景与现在截然不同。

— 阿尔瓦罗冈萨雷斯

15

PNG有2个优点：它具有更小的尺寸，并且得到了更广泛的使用和支持（在favicon中除外）。正如ICO之前提到的，图标可以有多个大小，这对桌面应用程序很有用，但对网站而言却不太多。我建议您将favicon.ico放在应用程序的根目录中。如果您有权访问网站页面的首页，则使用标记指向png文件。因此，较旧的浏览器将显示favicon.ico，而较新的浏览器将显示png。

要创建Png和Icon文件，我建议使用The Gimp。

— pmoleri
source

3

网站不是那么多吗？等到每个人都开始使用类似视网膜的显示器；突然会有一个很好的理由说明为什么他们的网站图标中可能包含32x32或更大的尺寸...

— Roman Starkov 2012年

1

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

— David Heffernan 2015年

1

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

— kovacsbv

12

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

由于它们不预提取HTML内容，因此该<link>标记将无效。在这种情况下，您可能要使用mod_rewrite规则或仅将文件放在默认位置。

— jdavid.net
source

1

不知道它是对还是错，但这是我决定除我拥有的png之外还在根目录中创建favicon.ico的决定性论据。

— 阿列克谢·特尼斯基

2

我是通过Telly.com上的工作知道这一点的，这是通过Google plus团队的保罗·林德纳（Paul Paul Lindner）进行的。plus.google.com/117259934788907243749/关于

— jdavid.net 2012年

将favicon放在根目录中是事实上的标准，因此出于该答案中提到的原因，我会坚持使用它。

— Stijn de Witt

8

ico可以是 png。

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

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

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

— 阿德里亚
source

3

如果要可靠的IE6兼容性，无论如何都要避免使用PNG。

— 艾尔克
source

19

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

— 琥珀

10

您为什么同时使用两者？如果您不愿意制作ico，那么使用png也有什么好处呢？当然，这只是额外的工作和额外的代码。

— Mr_Chimp 2011年

@Mr_Chimp是因为png是开放标准并且更具前瞻性？这是额外的一行标记。

— Wyatt8740

9

@Orcra大家好-如果您是在〜8年前写这篇答案时一直在阅读这篇文章，并且不得不考虑IE6之类的东西，我想您不会觉得它那么有趣。今天有关的事情

— aehlke '17

3

@aehike您有一个公平的提示，我很不检查时间戳。

— Orcra

0

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

    <!-- 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根目录。

— s3c
source