Favicon 不会显示在视图源或图像中。 （本地主机铬）

Question

我目前正在创建一个网站，几乎完成了，但是有一个问题。 favicon 不会显示在视图源或图像上（在 localhost、chrome 中）。你看，我不确定我做错了什么，或者这只是一个错误。感谢您的帮助。

看，没有图标将显示在视图源中。这与图像相同。 但是如果我跳到谷歌，他们就没有这个问题。

是否因为我在本地主机上而发生此问题，并且当我发布我的网站时它会很好？

谢谢。

。 .

这也是我目前用于我的网站图标的代码：

<link rel="apple-touch-icon" sizes="180x180" href="./css/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./css/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./css/images/favicons/favicon-16x16.png">
<link rel="manifest" href="./css/images/favicons/site.webmanifest">
<link rel="mask-icon" href="./css/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./css/images/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="test">
<meta name="application-name" content="test">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./css/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Answer 1

请向我们展示您的head 标签中的link rel，看看您是否做错了什么。如果你编辑你的帖子，我可以稍后编辑我的答案。

关于你的问题没有太多细节，所以我只是试着告诉你如何为你的网站设置一个网站图标。

尝试删除您创建的那个。从您放置它的任何地方将其删除。确保您已将其命名为 favicon.ico 并将其放在您网站的根文件夹中，即 index.html 所在的位置。

然后在head部分添加以下代码：

<link rel='icon' href='favicon.ico'>

您也可以尝试使用私人导航访问您的本地主机页面。有时网站图标会与浏览器的缓存和历史记录混淆。

您还可以使用真实路径（完整 URL）localhost/mysite/css/favicons/favicon.ico 检查您的网站图标，以检查它是否确实存在。

在与 OP 讨论后，问题仅发生在 view-source: 命令中，否则图标会自行显示。所以这是一种正常的行为，你甚至可以在谷歌或任何网站上看到，使用view-source: 命令图标消失。