用ChatGPT解决这个技术问题 Extra ChatGPT

将网站图标添加到静态 HTML 页面

我有一些纯 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 是在所有浏览器类型上运行的最佳图片格式。

更新

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

谁不告诉你的任何朋友在其他系统上为你检查它，同样的问题是我的一个客户我的系统显示正常，他抱怨 favicon 没有出现，我主要使用你们中的第一个示例和这是正确的。祝你好运。
How to add a browser tab icon (favicon) for a website? 的可能重复项
您的示例现在正在 Chrome 上运行。
有趣的是，现场网站提供的图标很好，但是当在本地查看文件时，而不是通过本地服务器提供它（b/c 它是简单的静态站点 - 是的！），图标没有显示。事后看来，这是有道理的，服务器会自动提供服务。将 <link rel="icon" type="image/x-icon" href="favicon.ico"> 添加到 head（在 32、16 和 180 图标变体 link 旁边）解决了本地问题。由于我为较大的图标尺寸和清单包含了 link，所以我没有三思而后行为什么 favicon.ico 没有出现！ :-)

a
aravk33

您可以制作 .png 图像，然后在静态 HTML 文档的 <head> 标记之间使用以下片段之一： 

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
您是否尝试在 rel= 中为您的 ico 链接添加“快捷方式图标”，并在两者的 favicon.ico 之前添加 / 以表明它位于 webroot 目录中？
yip 也试过了.. 伙计，大声笑，我认为我将重新启动它，然后尝试启动，看看它是否兑现错误或其他什么..
我发誓 - 添加代码后我遇到了同样的问题 - 浏览器可能需要一天时间才能显示图标而不是通常的灰色框 - 尝试转储你的浏览器缓存历史等如果你复制了我的代码，请确保你将 example.com 更改为您的域大声笑
顶行 href 参数中有一个多余的 / 。一旦我删除它，它就像一个魅力。应该是：
w3.org/2005/10/howto-favicon 表示要在 head 标记中包含 profile 属性...有必要吗？
p
pupeno

大多数浏览器会从站点的根目录中选择 favicon.ico 而无需告知；但他们并不总是立即用新的更新它。

但是，我通常会选择您的第二个示例： 

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
它必须在元数据或脚本标签之前吗？或者不是问题
只要它在 部分，它应该没关系 - 因为它不依赖于其他东西来工作。
MDN 表示不再使用 shortcut。
E
Eduardo Russo

实际上，要使您的网站图标在所有浏览器中都能正常工作，您必须拥有超过 10 个尺寸和格式正确的图像。

我创建了一个应用程序 (faviconit.com)，因此人们不必手动创建所有这些图像和正确的标签。

希望你喜欢。

喜欢这个应用程序，没有 bs - 直截了当，并且可以在创建所有 favicon +1 之前编辑图像，为您节省大量时间 :)
同意，这是一个很棒的应用程序。虽然我不认为所有这些图像大小看起来都很必要，但我喜欢它生成它们和所需的标记等。谢谢！
但它是专有的。
它不起作用，给出 Whoops, looks like something went wrong.
a
ashleedawg

使用语法：.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) 标准来定义要在搜索结果中显示的网站图标。

您可以（以编程方式或手动）检索具有以下 URL 的任何域的 Google 缓存图标： https://www.google.com/s2/favicons?domain=stackoverflow.com 在 标记中直接使用上述 URL返回：“”。

我用过 realfavicongenerator.net 几次；它非常彻底，生成/自定义您可能需要的每个可能的网站图标变体以获得最大的兼容性。 （但是，如果您正在寻找单个图标图像，这可能不适合您！）对于简单的文件转换（例如，PNG 到 ICO 等），我喜欢 onlineconvertfree.com。

F
Farshid

使用 this 之类的工具将您的图像文件转换为 Base64 字符串，然后将以下代码段中的 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。
这样你的 favicon 永远不会被缓存，你每次都将整个字符串发送给客户端，IHMHO 使用一个 url，因此浏览器缓存感觉“更干净/更好”
R
Rahul Desai

As recommended by W3.org，您可以使用 rel 属性来实现这一点。

例子： 

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
T
Tanveer Shaikh

如果 favicon 是 png 类型的图像，它将无法在旧版本的 Chrome 中使用。但是它在 FireFox 中可以正常工作。此外，在处理此类事情时不要忘记清除浏览器缓存。很多时候，代码还不错，但缓存才是真正的罪魁祸首。

没关系;无论如何都很难安装/保留旧版本的 Chrome
s
shilovk 
<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"/>
S
Sam Piecz 
<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？
C
Cyclotron3x3

我知道它的旧帖子，但仍然为像我这样的人发帖。这对我有用 

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

将您的网站图标放在根目录上..

S
SherylHohman

根据 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 图像，但它没有在要添加到 html 文档的代码中包含该文件的 <link>。
我猜该服务假定 favicon.ico 将自动提供并且默认情况下被所有浏览器使用，因此只有“替代”版本需要显式添加到 head 标签中。
显然，他们不考虑在本地查看文件时（也就是不在本地提供文件），我们对查看图标不感兴趣？

“网络服务器通常会自动提供网站图标”——从技术上讲，浏览器会请求它。服务器不只是在没有浏览器请求的情况下提供服务。也许浏览器不会对 file:/// 网址执行此操作。
T
Timo

没有“类型”属性的最小图标 

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

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

b
bart2puck

作为附加说明，有一天可能会对某人有所帮助。

您不能在之前的页面上回显任何内容： 

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

工作正常

这是因为它应该位于 HTML 文档的 head 部分，如果不是，大多数浏览器都会忽略它。
是的，我只是想把这个放在这里，以防有人遇到问题。我的问题是“你好”是一些调试代码，让我有点难过。
d
dmx

我使用 convert -resize 16x16 img.png favicon.ico（在 linux konsole 上）转换我的图像，并将 <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> 添加到我的标题中，一切正常。

您需要一个尺寸大于 16 像素的多层图标，用于更高 DPI 的屏幕，谁知道还有什么——移动“安装到主屏幕”用例。
C
Community

如果您将 favicon 添加到 root/images 文件夹中并命名为 favicon.ico 浏览器将自动理解并将其作为 favicon.I 测试并工作。您的链接必须是 www.website.com/images/favicon.ico

有关更多信息，请查看此答案：

Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?

/images/ 来自哪里？您的页面中可能有一个 base 元素。默认情况下，网站图标从 / 提供。但这是老方法；域现在通常拥有多个站点。最好添加图标元标记。
S
Serj Sagan

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

http://localhost/MySite/

您需要考虑到这一点。如果您是通过ASP.NET应用执行此操作，您只需在 URL 前面添加一个 ~： 

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
~ 不是 URL 世界中的东西。 /favicon.ico 是正确的。 ASP.net 是否对 url 进行了一些重写？使用“检查元素”或“查看页面源”检查实际页面源。
是的，ASP.NET MVC 会转换一个 ~ 来将文件的物理路径转换为其实际的在线 url。
É
Étienne Bersac

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

这不是真正的答案，而是评论。 （参见“How to Answer”。）
S
Sam Piecz

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.