Question

我正在尝试将favicon添加到我的网站中。我在https://www.favicon-generator.org/上创建了图标并粘贴在给定的代码中。我确定文件目录是正确的，因为我已多次检查过。有人可以帮助我，我需要添加或删除哪些样式，或者我错过了什么？

  <DOCTYPE html>
<html lang="en">
<title>Drafted</title>
<head>

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

</head>
<body>

<div class="bg">

<video id="video-bg" preload="auto" autoplay="true" loop="loop">
    <source src="video.mp4" type="video/mp4">
        Video Not Supported :(
    </video>

</div>

<div class="form">
<a href="#" target="_blank">
SUBMIT A BACKGROUND VIDEO!
</a>
</div>


<div class="text">
<a href="#" target="_blank">
drafted
</a>
</div>

<div class="steam">
<a href="#" target="_blank">
STEAM
</a>
</div>

<div class="esea">
<a href="#" target="_blank">
ESEA
</a>
</div>

<div class="twitter">
<a href="#" target="_blank">
TWITTER
</a>
</div>

</body>
</html>

Answer 1

Favicons倾向于超级积极地缓存。

您的代码似乎没有关闭，但我建议您执行以下问题排查步骤：

尝试在其他浏览器中访问同一页面。确保直接在浏览器中转到/favicon.ico确实有效，并为您提供所需的图标。
将页面加载到其他浏览器（或其他计算机）中 - 最好之前从未见过此页面。

我不确定它与此有关，但是代码的其他部分存在一些问题，可能会导致这种副作用;

您的文档类型错过了! - 它应该是<!DOCTYPE html>
您的title应该在head部分。

我建议您通过linter运行html，因为格式错误的html有时会产生非常奇怪的副作用。

Answer 2

您的favicon在HTML中被正确引用，应该显示。因此，您的问题只有几个可能的原因。检查您是否可以手动导航到www.yourwebsite.com/favicon.ico。

如果有，那就是缓存问题：

尝试清除HTML缓存。这可以通过按 CTRL + F5 来完成。
尝试清除CSS缓存。这可以通过在点击浏览器的刷新图标时按住 SHIFT 来完成。
尝试一下硬刷新。这是通过按住 CTRL 和 SHIFT 然后按 R 来完成的。

如果没有，问题是找不到该文件：

您可能没有将您的favicon存储在项目的根目录中。确保该文件实际上位于根级别。
您可能没有将您的favicon上传到服务器。检查服务器本身是否存在该文件。
如果服务器上存在该文件，请确保它是有效的.ico图像。

您还有无效的标记，这可能是您的问题的原因：

您的<DOCTYPE>代码需要html之前的感叹号。
您的<title>代码应位于<head>。

我建议您通过标记验证服务（例如The W3C Markup Validation Service）运行HTML，以确保您拥有有效的HTML。

确认所有这些并修复这两个错误几乎肯定会修复您的图标不会通过。

希望这有帮助！

Favicon图标不起作用

2 个答案: