我在这里看了几篇帖子,并且在网上做了进一步的研究,但我找不到问题所在。
我将 favicon.ico 放在主目录中,但它没有显示在任何浏览器上。我亲自在 Firefox 和 Safari 上进行了尝试,并在 Browsershots 上尝试了其余部分。
我在 html 的头部也有这一行:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
我也尝试过没有类型...,因为我在同一服务器上的其他页面上有它。
我的两个网站位于同一服务器上,图标位于网站目录的同一位置。 ??
我唯一能想到的是,在将其上传到服务器之前,在线转换 ico 并将其保存在我的 MacBook Pro 上时出现问题?
非常感谢任何帮助、提示或想法。
有同样的问题。找到了这个很好的答案:https://stackoverflow.com/a/16375622/5359989
对我有用的是将“favicon.ico”更改为独特的内容,例如“myfavicon.ico”,并相应地在 html 中引用它。希望这也适合你。
更改此:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
对此:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
未显示您的网站图标的另一个原因可能是因为您正在查看网站的缓存版本。
清除缓存并再次打开网站,您将看到图标。
Chrome 不喜欢我的 favicon.ico 是 64x64 图像。我将其更改为 32x32 像素图像,它就显示出来了!
您在
href=""
属性中使用相对路径。将其更改为根相对路径 /favicon.ico
或绝对路径 http://yoursite.com/favicon.ico
。
并非所有图标都相同!我遇到这个问题有一段时间了,一直不明白为什么有些浏览器不显示图标。我绝对确定该文件存在于链接标记所示的位置。最终我发现,至少对于 Chrome 和 Opera,它们不会根据 .ico 文件中的格式显示一些图标。
例如将显示仅具有 64x64、32x32 和 16x16 格式的 .ico。
但是,除了上述格式之外,还具有 512x512 256x256、128x128 和 48x48 格式的 .ico 将不会显示。
这确实看起来像是一个浏览器问题,但奇怪的是它会影响多个浏览器。
无论如何,至少对我来说,解决方案是仅包含 64x64、32x32 和 16x16 格式。
我遇到了同样的问题,但通过以下方式解决了它。 在 w3schools 的“HTML favicon”部分,它说:
要将网站图标添加到您的网站,请保存您的网站图标图像到网络服务器的根目录,或者在根目录中创建一个名为 images 的文件夹,并将您的网站图标图像保存在此文件夹中。网站图标图像的通用名称是“favicon.ico”。
就我而言,我有一个express.js 项目。在express中,使用以下命令设置静态文件的根目录:
app.use(express.static('public'))
在我的项目中,“public”似乎是我所有静态文件的根目录。因此,我只需在“public”中添加一个名为“image”的文件夹,其中保存了“favicon.ico”。最后,我根据项目的目录树链接了主模板 html 文件中的图标:
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
请注意,我不必引用公共文件夹,因为它被我的框架设置为根目录。 总而言之,我认为如果使用带有 vanilla js 的简单 html 项目,w3schools 的指南很简单。但是,如果您使用的是express、Django等框架,您必须仔细考虑您的框架如何为您的静态文件提供服务。
我认为您正在正文中输入代码,并且网站图标应该在 HTML 的 head 部分中更新。