将网站图标进行base64编码的好处是什么？

Question

我有一个Web应用程序，其中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. 网站图标<link> 标签由react-helmet管理 3. 网站本身并不特别缓慢。 （Apdex得分始终良好）

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

很明显这并没有按照预期工作，但最让我感到困惑的是，实际的base64字符串比favicon.ico文件本身还要大（20k vs 15k）。所以我不确定其中的好处在哪里（如果有的话）。

- customcommander

---

如果是单页应用（SPA），那可能还好，我同意这是一种微优化（不过忽略了它在许多浏览器上无法正常工作，比如iOS Safari，因为它们有自己的图标元名称）。 - Dai

Answer 1

虽然我不比你更清楚原始开发人员为什么要这样设计，但对于一个简单的全包含HTML文件的离线文件呈现来说，这样做是有意义的。

事实上，我刚刚查了一下这个问题，因为我正在构建一个超小的全包含HTML文件。如果它被Base64编码到单个HTML文件中，我就不必再包含另一个文件了。

- Jay

Answer 2

这是我过去两天的阅读成果，用几分钟来概括。

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

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

.ICO 已经过时，它需要您创建多个小尺寸的图像来制作“网站收藏图标”，而 .PNG 可以从任何尺寸缩小。因此，它是快速制作图标的最佳懒人选择。由于图标的浏览尺寸非常小，因此任何复杂的图片都无法辨别。制作非常简单的设计最为理想。

这就是 .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。我们不仅可以获得更高的评分和减少加载时间，而且还可以为拥有最低互联网速度的用户提供更好的体验。

- dankswoops