如何避免Safari加载本地HTML文件时出现favicon.ico错误

在Safari中加载本地HTML文件时，控制台总会抛出以下错误：

Failed to load resource: The requested URL was not found on this server. file:///favicon.ico

将有效favicon.ico放在HTML同目录，或在页面头部配置各种路径（相对、绝对等所有组合）的图标链接，都无法解决问题——错误始终存在，仿佛路径配置完全未生效：

<link rel="icon" href="/path/to/favicon/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="/path/to/favicon/favicon.ico" type="image/x-icon">

有效解决方法 #

方案1：使用最小化的Base64图标资源

Safari在file://协议下对空data URI的处理存在兼容性问题，改用一个1x1的透明图标Base64内容，能让浏览器识别到有效资源，从而消除错误：

<!-- 透明1x1 PNG图标 -->
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" type="image/png">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" type="image/png">

或者使用SVG格式的空图标：

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/>" type="image/svg+xml">
<link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/>" type="image/svg+xml">

方案2：通过本地HTTP服务器加载文件

Safari对file://协议的资源加载存在特殊限制，改用HTTP协议加载本地文件即可正常识别相对路径的favicon，不会再去根目录查找。可以用以下快速启动本地服务器的命令：

• Python 3：python -m http.server
• Node.js（需安装http-server包）：npx http-server

启动后，通过http://localhost:端口号/你的文件.html访问，即可消除错误。

说明 #

上述方案已在Safari 16.5.1版本验证有效，无需在意图标是否可见，仅需确保浏览器能识别到有效的资源路径即可消除控制台错误。

内容的提问来源于stack exchange，提问作者Paul Slocum