小开

16x16像素，*. ico格式。

小开

看起来您的文件应该是.ico类型。

检查这篇文章关于收藏夹：

http://www.html-kit.com/support/favicon/image-size/

小开

不，你不能使用非标准尺寸或尺寸，因为它会对人们的浏览器造成严重破坏，无论图标显示在哪里。你可以把它设为12x16（12像素侧有4个像素的白色/透明填充）来保持你的长宽比，但你不能更大（嗯，你可以，但浏览器会缩小它）。

小开

维基百科这么说：

此外，此类图标文件可以大小为16×16或32×32像素，8位或24位的颜色深度（注意GIF文件有一个有限的256个调色板条目）。

我认为最好的方法是使用32x32的gif并使用不同的浏览器进行测试。

小开

根据关于Favicon的维基百科文章，，Internet Explorer仅支持图标的ICO格式。

我会坚持使用两个不同的图标。

小开

恐怕每个分辨率都需要单独的文件。在活动监视器上有一篇非常好的文章描述了他们如何为每个iOS设备创建和实现图标：

小开

我不确定浏览器是否/如何缩放大图标，但W3C建议以下¹：

您选择的图像格式必须是16x16像素或32x32像素，使用8位或24位颜色。图像格式必须是PNG（W3C标准）、GIF或ICO之一。

¹w3c.org：如何为您的网站添加Favicon（开发中的草案）

小开

您的可以在同一个文件中有多个大小的图标。我通常创建48、32和16像素的图标（.ico文件）。您可以添加任何您想要的大小的图像。问题是，iPhone会使用ico文件吗？

ico也支持透明度，但我不确定它是否是像PNG这样的alpha通道；可能更像是打开或关闭的GIF。

小开

2020年更新：坚持16x16与32x32图标的原始问题：目前推荐32x32图标，完全跳过16x16图标。目前所有的浏览器和设备都支持32x32图标。图标会根据环境升级到192x192（假设没有更大的尺寸可用或者系统认不出）。从超低分辨率升级有明显的效果，所以最好坚持32x32作为最小基线。

对于IE，Microsoft建议将16x16、32x32和48x48打包在favicon.ico文件中。

对于iOS，Apple推荐特定的文件名和分辨率，对于运行iOS8的最新设备最多180x180。

AndroidChrome主要使用清单，也依赖于苹果触摸图标。

Windows 8.0上的IE 10需要PNG图片和背景颜色和Windows 8.1和10上的IE 11接受在名为#0的专用XML文件中声明的多个PNG图片

Safari为Mac OS X El Capitan引入了固定标签的SVG图标

其他一些平台寻找具有各种分辨率的PNG文件，例如谷歌电视的96x96图片或228x228歌剧海岸的图片。

查看此Favicon图片列表以获得完整的参考。

TLDR：这个图标生成器可以一次生成所有这些文件。生成器也可以实现为WordPress插件。完全披露：我是本网站的作者。

小开

您选择的图像格式必须为16x16像素或32x32像素，使用8位或24位颜色。图像必须是PNG（W3C标准）、GIF或ICO之一。-如何将收藏夹添加到您的网站-QA@W3C

小开

收藏夹的格式必须是方形的，否则浏览器会拉伸它。不幸的是，Internet Explorer<11不支持. gif或. png文件类型，而只支持Microsoft的. ico格式。您可以使用一些“收藏夹生成器”应用程序，例如：http://favicon-generator.org/

小开

实际上，要使您的收藏夹图标在所有浏览器中正常工作，您必须以正确的大小和格式添加10多个文件。

我和我的朋友为此创建了一个应用程序！你可以在faviconit.com中找到它

我们这样做了，所以人们不必手工创建所有这些图像和正确的标签，创建所有这些用来惹恼我的东西！

小开

简短的回答

图标应该是一组16x16、32x32和48x48的ICO格式图片。ICO格式与PNG不同。不支持非方形图片。

