我有一些纯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是在所有浏览器类型上运行的最佳图片格式。
更新
我不能让这在本地工作，尽管代码检查出来，它将只有在服务器开始为网站服务时才能真正正常工作。只需尝试将其推到服务器并刷新您的缓存，它应该可以正常工作。
您可以制作一个.png图像，然后在静态HTML文档的<head>标记之间使用以下片段之一:
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
大多数浏览器会从站点的根目录中获取favicon.ico，而不需要被告知;但他们并不总是立即更新一个新的。
然而，我通常会选择你的第二个例子:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
如果favicon是png类型的图片，在旧版本的Chrome中行不通。然而，它在FireFox中工作得很好。此外，在处理这些事情时，不要忘记清除浏览器缓存。很多时候，代码很好，但缓存才是真正的罪魁祸首。
实际上，要让你的favicon在所有浏览器中都能正常工作，你必须有10张以上大小和格式正确的图片。
我创建了一个App (faviconit.com)，这样人们就不必手工创建所有这些图像和正确的标签。
希望你喜欢。
正如W3.org所推荐的，您可以使用rel属性来实现这一点。
例子:
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
我知道这是一个老帖子，但仍然为像我这样的人发帖。 这对我很有效
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
把你的favicon图标放在根目录..
作为一个额外的提示，也许有一天会帮助到别人。
你不能将任何内容回显到之前的页面:
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
工作正常
<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"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
这对我很有效
如果您将favicon.ico添加到根/images文件夹中，浏览器将自动理解并将其作为favicon。我测试和工作。 你的链接必须是www.website.com/images/favicon.ico
更多信息请看这个答案:
你必须包括<链接rel="icon" href="favicon.ico" type="image/x-icon" />吗?
用这样的工具将你的图像文件转换为Base64字符串，然后用你的字符串替换下面代码片段中的YourBase64StringHere占位符，并把这行放在你的HTML头部部分:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100%工作。
我使用convert -resize 16x16 img.png favicon.ico(在linux konsole上)来转换我的图像 添加<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">到我的头部，一切都完美无缺。
用法语法:.ico， .gif， .png， .svg
下表展示了常用浏览器中favicon的使用方法。标准实现在文档的<head>部分中使用带有rel属性的link元素来指定文件格式和文件名/位置。
注意，大多数浏览器会优先考虑网站根目录下的favicon.ico文件(因此忽略任何图标链接标签)。
Edge Firefox Chrome I.E. Opera Safari
-------------------------------------- ------ --------- -------- ----- ----- ------
<link rel="shortcut icon" Yes Yes Yes Yes Yes Yes
href="http://example.com/myicon.ico">
<link rel="icon" Yes Yes Yes 9 Yes Yes
type="image/vnd.microsoft.icon"
href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon" Yes Yes Yes 9 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" type="image/gif" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.gif">
<link rel="icon" type="image/png" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.png">
<link rel="icon" type="image/svg+xml" Yes Yes Yes Yes Yes No
href="http://example.com/image.svg">
文件格式支持
下表说明了favicon的图像文件格式支持:
Animated
Browser ICO PNG GIF GIF's JPEG APNG SVG
------------------- ----- ------ ------ ------- ------ ------ ------
Edge Yes Yes Yes No ? ? ?
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4 No 4 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Safari Yes 4 4 No 4 No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
浏览器的实现
下表说明了浏览器中favicon显示的不同区域:
Address Address bar 'Links' Drag to
Browser Bar drop-down bar Bookmarks Tabs desktop
------------------- ------------ ----------- --------- ----------- ------ ---------
Edge No Yes Yes Yes Yes Yes
Firefox until v12 Yes Yes Yes Yes Yes
Google Chrome No No Yes Yes 1.0 No
Internet Explorer 7.0 No 5.0 5.0 7.0 5.0
Safari Yes Yes No Yes 12 No
Opera v7–12: Yes No 7.0 7.0 7.0 7.0
> v14: No
图标文件的像素大小为16×16、32×32、48×48或64×64，颜色深度为8位、24位或32位。
虽然上面的信息通常是正确的，但在某些情况下有一些变化/例外。
在维基百科上查看更多详细信息。
更新:(“更多信息”)
See Google's "new" (2019) criteria to Define a favicon to show in search results. You can retrieve (programmatically or manually) Google's cached favicon for any domain with a URL such as: https://www.google.com/s2/favicons?domain=stackoverflow.com Using the above URL directly in an <img> tag returns: " ". I've used realfavicongenerator.net a couple times; it's very thorough, generating/customizing every possible favicon variation you might need for maximum compatibility. (However, if you're seeking a single favicon image, this is might not be the tool for you!) For simple file conversion (eg., PNG to ICO, etc) I like onlineconvertfree.com.
注意，如果你的网站是作为子文件夹运行的，例如:
http://localhost/MySite/
你需要考虑到这一点。如果您从ASP中这样做。NETapp你所需要做的就是在URL前面加一个~:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
根据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?
最小favicon没有“类型”attr
<link href='favicon.png' rel='icon' />
您甚至可以省略引号，但不建议在生产中使用。
