我有一些纯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浏览器测试网站。根据Wikipedia所述，.ico是可在所有浏览器类型上运行的最佳图片格式。

更新资料

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

html static favicon

— 传奇
source

谁不告诉您的朋友在其他系统上为您检查它，同一问题是我的一个客户端我的系统显示正常，并且他抱怨网站图标未显示，我主要使用您中的第一个示例这是正确的。祝你好运。

— 2012年

3

如何为网站添加浏览器选项卡图标（favicon）的

— 米哈尔Perłakowski

您的示例现在可以在Chrome上运行。

— Damjan Pavlica '18年

有趣的是，实时网站可以很好地为网站图标提供服务，但是当在本地查看文件时，而不是通过本地服务器（b / c，这是一个简单的静态站点-是的）来提供文件时，网站图标没有显示。在事后看来，服务器会自动为其提供服务。添加<link rel="icon" type="image/x-icon" href="favicon.ico">到head（继32、16和180个favicon版本links之后）局部解决了该问题。由于我link为较大的图标尺寸和清单添加了s，所以我没有三思而后行为什么favicon.ico没有出现！:-)

— SherylHohman

932

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

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— 朦胧的麦基
source

3

您是否尝试过将ico链接的“快捷方式图标”放在rel =中，并将favicon.ico放在/之前，以表明它位于webroot目录中？

— 朦胧的麦基

1

叶氏试过太..人笑我打分我要去重新启动这一切，然后尝试开机，看看也许它兑现错误或东西..

— TheLegend

5

我发誓-添加代码后我遇到了同样的问题-浏览器可能要花一天时间才能显示图标，而不是通常显示的灰色框-尝试转储您的浏览器缓存历史记录等，如果您复制了我的代码，请确保将example.com更改为您的域大声笑

— Hazy McGee 2012年

2

顶行href参数中有一个多余的/。一旦删除它，它就像一个魅力。应该是：<link rel =“ shortcut icon” href =“ favicon.png” type =“ image / png”>

— drpawelo 2013年

4

w3.org/2005/10/howto-favicon表示要profile在head标签中包含属性...这是否必要？

— 拉基布

228

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

但是，我通常会使用您的第二个示例：

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

— 编解码器
source

是否必须在元数据或脚本标签之前？？还是没有问题

— TheLegend 2012年

2

只要它在<head>部分中，就没有关系-因为它不依赖其他工作方式。

— Codecraft'3

126

实际上，要使您的收藏夹图标在所有浏览器中都能正常工作，您必须以正确的大小和格式包含10张以上的图像。

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

希望你喜欢。

— 爱德华多·鲁索（Eduardo Russo）
source

6

喜欢这个应用程序，没有bs-可以直接使用它，可以在创建所有图标+1之前编辑图像，以节省我很多时间:)

— SidOfc

1

同意，这是一个很棒的应用程序。虽然我认为所有这些图像大小似乎都不是必须的，但我喜欢它会生成它们以及所需的标记等。谢谢！

— andrhamm

独立开发一款出色的应用程序：+1 ：。帮了很多忙

— Renato Gomes '18

1

但这是专有的。

— ctrl-alt-delor'Mar

它不起作用，给出了Whoops, looks like something went wrong.

— daka

68

以下对我有用...

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

— 深蓝色
source

40

使用类似这样的工具将图像文件转换为Base64字符串，然后将YourBase64StringHere以下代码段中的占位符替换为您的字符串，并将该行放入HTML标题部分：

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

这将在浏览器中100％工作。

— 法尔希德
source

3

我找到了另一个可以在JavaScript中进行转换而又不将数据传输到服务器的工具：jpillora.com/base64-encoder另外，它可以通过拖放处理多个文件。保存页面以在本地使用它。

— 处理

1

恕我直言，最好的解决方案，因为它遵循“静态html”页面，并且完全包含在文档中。

— 布法罗拉博

1

最佳解决方案。也可以使用png文件。<link href =“ data：image / png; base64，YourBase64StringHere” rel =“ icon” type =“ image / png” />

— Rolf of Saxony）

1

