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

Question

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

faviconpngico

520

除了PNG是更常见的图像格式之外，是否有任何技术原因支持favicon.png而不是favicon.ico呢？

我支持现代浏览器，它们都支持PNG收藏夹图标。

- Jon Galloway

9个回答

272

由于本帖中涉及不同人的多次更新和注释，因此回答已替换（并转换为社区Wiki）：

ICO和PNG都允许完全的alpha通道透明度
ICO允许向旧浏览器（如IE6）提供向后兼容性
PNG可能具有更广泛的透明度工具支持，但您也可以找到工具来创建包含alpha通道的ICO，例如@mercator提到的Dynamic Drive工具和Photoshop插件

如需更多详细信息，请随时参考其他答案。

- Amber

82

ICO也允许alpha通道。 - Álvaro González

62

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

29

.ico文件也允许在一个文件中包含多个分辨率（例如16x16和32x32）。因此，当您在桌面上创建快捷方式时，图标会保持清晰。 - gagarine

4

大多数浏览器更喜欢网站根目录下的favicon.ico文件而不是链接中指定的图标。使用您提供的解决方案，大多数浏览器将选择非透明的.ico图标而不是链接中指定的png图标。 - Lode

@lode 为什么它会特别选择一个非透明的ico而不是一个透明的ico呢？ - Rob Grant

不禁注意到这个被接受的答案实际上并没有回答问题。 - Graham Charles

66

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

例如，请看StackOverflow使用的哪种类型（请注意它是透明的）：

<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"> 
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">

苹果iTouch是为iPhone用户设计的，它可以将网站快捷方式添加到主屏幕上。

- Wouter van Nifterick

23

PNG格式还可以提供Alpha通道。 - Álvaro González

14

我的意思是说，ICO格式的图标可以像PNG格式一样实现透明效果，并且自年代起就被所有浏览器支持，可以用作网站的收藏夹图标。 - Wouter van Nifterick

根据维基百科的说法，Internet Explorer将无法支持这样的一行代码：<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" />。 - frankster

4

很可能该网站不支持自公元0年以来的浏览器，那还有什么意义呢？试着在IE6中加载一个现代的网站，看看会发生什么吧 ;) - Dominic

28

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

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

- Álvaro González

相关的是，IE9也使用那些大图标来固定到Win7任务栏上，参见：https://dev59.com/rm865IYBdhLWcg3wnf9t - GazB

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

3

请注意，此答案是在2009年编写的。当时的浏览器环境与现在大不相同。 - Álvaro González

17

PNG有两个优点：它的文件大小更小，而且更广泛地被使用和支持（除了网站图标的情况）。如前所述，ICO可以拥有多个尺寸的图标，这对桌面应用程序很有用，但对网站不太适用。我建议您在应用程序的根目录中放置一个favicon.ico。如果您可以访问网站页面的头部，请使用标签指向一个png文件。因此，旧的浏览器将显示favicon.ico，而新的浏览器将显示png。要创建Png和Icon文件，我建议使用The Gimp。

- pmoleri

3

网站上不需要那么大的图标吗？等到每个人都开始使用视网膜屏幕，突然间就有一个很好的理由为什么要在网站图标中包含32x32或更大尺寸的图标了... - Roman Starkov

1

我们正在谈论网站图标，因此支持问题实际上与您所说的相反。 - David Heffernan

1

+1回答了原问题，没有陷入透明度的泥潭。还提到了一个支持.ico格式的应用程序。 - kovacsbv

13

一些社交工具如Google+使用简单的方法获取外部链接的网站图标，即通过获取http://your.domainname.com/favicon.ico上的文件。

由于它们不会预读HTML内容，所以 <link> 标签不起作用。在这种情况下，你可能想使用mod_rewrite规则或将文件放置在默认位置。

- jdavid.net

1

不知道这是否属实，但这是我去创建在根目录下的favicon.ico（除了我已经有的png图标）的决定性因素。 - Alexei Tenitski

2

我从在http://telly.com的工作中得知这一点，-通过谷歌加团队的保罗林德纳。https://plus.google.com/117259934788907243749/about - jdavid.net

将网站图标放置在根目录下是事实上的标准，因此出于本答案所述的原因，我建议遵循这一标准。 - Stijn de Witt

10

ICO可以是PNG。

更精确地说，您可以将一个或多个PNG存储在这个最小的容器格式中，而不是通常与ICO强烈相关联的位图+Alpha。

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

任何有效的PNG（包括头文件在内）都可以加上6字节的ICO头文件和16字节的图像目录。
GIMP具有本地支持。只需导出为ico并选中“压缩（PNG）”即可。

- Adria

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放在根目录下。

- s3c

1

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

5

如果您想要确保IE6的兼容性可靠，请无论如何避免使用PNG格式。

- aehlke

21

你可以同时使用两种方法：在IE6的目录树中使用ico图标，在现代浏览器中则通过<link>标签在页面代码中指定PNG图片。请注意，这不会改变原意。 - Amber

10

为何要同时使用两者？如果你已经费心制作一个ico图标，使用png还有什么好处呢？显然这只是多做了一些工作和增加了一些代码。 - Mr_Chimp

9

嗨，@Orcra - 如果你8年前读到我写这篇答案时需要考虑IE6等问题，我想你可能不会觉得它很有趣。StackOverflow允许编辑答案，所以请随意更新为今天相关的内容。 - aehlke

3

@aehike，你说得很有道理，我的错，我没有查看时间戳。 - Orcra

1

@CFPSupport 对于推迟给您答复，我感到很抱歉 - 我可以处理这个具体问题的答案，但我坚决认为我没有持续管理和修剪我在这里发布的所有内容的责任，因此我希望有一个更好的系统解决方案。 - aehlke

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mercator · Accepted Answer

现代浏览器（已测试 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4）将始终请求 favicon.ico，除非您通过 <link> 指定了快捷图标。因此，如果您没有明确指定，则最好始终有一个 favicon.ico 文件，以避免出现 404 错误。Yahoo! 建议您使其小且可缓存。您也不必只为 alpha 透明度选择 PNG。ICO 文件同样支持 alpha 透明度（即 32 位颜色），尽管几乎没有工具可以创建它们。我经常使用 Dynamic Drive's FavIcon Generator 创建带有 alpha 透明度的 favicon.ico 文件。这是我所知道的唯一一个在线工具。

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