为了生成收藏夹图标，由于下面解释的许多原因，我建议你使用这个Favicon生成器。完全披露：我是这个网站的作者。

长而全面的回答

收藏夹图标必须是方形的。桌面浏览器和苹果iOS不支持非方形图标。

这个图标由几个文件支持：

favicon.ico图标。
其他PNG图标。

为了在桌面浏览器（Windows/IE，MacOS/Safari等）中获得最佳效果，您需要组合这两种类型的图标。

`favicon.ico`

虽然所有桌面浏览器都可以处理此图标，但它主要用于旧版本的IE。

ICO格式与PNG格式不同。这一点很棘手，因为一些浏览器足够聪明，可以正确处理PNG图片，即使它被错误地重命名为ICO扩展。

一个ICO文件可以包含几张图片和微软建议将16x16、32x32和48x48版本的图标放在#0中。例如，IE将使用16x16版本作为地址栏，32x32版本作为任务栏快捷方式。

使用以下命令声明收藏夹图标：

<link rel="icon" href="/path/to/icons/favicon.ico">

但是，建议使用将#0放在网站的根目录中和根本没有宣布，并让现代浏览器选择PNG图标。

PNG图标

现代桌面浏览器（IE11、最新版本的Chrome、Firefox…）更喜欢使用PNG图标。通常预期的大小是16x16、32x32和“尽可能大”。例如，MacOS/Safari使用196x196图标，如果它是它能找到的最大的。

推荐的尺寸是什么？选择您最喜欢的平台：

PNG图标声明为：

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">...

~~注意：Chrome不支持#0属性，并且倾向于加载所有声明的图标~~编辑：固定在2018年。

移动平台

这个问题是关于桌面图标的，所以没有必要在这个话题上钻研太多。

苹果为iOS平台定义触摸图标。iOS不支持非正方形图标。它只是重新缩放非正方形图片以使它们成为正方形（查看Kioskea示例）。

AndroidChrome依赖于Apple touch图标，还定义了192x192 PNG图标

微软定义瓷砖图片和#0文件。

结论

生成一个在任何地方都有效的图标是相当复杂的。我建议你使用这个Favicon生成器。完全披露：我是这个网站的作者。

小开

favicon.ico是16x16

<link rel="shortcut icon" href="favicon.ico"/>

我用这些在手机和平板电脑上很漂亮：

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png"><link rel="apple-touch-icon-precomposed" href="img/ico57.png">

在根中使用名称“favicon.ico”很重要，因为许多浏览器会首先尝试在那里找到。

小开

我没有看到这里列出的任何最新信息，所以这里是：

现在要回答这个问题，如果你想让你的图标在任何地方都看起来很棒，2个图标是不行的。请参阅下面的大小：

16 x 16-浏览器的标准尺寸
24 x 24-用户交互界面的IE9固定站点大小
32 x 32-IE新页面选项卡，Windows 7+任务栏按钮，Safari阅读列表侧边栏
48 x 48-Windows站点
57 x 57-iPod touch，iPhone高达3G
60 x 60-iPhone触摸到iOS7
64 x 64-Windows站点，HiDPI/Retina中的Safari阅读器列表边栏
70 x 70-Win 8.1 Metro瓷砖
72 x 72-iPad touch高达iOS6
76 x 76-iOS7
96 x 96-GoogleTV
114 x 114-iPhone视网膜触摸高达iOS6
120 x 120-iPhone视网膜触摸iOS7
128 x 128-ChromeWeb Store应用程序，Android
144 x 144-用于固定站点的IE10 Metro磁贴，iPad视网膜高达iOS6
150 x 150-Win 8.1 Metro瓷砖
152 x 152-iPad视网膜触摸iOS7
196 x 196-AndroidChrome
310 x 150-Win 8.1宽Metro瓷砖
310 x 310-Win 8.1 Metro瓷砖

小开

收藏夹图标不必是16x16或32x32。您可以创建一个80x80或100x100的收藏夹图标，只需确保两个值的大小相同，显然不要使其太大或太小，选择合理的大小。

