html - 网站图标不工作

标签 html css 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>

最佳答案

Favicons 有超强缓存的倾向。

您的代码似乎没有关闭,但我建议执行以下故障排除步骤:

  • 尝试在不同的浏览器中访问同一页面。确保转到 /favicon.ico直接在浏览器中实际工作,并为您提供您期望的图标。

  • 在不同的浏览器(或不同的计算机)中加载页面 - 最好是以前从未见过此页面的浏览器。

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

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

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

关于html - 网站图标不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48333321/

相关文章:

html - 使用组件函数设置 HTML 对象的样式

javascript - JSON 数据解析不起作用

javascript - 加载 CSS 未 100% 工作

favicon - 是否从服务器获取了所有图标的大小?

html - 针对第一个不包含某些内容的 div

html - 在 Ionic Framework 中突出显示单击/点击的元素

svg - 如何将 SVG 元素设置为我的页面的收藏夹图标?

javascript - 将哈希值附加到 URL 末尾会导致网站图标无法在 FireFox 中显示

html - 即可滚动的绝对表格单元格

JQuery toggleClass 和 slideToggle - toggleClass 的行为不正确