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

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

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

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

不，你不能使用非标准的大小或尺寸，因为无论图标显示在哪里，它都会对人们的浏览器造成破坏。您可以将其设置为12x16（12像素侧有四个像素的白色/透明填充），以保持纵横比，但不能更大（当然可以，但浏览器会缩小它）。

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

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

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

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