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

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

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

简短的回答

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

为了生成favicon，出于下面解释的许多原因，我建议您使用这个favicon生成器。完全披露：我是这个网站的作者。

长而全面的答案

Favicon必须是方形的。桌面浏览器和Apple iOS不支持非方形图标。

favicon由多个文件支持：

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

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

图标文件

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

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

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

使用以下内容声明收藏夹图标：

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

但是，建议将favicon.ico放在网站的根目录中，而不要声明它，让现代浏览器选择PNG图标。

PNG图标

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

建议的尺寸是多少？选择您喜爱的平台：

大多数桌面浏览器：16x16、32x32，“尽可能大”Android Chrome：192x192谷歌电视：96x96…和其他或多或少有记录的。

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">
...

注意：Firefox不支持大小属性，而是使用它找到的最后一个PNG图标。确保最后声明32x32图片：这对于Firefox来说已经足够好了，这将阻止它下载不需要的大图片。编辑：2016年修复。

还要注意，Chrome不支持大小属性，并且倾向于加载所有声明的图标。最好不要声明太多图标。编辑：2018年修复。

移动平台

这个问题是关于桌面收藏夹的，所以没有必要在这个主题上做过多的研究。

苹果为iOS平台定义了触摸图标。iOS不支持非方形图标。它只需重新缩放非方形图片，使其成为方形（请查看Kioskea示例）。

Android Chrome依赖于Apple触摸图标，并定义了192x192 PNG图标。

Microsoft定义了平铺图片和browserconfig.xml文件。

结论

生成一个适用于所有地方的收藏夹图标非常复杂。我建议你使用这个收藏夹生成器。完全披露：我是这个网站的作者。

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

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

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

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

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

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