时间戳

首页 > 解决方案 > base64 编码网站图标有什么好处？

single-page-application - base64 编码网站图标有什么好处？

问题描述

我有这个网络应用程序，其中 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>标签由
  3. 该网站本身并不是特别慢。（始终保持良好的 Apdex 分数。）

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

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

标签： single-page-applicationfaviconreact-helmet

解决方案

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

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

推荐阅读