Question

我在网页上设置了多个图标配置，但是chrome不在选项卡上显示16x16文件，而是以16x16显示32x32。为什么呢这是强迫它显示16x16像素的一种方法吗？以16x16显示的32x32模糊...

这是我的代码：

           <link rel="shortcut icon" href="/relativepath/favicon.ico" type="image/x-icon">
            <link rel="icon" sizes="16x16" href="/relativepath/favicon.png" type="image/png">
            <link rel="icon" sizes="32x32" href="/relativepath/favicon-32.png" type="image/png">
            <link rel="icon" sizes="64x64" href="/relativepath/favicon-64.png" type="image/png">
            <link rel="icon" sizes="96x96" href="/relativepath/favicon-96.png" type="image/png">
            <link rel="icon" sizes="196x196" href="/relativepath/favicon-196.png" type="image/png">
            <link rel="apple-touch-icon" sizes="152x152" href="/relativepath/apple-touch-icon.png">
            <link rel="apple-touch-icon" sizes="60x60" href="relativepath/apple-touch-icon-60x60.png">
            <link rel="apple-touch-icon" sizes="76x76" href="/relativepath/apple-touch-icon-76x76.png">
            <link rel="apple-touch-icon" sizes="114x114" href="/relativepath/apple-touch-icon-114x114.png">
            <link rel="apple-touch-icon" sizes="120x120" href="/relativepath/apple-touch-icon-120x120.png">
            <link rel="apple-touch-icon" sizes="144x144" href="/relativepath/apple-touch-icon-144x144.png">

Answer 1

TL; DR

反转您的16x16和32x32 PNG图标声明（因此32x32成为第一个）

长答案

不幸的是，Chrome有两个与sizes属性有关的问题（324820和112941）。简而言之：它不支持sizes并加载所有图标。

几年前，我在实现RealFaviconGenerator时使用了图标图标声明顺序。我将最小的PNG图标放在最后，第二个最小的图标放在第一位，以防止不支持的浏览器使用高清图标（当时Android Chrome浏览器使用192x192的PNG图标）。从今天开始，使用RealFaviconGenerator时，Chrome picks the 32x32 PNG icon。

如果您要测试很多配置，建议您：

为每个测试使用不同的（子）域名。 Favicon缓存太痛苦了。使用ngrok之类的工具可能会产生副作用：只需在每次新实验之前重新启动它即可。或者，您可以在现有域上配置通配符。
请像favicon compatibility test那样使用不同的图标，而不要使用各种尺寸的相同图像。例如，将16x16图标设置为黄色正方形，而将32x32图标设置为绿色。这样，您可以立即查看使用的内容。

如何强制Chrome在标签上显示确切大小的图标（16x16）？

1 个答案:

TL; DR

长答案