这将导致将长字符串添加到每个页面。将内联base64用于很少发送给用户的小图像。

— frodeborli

这样一来，您的收藏夹图标就不会被缓存，您每次都会将整个字符串发送给客户端，IHMHO使用网址，因此浏览器缓存感觉“更干净/更好”

— Michiel

34

用法语法：_{^{.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位中的颜色深度。

尽管上面的信息通常是正确的，但在某些情况下会有一些变化/例外。

^{看到完整的文章来源维基百科。}

更新：（“更多信息”）

请参阅Google的“新”（2019年）标准以定义要在搜索结果中显示的图标。
您可以使用网址（例如，以编程方式或手动方式）为任何域检索Google的缓存图标，这些网址包括：https://www.google.com/s2/favicons?domain=stackoverflow.com

直接在<img>标记中使用上述URL会返回：“ ”。
我已经使用了realfavicongenerator.net几次；这非常彻底，可以生成/自定义您可能需要的每种可能的图标图标，以实现最大的兼容性。（但是，如果您要查找单个收藏夹图像，则可能不是该工具！）对于简单的文件转换（例如PNG到ICO，等等），我喜欢onlineconvertfree.com。

— Ashleedawg
source

15

如果收藏夹图标是png类型的图片，则在旧版Chrome中将无法使用。但是，它将在FireFox中正常工作。另外，在进行此类操作时，请不要忘记清除浏览器缓存。很多时候，代码还不错，但是缓存才是真正的罪魁祸首。

— 丹佛·谢赫（Tanveer Shaikh）
source

1

没关系; 仍然很难安装/保留旧版本的Chrome

— Ben Leggiero

14

根据W3.org的建议，您可以使用rel属性来实现此目的。

例：

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

— 拉胡尔·德赛（Rahul Desai）
source

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"/>

— Shilovk
source

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

这对我有用

— 阿南德·迪维迪（Anand Dwivedi）
source

4

尽管这可能行得通，但是您不能将image / png用作MIME类型-因为考虑到您使用的是.ico，这是不正确的

— zanderwar 2016年

5

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

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

将您的收藏夹图标放在根目录上。

— 回旋加速器3x3
source

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

工作良好

— bart2puck
source

3

这是因为它应该位于HTML文档的开头部分，如果不是，则会被大多数浏览器忽略。

— 埃里克·塞巴斯塔

是的，我只是想把这个放在这里，以防有人遇到问题。我的问题是“ hello”是一些调试代码，使我感到困惑。

— bart2puck 2015年

3

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

— dmx
source

2

请注意，如果您的站点以subfolderie 身份运行：

http://localhost/MySite/

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

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

— 塞吉·萨根（Serj Sagan）
source

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">

我没有也包括普通的“醇的参考favicon.ico。
即使，favicon.ico除了上面列出的图像之外，该文件也包括在内。

一旦添加以下行：

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

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

因此，当图标在实时服务器上运行时，它显示得很好，但在本地服务器上却没有。

我之所以明确提到这一点，是因为我使用的Favicon生成器友好地提供了代码，图标，清单和说明。但是，尽管它包含favicon.ico图像，但<link>在代码中不包含该文件以添加到html文档。
我猜favicon.ico默认情况下将自动为所有浏览器提供服务假定并使用，因此只需要将“替代”版本显式添加到head标签。
显然，他们不认为在本地查看文件（也就是不在本地提供文件）时，我们对看到该网站图标不感兴趣吗？

— 雪莉·霍曼（SherylHohman）
source

1

如果您将favicon添加到根目录/ images文件夹中，其名称为favicon.ico，浏览器将自动理解它并将其作为favicon进行获取。我已经测试并工作。您的链接必须是www.website.com/images/favicon.ico

— 萨汉
source

0

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

— 埃蒂安·伯萨克（ÉtienneBersac）
source

这是不是一个真正的答案一样，因为它是一个注释。（请参阅“ 如何回答 ”。）

— ashleedawg

0

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

— Subindas pm
source

-2

我只是用了png。确保删除任何白色背景。使一个更好的图标

— 汤姆
source

将图标添加到静态HTML页面