如何在 chrome <HTML> 中显示网站图标
Posted
技术标签:
【中文标题】如何在 chrome <HTML> 中显示网站图标【英文标题】：How to display favicons in chrome <HTML> 【发布时间】：2013-05-14 07:42:57 【问题描述】：我在 Chrome 中显示我的网站图标时遇到问题。它在 FireFox 中运行良好，但我无法让它在 Chrome 中显示。另外，我想问的另一件事是，您是否必须在网络上真正拥有一个网站来显示网站图标，因为我从该网站获取了网站图标的链接，并在我的 html 代码上进行了尝试，它工作得很好。还有一点需要注意的是该文件是一个目录，所以我不希望人们在代码中出现的 ../ 上纠正我。就像我说的，它可以在 FireFox 中运行。提前致谢。
代码如下：
<!Doctype html>
<html>
<head>
<link rel="shortcut icon" href="../GRAFX/ICO/fav.ico">
</head>
<body>
</body>
</html>
【问题讨论】：
【参考方案1】：不，您不必将网站放在网络上即可在 Chrome 中查看网站图标。发生这种情况是因为 Chrome 旧版本不支持您计算机上托管的网站图标。网站图标必须托管在 Internet 服务器上。使用照片托管网站。我推荐 ImageShack。
之后，只需这样做：
<link rel="shortcut icon" href="http://www.urloftheimage.com/image.png" type="image/x-icon">
主要浏览器支持 PNG、JPG 和 GIF 作为 favicon 的扩展。它不一定是 .ico，但使用它很好。
【讨论】：
你应该有 type="image/png"【参考方案2】：只需将以下行添加到您的 head 标记中。这将支持主流浏览器。
<link rel="icon" type="image/png" href="http://www.example.com/image.png">
<link rel="icon" type="image/gif" href="http://www.example.com/image.gif">
<link rel="icon" type="image/jpeg" href="http://www.example.com/image.jpg">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.example.com/image.ico">
PS：在尝试代码之前不要忘记删除浏览器缓存！
【讨论】：
所以我猜你必须让网站在网络上才能在 Chrome 中查看网站图标？以上是关于如何在 chrome <HTML> 中显示网站图标的主要内容，如果未能解决你的问题，请参考以下文章
html/css - 使用带有 <img> 标签的精灵 - 如何在 Chrome 中删除轮廓？
在 Chrome 中禁用 HTML <audio> 播放器中的下载按钮 [重复]
如何让 Chrome 和/或 Firefox 在 Karma 测试中播放 <audio> 元素？