小开

2021年标准感谢Faviconit

我使用faviconit.com来获得最好的浏览器和设备支持。您上传一张图片，本网站会为您提供代码、转换后的图片和一个浏览器配置文件。

我们可以简单地手动上传到16x16的网站，它可能会出现在几乎任何浏览器中。

但是，当您将其标记为智能手机或平板电脑上的最爱之一时，我们需要更大的图像（60x60到144x144）。

假设我们的一个用户在他们的桌面上创建了一个快捷方式。在这种情况下，196x196看起来更好！

在所有转换后的图像旁边，它会给你什么的示例代码：

<!-- place this in your <head></head> --><link rel="shortcut icon" href="/favicon.ico"><link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico"><link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png"><link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png"><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png"><link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"><link rel="apple-touch-icon" href="/favicon-57.png"><link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png"><link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png"><link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png"><link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png"><link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png"><link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png"><link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png"><link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

自Windows 8

但这还不是全部。自Windows 8以来，我们能够使用磁贴创建网站的快捷方式！

<!-- place this in your <head></head> --><meta name="msapplication-TileColor" content="#FFFFFF"><meta name="msapplication-TileImage" content="/favicon-144.png"><meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

上传名为browserconfig.xml的文件（在Windows>8中启用磁贴）

<browserconfig><msapplication><tile><square70x70logo src="/favicon-70.png"/><square150x150logo src="/favicon-150.png"/><square310x310logo src="/favicon-310.png"/><TileColor>#FFFFFF</TileColor></tile></msapplication></browserconfig>

小开

最简单的解决方案（2021）

使用一个（！）SVG图像

如果你不关心支持Safari，你可以使用一个SVG图标：

<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any">

使用一个（！）PNG图像

如果您想要完全支持*，您应该将其添加到文档的头部：

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png"><link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png"><link rel="apple-touch-icon" href="/img/icon-192x192.png">

最后一个链接是苹果（主屏幕），第二个是Android（主屏幕），第一个是其余的。

大小与Android主屏幕使用的大小完全相同。Apple主屏幕图标大小为60px（3x），因此为180px，将按比例缩小。其他平台使用默认的快捷方式图标，也会按比例缩小。

*请注意，此解决方案不支持Windows 8/10中的“磁贴”。但是，它支持快捷方式、书签和浏览器选项卡中的图像。

小开

据我所知，这几种解决方案中没有一种是完美的。使用Favicon生成器确实是一个很好的解决方案，但它们的数量太多了，很难选择。我想补充一点，如果你想让你的网站启用PWA，你还需要提供一个512x512的图标，如由google devs所述：

包括192px和512px版本的图标

我没有遇到很多强制执行该标准的图标生成器（Firebase确实，但有很多事情它没有做）。所以解决方案必须是许多其他解决方案的混合。

我不知道，在2020年初的今天，如果提供16x16、32x32仍然相关。我想在某些情况下它仍然很重要，例如，如果您的用户出于某种原因仍然使用IE（这仍然发生在一些私人公司中，这些公司由于某种原因没有迁移到较新的浏览器）

小开

请允许我提醒大家，问题是：

我想使用一个单一的图像作为一个普通的图标和iPhone /iPad友好的图标？这是可能的吗？将iPad友好的72x72 PNG比例，如果链接到一个普通的浏览器图标？还是我必须使用一个单独的16x16或32x32图像？

答案是：是的，这是可能的！是的，它将被缩放。不，你不需要常规浏览器图标。请看这个答案：https://stackoverflow.com/a/48646940/2397550

小开

现代浏览器的简单解决方案（2022）

使用SVG图标：

<link rel="icon" href="/icon.svg">

主要浏览器支持（2021年Safari除外）和生活水平
只有一小行代码并且易于记忆
type和sizes等其他属性不是必需的
与PNG相比，任何尺寸的缩放都要好得多
让我们用数以百计的不同尺寸来结束收藏夹的疯狂…

图标必须是32×32还是16×16？