我有一些纯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是在所有浏览器类型上运行的最佳图片格式。
更新
我不能让这在本地工作，尽管代码检查出来，它将只有在服务器开始为网站服务时才能真正正常工作。只需尝试将其推到服务器并刷新您的缓存，它应该可以正常工作。
当前回答
用法语法:.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.
其他回答
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.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没有“类型”attr
<link href='favicon.png' rel='icon' />
您甚至可以省略引号，但不建议在生产中使用。
根据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?
注意，如果你的网站是作为子文件夹运行的，例如:
http://localhost/MySite/
你需要考虑到这一点。如果您从ASP中这样做。NETapp你所需要做的就是在URL前面加一个~:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
