base64编码favicon有什么好处？

编程问答 2022-06-09

问题描述

我有这个Web应用程序，其中在网站图标中插入了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>标签由管理
  3. 网站本身并不特别慢。 （始终具有良好的Apdex得分。）

我只能假定当时的开发人员（现在已经全部消失）想要内嵌图标，以避免发出HTTP请求，因此编写了一些“基础结构”来支持该操作：即使用Webpack插件自动对所有资产进行base64编码导入为JavaScript模块（例如import favicon from './assets/favicon.ico'）。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

faviconfaviconreact-helmetsingle-page-application