2021 年如何设置 Favicon

我一直都很感激有人能够深入研究并重新评估某些东西的最佳实践，这些东西实际上每个网站都需要，并且有一套复杂的要求。Andrey Sitnik 已 在这里针对 favicon 做了这件事。

最终建议

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

在 CSS-Tricks 上这样做时机正好，所以我尝试严格按照建议去做，到目前为止效果很好。我想我曾经对它的复杂性感到厌烦，以至于我采用了极简主义的方法，并且仅使用了 favicon.ico 文件。现在我已经将上述所有内容都设置到位了。

我的不同之处…

• 我没有安装 GIMP 或 Inkscape，它们可以导出 .ico 格式，所以我使用了 这个 favicon 生成器（我将我的“主”SVG 导入其中），仅用于那个图标。
• 我发现 Figma 对调整框架大小和导出正确尺寸很有帮助。
• 我使用 ImageOptim 优化所有图像。
• 我担心添加“清单”，因为我没有其他类似 PWA 的步骤，并且感觉像是为了微不足道的价值而额外发出一个网络请求。但无论如何我还是做了。
• 我有一个主题颜色 (<meta name="theme-color" content="rgb(255, 122, 24)">)，因为 有人告诉我这是一个不错的点缀。感觉相关。

我喜欢暗模式 SVG 的概念

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      .a { fill: #f0f0f0 }
    }
  </style>
  <path class="a" fill="#0f0f0f" d="…" />
</svg>

但我在那里没有做任何花哨的事情，因为我认为我的图标无论如何看起来都很好，无需更改。

我还未来得及再次制作一个特殊的 仅限开发的 favicon，但我将会这样做，因为我发现它非常方便。

直接链接 →