时间戳

首页 > 解决方案 > 如何强制 chrome 在选项卡上显示精确大小的图标 (16x16)？

google-chrome - 如何强制 chrome 在选项卡上显示精确大小的图标 (16x16)？

问题描述

我在我的网页上设置了多图标配置，但 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">

标签： google-chromefaviconautoresize

解决方案

TL; DR

Invert your 16x16 and 32x32 PNG icons declarations (so the 32x32 becomes the first one)

The Long Answer

Unfortunately, Chrome has two issues (324820 and 112941) related to the sizes attribute. In short: it does not support sizes and loads all icons.

Years ago, I played with favicon declarations order while implementing RealFaviconGenerator. I put the smallest PNG icon last and second smallest first, in order to prevent the non-supporting browsers from using a high definition icon (at that time there was a 192x192 PNG icon for Android Chrome). As of today, when using RealFaviconGenerator, Chrome picks the 32x32 PNG icon.

If you are going to test a lot of configurations, I suggest you to:

  • Use a different (sub)domain name for each test. Favicon caching is just too much pain. Using a tool such as ngrok can do this as a side effect: simply restart it before each new experiment. Or you can configure a wildcard on an existing domain.
  • Instead of having the same image in various sizes, use different icons, as done in the favicon compatibility test. For example, make the 16x16 icon a yellow square, while the 32x32 icon will be green. That way, you can instantly see what is used.

推荐阅读