最简单的解决方案（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主屏幕使用的大小完全相同。苹果主屏幕图标大小为60px（3x），因此为180px，并将缩小。其他平台使用默认快捷方式图标，该图标也会缩小。

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

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

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

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

维基百科有这样的说法：

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

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

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

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

现在来回答这个问题，如果你想让你的图标到处都好看，2个favicon就不会这么做了。请参见以下尺寸：

16 x 16–浏览器的标准尺寸24 x 24–用于用户界面的IE9固定站点大小32 x 32–IE新页面选项卡、Windows 7+任务栏按钮、Safari阅读列表侧边栏48 x 48–Windows站点57 x 57–iPod touch，iPhone最高支持3G60 x 60–iPhone触摸屏达到iOS764 x 64–Windows站点，HiDPI/Rina中的Safari Reader列表侧边栏70 x 70–Win 8.1 Metro瓷砖72 x 72–iPad触控至iOS676 x 76–iOS796 x 96–谷歌电视114 x 114–iPhone视网膜触摸达到iOS6120 x 120–iPhone视网膜触摸iOS7128 x 128–Chrome Web Store应用程序，Android144 x 144–用于固定站点的IE10 Metro瓷砖，iPad视网膜高达iOS6150 x 150–Win 8.1 Metro瓷砖152 x 152–iPad视网膜触摸iOS7196 x 196–Android Chrome310 x 150–Win 8.1宽Metro瓷砖310 x 310–Win 8.1 Metro瓷砖