我有一些纯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是在所有浏览器类型上运行的最佳图片格式。
更新
我不能让这在本地工作，尽管代码检查出来，它将只有在服务器开始为网站服务时才能真正正常工作。只需尝试将其推到服务器并刷新您的缓存，它应该可以正常工作。
当前回答
请注意，FF无法在URL中加载冗余的//图标，如/img//favicon.png。在FF 53上测试。Chrome浏览器没问题。
其他回答
用这样的工具将你的图像文件转换为Base64字符串，然后用你的字符串替换下面代码片段中的YourBase64StringHere占位符，并把这行放在你的HTML头部部分:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100%工作。
您可以制作一个.png图像，然后在静态HTML文档的<head>标记之间使用以下片段之一:
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
根据OP的更新，它在本地没有显示，但根据OP的更新，一旦我上传到服务器，它就没事了。
由于这是一个简单的静态html网站，我可以在不运行本地web服务器的情况下使用它。 web服务器通常会自动提供图标，如果有一个，默认情况下。
但是当不运行web服务器时，浏览器本身不会读取目录寻找其他文件，比如favicon.ico，除非它列在html文档中。
所以，当我有以下项目在头部标签:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
我也没有包括一个参考平原'ol favicon.ico。 尽管如此，除了上面列出的图像之外，还包括favicon.ico文件。
一旦我添加了以下一行:
<link rel="icon" type="image/x-icon" href="favicon.ico">
它也显示在我的浏览器，当我查看本地文件时，即使不是通过本地服务器提供它。
因此，当图标在活动服务器上运行时显示良好，但在本地不显示。
I mention this explicitly because the favicon generator I used, kindly supplied the code, icons, manifest, and instructions. However, while it included the favicon.ico image, it did not include a <link> to that file in the code to add to the html document. I guess that service presumes favicon.ico will automatically be served up and used by all browsers by default, so only the "alternate" versions needed to be explicitly added to the head tag. Evidently, they don't consider that when viewing files locally (aka not serving them up locally), we aren't interested in seeing the favicon?
我知道这是一个老帖子，但仍然为像我这样的人发帖。 这对我很有效
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
把你的favicon图标放在根目录..
大多数浏览器会从站点的根目录中获取favicon.ico，而不需要被告知;但他们并不总是立即更新一个新的。
然而，我通常会选择你的第二个例子:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
