我有几个静态页面只是纯HTML，我们在服务器出现故障时显示。我如何将我制作的图标（它是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是所有浏览器类型上运行的最佳图片格式。
我无法让这个在本地工作，虽然代码检查它只会在服务器开始为网站提供服务后才能正常工作。只需尝试将其推送到服务器并刷新缓存，它应该可以正常工作。
答案 0 :(得分：785)
您可以制作16x16 .png，然后在静态HTML文档的<head>标记之间使用以下代码段之一：
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
答案 1 :(得分：194)
大多数浏览器都会从网站的根目录中获取favicon.ico而无需被告知;但他们并不总是立即用新的更新它。
但是，我通常会选择第二个例子：
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
答案 2 :(得分：110)
实际上，要使您的favicon在所有浏览器中都能正常工作，您必须拥有10个以上正确尺寸和格式的图像。
我创建了一个应用程序（faviconit.com），因此人们不必手动创建所有这些图像和正确的标记。
希望你喜欢它。
答案 3 :(得分：60)
以下为我工作......
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
答案 4 :(得分：33)
使用this之类的工具将图片文件转换为Base64字符串，然后将以下代码段中的YourBase64StringHere占位符替换为字符串，并将该行放在HTML头部分中：
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中100％运行。
答案 5 :(得分：14)
如果favicon是png类型的图片，则它在旧版本的Chrome中无效。但是它在FireFox中运行得很好。此外，在处理此类操作时，请不要忘记清除浏览器缓存。很多时候，代码很好，但缓存是真正的罪魁祸首。
答案 6 :(得分：14)
As recommended by W3.org，您可以使用rel属性来实现此目标。
示例：
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
答案 7 :(得分：13)
.ico，.gif，.png，.svg 此表显示了如何在主要浏览器中使用favicon。标准实现在文档部分使用带有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 Yes
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
下表说明了浏览器中显示收藏夹图标的不同区域：
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位。
虽然上面的信息通常是正确的，但在某些情况下会有一些变化/例外。
请参阅维基百科the source上的全文。
答案 8 :(得分：7)
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
这对我有用
答案 9 :(得分：7)
<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"/>
答案 10 :(得分：5)
我知道它的老帖子，但仍然发布给像我这样的人。 这对我有用
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
将您的favicon图标放在根目录中..
答案 11 :(得分：4)
作为附加说明，可能有一天可以帮助某人。
您之前无法回复任何内容：
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
工作正常
答案 12 :(得分：3)
我使用convert -resize 16x16 img.png favicon.ico（在linux konsole上）转换我的图像，和
将<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">添加到我的标题中，一切正常。
答案 13 :(得分：2)
根据OP的更新，它不在本地显示，但是根据OP的更新，将其上传到服务器后就可以了。
由于这是一个简单的静态html网站，因此无需运行本地Web服务器就可以处理它。
默认情况下，网络服务器通常会自动提供图标，如果有的话。
但是，当不运行网络服务器时，浏览器本身将不会仅仅读取目录以查找其他文件，例如favicon.ico，除非它在html文档中列出。
因此，尽管我在head标记中包含以下项目：
<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">
当我查看 local 文件时，即使 not 通过本地服务器提供服务，它也也会显示在我的浏览器中。
因此，当图标在实时服务器上运行时，它显示得很好，但在本地服务器上却没有。
我之所以明确提到这一点，是因为我使用的Favicon生成器友好地提供了代码，图标，清单和说明。但是，尽管它包含favicon.ico图像，但在代码中并未包含要添加到<link>文档中的文件的html。
我猜想默认情况下，所有浏览器都会自动提供服务假定favicon.ico并使用它，因此只需要将“备用”版本显式添加到head标签。
显然，他们不认为在本地查看文件（也就是不在本地提供文件）时，我们对看到favicon感兴趣吗？
答案 14 :(得分：2)
<link href='favicon.png' rel='icon' />
您甚至可以省略引号，但不建议在生产中使用。
答案 15 :(得分：1)
如果您将favicon添加到名称为favicon.ico的root / images文件夹中，浏览器将自动理解并将其作为favicon.I进行测试和工作。 您的链接必须是www.website.com/images/favicon.ico
有关详细信息，请查看以下答案：
Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?
答案 16 :(得分：1)
请注意，如果您的网站以subfolder的身份运行，即：
http://localhost/MySite/
您需要考虑到这一点。如果您是通过ASP.NET应用执行此操作，则只需在URL的前面添加一个~：
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
答案 17 :(得分：0)
尝试使用<link rel="icon" type="image/ico" href="images/favi.ico"/>
答案 18 :(得分：0)
请注意，FF无法在//这样的网址中加载带有冗余/img//favicon.png的图标。在FF 53上测试过.Chrome没问题。