将网站图标添加到静态 HTML 页面
Posted
技术标签:
【中文标题】将网站图标添加到静态 HTML 页面【英文标题】：Adding a favicon to a static HTML page 【发布时间】：2012-04-14 04:27:20 【问题描述】：我有一些纯 html 的静态页面，当服务器出现故障时我们会显示这些页面。我怎样才能将我制作的图标（它是 16x16px，它与 HTML 文件位于同一目录中；它被称为 favicon.ico）作为“选项卡”图标？我已经阅读了 Wikipedia 并查看了一些教程并实现了以下内容：
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
但它仍然不想工作。我正在使用 Chrome 来测试这些网站。根据***，.ico 是在所有浏览器类型上运行的最佳图片格式。
更新
我无法让它在本地工作，尽管代码检查了它只有在服务器开始为网站提供服务后才能真正正常工作。只需尝试将其推送到服务器并刷新缓存，它应该可以正常工作。
【问题讨论】：
谁不告诉你的任何朋友在其他系统上为你检查它，同样的问题是我的一个客户我的系统显示正常，他抱怨网站图标没有显示，我主要使用你们中的第一个示例及其正确。祝你好运。 How to add a browser tab icon (favicon) for a website?的可能重复 您的示例现在正在 Chrome 上运行。 有趣的是，现场网站提供了 favicon 很好，但是当在本地查看文件时，而不是通过本地服务器提供它（b/c 它是简单的静态站点 - 是的！），favicon没有显示。事后看来，这是有道理的，服务器会自动提供服务。将<link rel="icon" type="image/x-icon" href="favicon.ico"> 添加到head（在32、16 和180 图标变体links 旁边）在本地解决了该问题。由于我已经将links 包含在更大的图标尺寸和清单中，所以我没有三思而后行为什么favicon.ico 没有出现！ :-)
【参考方案1】：
您可以制作一个 .png 图像，然后在静态 HTML 文档的 <head> 标记之间使用以下 sn-ps 之一：
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
【讨论】：
您是否尝试在您的 ico 链接的 rel= 中添加“快捷方式图标”并在两者的 favicon.ico 之前添加 / 以表明它位于 webroot 目录中？ yip 也试过了.. 伙计大声笑我评价我要重新启动它，然后尝试启动，看看它是否兑现错误或什么的.. 我发誓 - 添加代码后我遇到了同样的问题 - 浏览器可能需要一天时间才能显示图标而不是通常的灰色框 - 尝试转储您的浏览器缓存历史记录等如果您复制了我的代码，请确保您将 example.com 更改为您的域 lol 在第一行的 href 参数中有一个多余的 /。一旦我删除它，它就像一个魅力。应该是： w3.org/2005/10/howto-favicon 说在head 标记中包含profile 属性... 有必要吗？【参考方案2】：
大多数浏览器会从站点的根目录中选择favicon.ico，而无需被告知；但他们并不总是立即用新的更新它。
但是，我通常会选择您的第二个示例：
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
【讨论】：
是否必须在元数据或脚本标签之前？或者不是问题 只要它在 部分，它应该没关系 - 因为它不依赖于其他工作。 MDN 表示不再使用shortcut。【参考方案3】：
实际上，要让您的网站图标在所有浏览器中都能正常工作，您必须拥有超过 10 张尺寸和格式正确的图片。
我创建了一个应用程序 (faviconit.com)，因此人们不必手动创建所有这些图像和正确的标签。
希望你喜欢。
【讨论】：
喜欢这个应用程序，没有 bs - 直截了当，并且可以在创建所有 favicon +1 之前编辑图像，为您节省大量时间 :) 同意，这是一个很棒的应用程序。虽然我不认为所有这些图像大小看起来都很必要，但我喜欢它生成它们和所需的标记等。谢谢！ 但它是专有的。 不行，给Whoops, looks like something went wrong.【参考方案4】：
使用语法：.ico, .gif, .png, .svg
此表显示了如何在主流浏览器中使用favicon。标准实现在文档的<head> 部分中使用带有rel 属性的链接元素来指定文件格式和文件名/位置。
注意大多数浏览器会优先考虑位于网站根目录中的
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
浏览器实现
下表说明了浏览器中显示网站图标的不同区域：
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 > 像素大小，以及color depth 中的 8 位、24 位 或 32 位。
虽然上述信息通常是正确的，但在某些情况下存在一些变化/例外情况。
在Wikipedia的来源处查看更多详细信息。
更新：（“更多信息”）
请参阅 Google 的“新”（2019 年）标准至Define a favicon to show in search results。
您可以为 任何 域检索（以编程方式或手动方式）Google 缓存的网站图标，其 URL 如下：https://www.google.com/s2/favicons?domain=***.com
在<img> 标签中直接使用上述 URL 会返回：“”。
我用过几次realfavicongenerator.net；它非常彻底，生成/自定义您可能需要的每个可能的网站图标变体以获得最大的兼容性。 （但是，如果您正在寻找单个图标图像，这可能不是适合您的工具！）对于简单的文件转换（例如，PNG 到ICO等）我喜欢onlineconvertfree.com。
【讨论】：
【参考方案5】：使用this 之类的工具将您的图像文件转换为Base64 字符串，然后用您的字符串替换下面sn-p 中的YourBase64StringHere 占位符，并将该行放在您的HTML 头部：
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
这将在浏览器中 100% 工作。
【讨论】：
我发现了另一个工具，它可以在 javascript 中进行转换而无需将数据传输到服务器：jpillora.com/base64-encoder 此外，它通过拖放处理多个文件。保存页面以在本地使用。 恕我直言，最好的解决方案，因为它尊重“静态 html”页面并且完全包含在文档中。 最佳解决方案。也适用于 png 文件。 这将导致一个长字符串被添加到每个页面。对很少发送给用户的小图像使用内联 base64。 这样你的网站图标永远不会被缓存，你每次都将整个字符串发送给客户端，IHMHO 使用一个 url，因此浏览器缓存感觉“更干净/更好”【参考方案6】：如果网站图标是 png 类型的图像，它在旧版本的 Chrome 中将不起作用。但是它在 FireFox 中可以正常工作。此外，在处理此类事情时不要忘记清除浏览器缓存。很多时候，代码还行，但缓存才是真正的罪魁祸首。
【讨论】：
没关系；无论如何都很难安装/保留旧版 Chrome【参考方案7】：As recommended by W3.org，您可以使用rel 属性来实现。
例子：
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
【讨论】：
【参考方案8】：<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"/>
【讨论】：
【参考方案9】：<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
这对我有用
【讨论】：
虽然这可能有效，但您不能使用 image/png 作为 MIME 类型 - 因为考虑到您使用的是 .ico，这是不正确的 “为我工作”是否包括 ios 上的 Safari？【参考方案10】：我知道它的旧帖子，但仍在为像我这样的人发帖。 这对我有用
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
将您的网站图标放在根目录..
【讨论】：
【参考方案11】：没有“类型”属性的最小图标
<link href='favicon.png' rel='icon' />
您甚至可以省略引号，但不建议在生产环境中使用。
【讨论】：
【参考方案12】：根据OP的更新，它没有显示在本地，但是根据OP的更新，一旦我将它上传到服务器，就可以了。
由于这是一个简单的静态 html 网站，我可以在不运行本地网络服务器的情况下进行工作。 默认情况下，网络服务器通常会自动提供网站图标（如果有的话）。
但是当不运行网络服务器时，浏览器本身不会仅仅读取目录以查找其他文件，例如 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">
它也显示在我的浏览器中，当我查看 本地 文件时，即使 不 通过本地服务器提供它。
所以图标在实时服务器上运行时显示正常，但不是在本地运行。
我明确提到这一点是因为我使用的网站图标生成器友好地提供了代码、图标、清单和说明。但是，虽然它包含 favicon.ico 图像，但它没有在代码中包含该文件的 <link> 以添加到 html 文档中。
我猜该服务假定 favicon.ico 默认情况下会自动提供并被所有浏览器使用，因此只有“替代”版本需要显式添加到 head 标签中。
显然，他们没有考虑到在本地查看文件（也就是不在本地提供文件）时，我们对查看 favicon 不感兴趣？
【讨论】：
“网络服务器通常会自动提供网站图标”——从技术上讲，浏览器会请求它。服务器不只是在没有浏览器请求的情况下提供服务。也许浏览器不会对file:/// url 执行此操作。【参考方案13】：
作为附加说明，可能有一天会对某人有所帮助。
您不能在之前的页面上回显任何内容：
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
不会加载图标
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
工作正常
【讨论】：
这是因为它应该在 HTML 文档的 head 部分，如果不是，大多数浏览器都会忽略它。 是的，我只是想把它放在这里以防万一有人遇到问题。我的问题是“你好”是一些调试代码，让我有点难过。【参考方案14】：我使用convert -resize 16x16 img.png favicon.ico（在 linux konsole 上）来转换我的图像，并且
将<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> 添加到我的标题中，一切正常。
【讨论】：
您需要一个大于 16 像素的多层图标，用于更高 DPI 的屏幕，谁知道还有什么——移动“安装到主屏幕”用例。【参考方案15】：如果您将 favicon 添加到名为 favicon.ico 的根/图像文件夹中，浏览器将自动理解并将其作为 favicon 获取。我已测试并工作。 您的链接必须是 www.website.com/images/favicon.ico
有关更多信息，请查看此答案：
Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?
【讨论】：
/images/ 来自哪里？您的页面中可能有一个base 元素。默认情况下，网站图标从/ 提供服务。但这是老方法；域现在通常拥有多个站点。最好添加图标元标记。【参考方案16】：
请注意，如果您的网站以subfolder 身份运行，即：
http://localhost/MySite/
您需要考虑到这一点。如果您是从 ASP.NETapp 执行此操作，您只需在 URL 前面添加 ~：
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
【讨论】：
~ 不是 URL 世界里的东西。 /favicon.ico 是正确的。 ASP.net 是否对 url 进行了一些重写？使用“Inspect Element”或“View page source”检查实际页面源。
是的，ASP.NET MVC 转换了一个 ~ 来将文件的物理路径转换成它的实际在线 url。【参考方案17】：
请注意，FF 无法在 URL 中加载带有冗余 // 的图标，例如 /img//favicon.png。在 FF 53 上测试。Chrome 还可以。
【讨论】：
这不是真正的答案，而是评论。 （参见“How to Answer”。）【参考方案18】：尝试使用<link rel="icon" type="image/ico" href="images/favi.ico"/>
【讨论】：
以上是关于将网站图标添加到静态 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章