我有一些纯HTML的静态页面,当服务器宕机时显示。我怎么能把我做的favicon(它是16x16px,它在同一个目录下的HTML文件;它被称为favicon.ico)作为“标签”图标,因为它是?我已经在维基百科上阅读了一些教程,并已经实现了以下内容:

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

但它还是不能工作。我正在使用Chrome浏览器测试网站。根据维基百科,.ico是在所有浏览器类型上运行的最佳图片格式。

更新

我不能让这在本地工作,尽管代码检查出来,它将只有在服务器开始为网站服务时才能真正正常工作。只需尝试将其推到服务器并刷新您的缓存,它应该可以正常工作。


当前回答

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

其他回答

正如W3.org所推荐的,您可以使用rel属性来实现这一点。

例子:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

我使用convert -resize 16x16 img.png favicon.ico(在linux konsole上)来转换我的图像 添加<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">到我的头部,一切都完美无缺。

实际上,要让你的favicon在所有浏览器中都能正常工作,你必须有10张以上大小和格式正确的图片。

我创建了一个App (faviconit.com),这样人们就不必手工创建所有这些图像和正确的标签。

希望你喜欢。

用这样的工具将你的图像文件转换为Base64字符串,然后用你的字符串替换下面代码片段中的YourBase64StringHere占位符,并把这行放在你的HTML头部部分:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

这将在浏览器中100%工作。

作为一个额外的提示,也许有一天会帮助到别人。

你不能将任何内容回显到之前的页面:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

不会加载ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

工作正常