Chrome 开发者工具在 Brackets LivePreview 中显示 favicon 404 错误答案

【问题标题】：Chrome Developer Tools shows favicon 404 error in Brackets LivePreviewChrome 开发者工具在 Brackets LivePreview 中显示 favicon 404 错误
【发布时间】：2015-08-21 23:13:35
【问题描述】：

我刚刚开始学习 Anthony Alicea 的“Javascript: Understanding the Weird Parts”课程，他正在使用 Brackets 的实时预览功能来演示他的代码。第一个模块是一个准系统 HTML 页面，带有一个链接到空 JS 文件的脚本标记。当我在 Brackets 中打开此页面并运行实时预览时，开发工具会抱怨图标文件丢失。

我知道这是一个小错误，但很烦人：当我处理课程的代码示例时，我想要一个干净的控制台。我不确定是括号还是开发工具在这样做。有什么方法可以消除不涉及向每个部分的代码文件夹添加虚拟图标的错误？

【问题讨论】：

标签： google-chrome debugging google-chrome-devtools developer-tools adobe-brackets

【解决方案1】：

这基本上是浏览器的工作方式，如果元标记中没有指定，它们会尝试在根文件夹中查找 favicon.ico。

虽然有一个简单的解决方案可以将其过滤掉，但它会从控制台中删除任何与网络相关的错误（但您当然仍然可以在“网络”选项卡中看到它）。单击过滤器图标（在控制台窗口中<top frame> 旁边看起来像漏斗的图标，然后选中“隐藏网络消息”，就可以了。

【讨论】：

好的，谢谢 - 这是一个非常烦人的行为 - 如果浏览器没有找到它，我希望浏览器只会显示其默认的 favicon。如果对任何人有用，StackExchange 上其他地方的这个答案建议添加一个 base64 编码的空白图标：webmasters.stackexchange.com/questions/34544/…。
这主要是遗留问题。在互联网的黑暗时代（Internet Explorer 5），有人认为将网站图标放在/favicon.ico 是个好主意，然后它就卡住了。它在今天被广泛使用（因为它很简单，初学者喜欢简单的东西），如果浏览器删除它会“破坏”很多网站，因此它可能会永远存在。
感谢背景！

【解决方案2】：

要解决此错误，只需在以下位置添加此引用：

<link rel="icon" href="data:;base64,iVBORwOKGO=" />

【讨论】：

很好的解决方法。对于那些想知道的人，这是一个 base64 编码的图像。阅读更多stackoverflow.com/questions/1207190/embedding-base64-images
呃...抱歉，但是“添加此引用”在哪里？

【解决方案3】：

只需在根文件夹中添加任何favicon.ico 文件即可。如图所示：

【讨论】：

【解决方案4】：

您可以保存 favicon.ico 文件并指定其位置：

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

或者您可以添加文本格式的图片（例如Base64）：

<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVR4AY3BsQmFQBBAwbeLiaFNmIt2cj3YhYVYhK2IuT2YGsn6WWS5Cw7+jNgPf1AqpolCw0eEkBIcB4jAusI8g5IRwW0bPA9cF0HJmFHoOoJS0bYUlIr7pqBkhgE3jrjzJCiZfcctC67vCQ0fM0JKYEbhBV2WHBhF7w0KAAAAAElFTkSuQmCC" />

或来自某些外部服务：

<link rel="shortcut icon"  type="image/x-icon" href="https:example.com/favicon.ico />

【讨论】：