在 Chrome 中查看源代码时如何设置网站图标？

Posted 2023-03-05

【中文标题】在 Chrome 中查看源代码时如何设置网站图标？

【英文标题】：How to set the favicon when viewing source in Chrome?

【发布时间】：2016-07-21 19:09:27

【问题描述】：

当我查看其源时，我有一个页面显示不正确的图标。

在下图中，您可以在第一个选项卡（正在查看页面）中看到使用正确的网站图标 - favicon-tenaya.ico。

但是，当你通过 Ctrl + U 查看页面的源代码时，它似乎显示了默认的 favicon - favico.ico，它位于网站的根文件夹中：

有没有办法解决这个问题？当他们查看源代码时，我们不希望网站图标发生变化。 Chrome 中的查看源页面如何决定使用哪个 favicon？

【问题讨论】：

浏览器在查看源代码时不会解析 html 页面，所以我认为您无能为力。

用你的图标覆盖根 ico 文件

【参考方案1】：

查看页面的源代码取决于浏览器。您无法强制它显示特定图标。例如，Firefox 根本不会为“查看源代码”选项卡显示任何图标。

但是，您可以影响浏览器来实现这一点。对于 Chrome 和您的特定网站，请将您网站根目录中的现有 favicon.ico 替换为您的网站图标。这是 Chrome 显示的内容，而您的则是您不想要的黑白图标。更好的是：将 favicon-tenaya.ico 重命名为 favicon.ico（从而替换现有的 favicon.ico）并相应地更改 HTML。

顺便说一句，您不需要两个声明。只需保留 shortcut icon 一个，尽管另一个应该也一样。

【参考方案2】：

由于 Chrome 不解析 html，它使用默认文件“/images/favicon.ico”在视图源中显示为 favicon。如果它没有找到它，它也会查看不同的其他位置。例如，如果您使用 wordpress，它会使用 http://[domain]/wp-content/themes/[theme]/images/favicon.ico

【参考方案3】：

在网站中，您可以像下面这样提及网站图标

<link rel="shortcut icon" href="/favicon-tenaya.ico"/>

它的工作正常。

在查看 chrome 的源代码时，它们会自动在下面的路径中找到 favicon https://www.tenayalodge.com/favicon.ico

在您的网站后添加的 favicon.ico 中提取的网站图标。

【参考方案4】：

一个很简单的方法：

将您的 favicon.ico 文件放在网站的根目录。

应该像这样访问：http://www.[domain].com/favicon.ico

【讨论】：

名称应该是 favicon.ico 因为这是默认名称