我有一些纯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是在所有浏览器类型上运行的最佳图片格式。
更新
我不能让这在本地工作，尽管代码检查出来，它将只有在服务器开始为网站服务时才能真正正常工作。只需尝试将其推到服务器并刷新您的缓存，它应该可以正常工作。
当前回答
大多数浏览器会从站点的根目录中获取favicon.ico，而不需要被告知;但他们并不总是立即更新一个新的。
然而，我通常会选择你的第二个例子:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
其他回答
注意，如果你的网站是作为子文件夹运行的，例如:
http://localhost/MySite/
你需要考虑到这一点。如果您从ASP中这样做。NETapp你所需要做的就是在URL前面加一个~:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
尝试使用<link rel="icon" type="image/ico" href="images/favi.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"/>
用法语法:.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.
作为一个额外的提示，也许有一天会帮助到别人。
你不能将任何内容回显到之前的页面:
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
工作正常
