我有一个高度为26px /宽度为20px的收藏夹图标，名为favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
但是，在我的浏览器中，我的favicon.png全部失真。
问题：我的favicon.png应该是特定大小吗？另外，我可以使用非标准尺寸/尺寸吗？如果可以，如何使用？
网站图示尺寸？\[重复\]
第3245篇《网站图示尺寸？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
网站图标的格式必须为正方形，否则浏览器会对其进行拉伸。不幸的是，Internet Explorer <11不支持.gif或.png文件类型，仅支持Microsoft的.ico格式。您可以使用一些“网站图标生成器”应用程序，例如：http : //favicon-generator.org/
您选择的图像格式必须为16x16像素或32x32像素，并使用8位或24位颜色。图像格式必须为PNG（W3C标准），GIF或ICO之一。- 如何在网站上添加Favicon-W3C的质量检查
网站的网站图标通常必须是* .ico文件，并且可以是32x32或16x16。使用非标准尺寸将无法在所有浏览器中使用，并且看起来会像您自己看到的那样失真。尝试使用以下站点转换该图像：http : //www.favicon.cc/，然后尝试使用它？
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”很重要，因为许多浏览器会首先尝试在该目录中查找。
faviconit成为 2020年标准
我使用faviconit.com来获得最佳的浏览器和设备支持。您上传图像，此站点为您提供代码，转换后的图像和browserconfig文件。
我们可以简单地将favicon手动上传到我们的16x16网站，并且该图标可能会显示在几乎所有浏览器中。
但是，当您将其标记为智能手机或平板电脑上的收藏夹之一时，我们将需要更大的图像（60x60至144x144）。
假设我们的一位用户在其桌面上创建了快捷方式。在这种情况下，196x196看起来更好！
在所有转换的图像旁边，faviconit会为您提供什么的示例代码：
<!-- 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>
不，您不能使用非标准的尺寸或尺寸，因为无论显示图标的位置在人们的浏览器中都会造成严重破坏。您可以将其设置为12x16（在12像素的一面具有四个像素的白色/透明填充），以保持长宽比，但不能做得更大（可以，但是浏览器会缩小它）。
最简单的解决方案是使用一个（！）PNG图像（在2020年）。
只需将其添加到文档的开头即可：
<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">
最后一个链接用于Apple（主屏幕），第二个链接用于Android（主屏幕），第一个链接用于其余部分。
请注意，此解决方案在Windows 8/10中不支持“平铺”。但是，它确实支持快捷方式，书签和浏览器选项卡中的图像。
大小恰好是Android主屏幕使用的大小。Apple主屏幕图标大小为60像素（3倍），因此为180像素，并将按比例缩小。其他平台使用默认的快捷方式图标，该图标也会缩小。
维基百科说：
此外，此类图标文件的大小可以为16×16或32×32像素，色深可以为8位或24位（请注意，GIF文件具有有限的256个调色板条目）。
我认为最好的方法是使用32x32 gif，并在不同的浏览器上对其进行测试。
16x16像素，*。ico格式。
相似问题
问题类别
如果您有权使用Photoshop，请检查以下内容：
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
本教程链接到一个插件，该插件允许Photoshop本地保存ico文件，然后提供有关favicon标准的信息。
当我第一次开始创建网站图标时，规则是16x16 8位ico文件。如果您想确保该图标在大多数浏览器中都能正常运行，我会坚持使用。