最简单的解决方案（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中的“平铺”。不过，它确实支持快捷方式、书签和浏览器选项卡中的图像。

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

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

我们做到了这一点，所以人们不必手动创建所有这些图像和正确的标签，创建所有这些曾经让我非常恼火的图像！

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

查看此关于收藏夹的帖子：

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

16x16像素，*.ico格式。

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”这个名字很重要，因为许多浏览器都会先找到它。

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

使用SVG收藏夹：

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

主要浏览器支持（2021 Safari除外）和Living Standard只有一行简短的代码，易于记忆其他属性（如类型和大小）不是必需的与PNG相比，任何大小的缩放效果都更好让我们用数百种不同的尺寸来结束最爱的疯狂。。。