向静态超文本标记语言页面添加图标

我有一些纯超文本标记语言的静态页面，当服务器出现故障时，我们会显示它们。我如何将我制作的图标（它是16x16px，它与超文本标记语言文件位于同一目录中；它被称为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是在所有浏览器类型上运行的最佳图片格式。

更新

我无法让它在本地工作，尽管代码检查它只有在服务器开始为站点提供服务时才会真正正常工作。只需尝试将其推送到服务器并刷新您的缓存，它应该可以正常工作。

1795757 次浏览
小开
最佳答案

您可以制作一个. png图像，然后在静态超文本标记语言文档的<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' />
小开

如果图标是png类型的图片，它在旧版本的Chrome中不起作用。但是在FireFox中它可以正常工作。另外，在处理这些事情时不要忘记清除浏览器缓存。很多时候，代码很好，但缓存才是真正的罪魁祸首。

小开

实际上，要使您的图标在所有浏览器中工作，您必须有10多个正确大小和格式的图像。

我创建了一个应用程序（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' />

把你的图标放在根目录…

小开

作为一个额外的说明，可能有一天会帮助某人。

您不能将任何内容回显到之前的页面：

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浏览器将自动理解，并得到它作为收藏夹。链接必须www.website.com/images/favicon.ico

更多信息看这个答案：

你必须包含吗？

小开

使用这个之类的工具将图像文件转换为Base64字符串，然后用字符串替换下面片段中的YourBase64StringHere占位符，并将该行放在超文本标记语言的头部部分：

<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">到我的标题，一切都很完美。

小开

尝试使用<link rel="icon" type="image/ico" href="images/favi.ico"/>

小开

请注意，FF无法加载URL中具有冗余//的图标，例如/img//favicon.png。在FF 53上测试。Chrome可以。

小开

用法语法：#0，#1，#2，#3

此表显示了如何在主要浏览器中使用favicon。标准实现使用文档<head>部分中带有rel属性的链接元素来指定文件格式和文件名/位置。

说明大多数浏览器将优先于#0文件位于网站的根目录（因此忽略任何图标链接标签）。

                                         Edge   Firefox   Chrome   I.E. Opera Safari-------------------------------------- ------ --------- -------- ----- ----- ------<link rel="shortcut icon"               Yes    Yes       Yes      Yes   Yes     Yeshref="http://example.com/myicon.ico"> 
<link rel="icon"                        Yes    Yes       Yes      9     Yes     Yestype="image/vnd.microsoft.icon"href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon"    Yes    Yes       Yes      9     Yes     Yeshref="http://example.com/image.ico">
<link rel="icon"                        Yes    Yes       Yes      11    Yes     Yeshref="http://example.com/image.ico">
<link rel="icon" type="image/gif"       Yes    Yes       Yes      11    Yes     Yeshref="http://example.com/image.gif">
<link rel="icon" type="image/png"       Yes    Yes       Yes      11    Yes     Yeshref="http://example.com/image.png">
<link rel="icon" type="image/svg+xml"   Yes    Yes       Yes      Yes   Yes     Nohref="http://example.com/image.svg">

文件格式支持

下表说明了对favicon的图像文件格式支持：

                                         AnimatedBrowser             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.0Google Chrome       Yes   Yes    4      No      4      No     NoInternet Explorer   5.0   11.0   11.0   No      No     No     NoSafari              Yes   4      4      No      4      No     NoOpera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

浏览器实现

下表说明了浏览器中显示收藏夹图标的不同区域：

                      Address     Address bar 'Links'                       Drag toBrowser             Bar         drop-down     bar       Bookmarks   Tabs   desktop------------------- ------------ ----------- --------- ----------- ------ ---------Edge                No            Yes         Yes       Yes         Yes    YesFirefox             until v12     Yes         Yes       Yes         Yes    YesGoogle Chrome       No            No          Yes       Yes         1.0    NoInternet Explorer   7.0           No          5.0       5.0         7.0    5.0Safari              Yes           Yes         No        Yes         12     NoOpera               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位像素。

虽然上述信息通常是正确的，但在某些情况下存在一些变化/例外。

img更多详细信息请参见维基百科

更新：（"more info"）

小开

请注意，如果您的网站作为subfolder运行，即：

http://localhost/MySite/

您需要考虑到这一点。如果您从ASP.NET应用程序执行此操作，您需要做的就是在URL的前面添加~：

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
小开

根据OP的更新，它没有在本地显示，但根据OP的更新，一旦我将其上传到服务器，就没问题了。

由于这是一个简单的静态html网站，我可以在不运行本地Web服务器的情况下处理它。
默认情况下，网络服务器通常会自动提供收藏夹图标（如果有）。

但是，当不运行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">

我没有还包含普通'olfavicon.ico的引用。
尽管如此，除了上面列出的图像之外，还包含了favicon.ico文件。

我添加了以下行： 

    <link rel="icon" type="image/x-icon" href="favicon.ico">

它也没有显示在我的浏览器中，当我查看当地文件时，即使没有通过本地服务器提供服务。

因此，图标在实时服务器上运行时显示良好，但不是本地。

我明确提到这一点，因为我使用的图标生成器亲切地提供了代码、图标、清单和说明。然而，虽然它包含favicon.ico图像，但它没有在要添加到html文档的代码中包含<link>到该文件。
我想服务假设favicon.ico将自动提供并由所有浏览器默认使用，因此只需要将“备用”版本显式添加到头标签中。显然，他们没有考虑到在本地查看文件时（也就是不在本地提供文件），我们对看到收藏夹不感兴趣？

小开

没有“type”attr的最小图标

<link href='favicon.png' rel='icon' />

您甚至可以省略引号，但不建议在生产中使用。


提交答案