base64 编码网站图标有什么好处？

Question

我有这个网络应用程序，其中 favicon 在 HTML 中内联，例如，

<link rel="icon" href="data:image/x-icon;base64,A VERY VERY LONG STRING...">

但是我可以肯定地看到 Chrome 和 Firefox（截至此日期的最新版本）无论如何都会在我的网站根目录处向 favicon.ico 发出请求，例如http://example.com/favicon.ico

如果重要的话：

1. href 属性中嵌入的 base64 编码字符串相当大。
2. favicon <link> 标签由 react-helmet 管理
3. 网站本身并不是特别慢。 （始终保持良好的 Apdex 分数。）

我只能假设当时的开发人员（现在都走了）想要内联网站图标以避免 HTTP 请求，因此编写了一些“基础设施”来支持这一点：即使用 Webpack 插件自动对所有资产进行 base64 编码作为 JavaScript 模块导入（例如 import favicon from './assets/favicon.ico'）。

显然，这并没有按预期工作，但最让我印象深刻的是实际的 base64 字符串比 favicon.ico 文件本身更重（20k 对 15k）。所以我不确定好处在哪里（如果有的话）。

Answer 1

虽然我不知道为什么最初的开发人员会这样设计它，但它对于简单的一体式 html 文件的离线文件呈现是有意义的。

我实际上只是查了一下，因为我正在构建一个超级小的多合一 html 文件。如果它是 base 64 编码到单个 html 文件中，我不必包含额外的文件。

Answer 2

这是我最后两天的几分钟阅读。

截至 2021 年，93% 的在线浏览器可以将 SVG 视为 Favicon https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

https://caniuse.com/link-icon-svg

.ICO 是创建“网站图标”的过时方式，需要您制作多个小尺寸的图像，而 .PNG 可以从任何尺寸缩小。它很容易成为快速图标的最佳懒人选项。由于 Icons 的查看尺寸非常小，任何复杂的图片都无法区分。优化非常简单的设计。

这就是 .SVG 的亮点。

https://www.iconfinder.com/

查找图片 > 检查 > 在新页面中打开 > 将图片另存为

Paint 3D 的 Magic Select 是值得一提的免费工具

这是迄今为止关于自动 SVG 的信息最丰富、最直接的视频

https://www.youtube.com/watch?v=10m_2bPXa1s

现在，我们剩下 4-8KB 的数据。这可能是 .PNG 大小的五分之一。 接下来我们要优化它

https://www.youtube.com/watch?v=iVzW3XuOm7E

所以我们可以通过将所有数据放在头部来跳过 DOM 请求，但这会将我们引向这里。

https://css-tricks.com/probably-dont-base64-svg/

现在说我们正在创建一个单页应用程序并关心 SEO。我们不仅得分更高并减少了加载时间，而且我们为网速最低的用户提供了更好的体验。