网站图标不工作

Question

我正在尝试将网站图标添加到我的网站中。我在 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 部分中。

我还建议运行你的 html 通过 linter，因为格式不正确的 html 有时会产生非常奇怪的副作用。

Answer 2

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

如果是这样，则存在缓存问题：

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

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

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

您的标记也无效，这可能是导致您出现问题的原因：

您的 <DOCTYPE> 标签在 html 之前需要一个感叹号。
您的 <title> 标签应该在 <head>.

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

确认所有这些并修复这两个错误几乎可以肯定地修复您的网站图标未通过。

希望对您有所帮助！

网站图标不工作

Favicon Icon Not Working

html

css

favicon