如何为网站添加浏览器标签图标（favicon）？

Posted

技术标签:

【中文标题】如何为网站添加浏览器标签图标（favicon）？【英文标题】：How to add a browser tab icon (favicon) for a website? 【发布时间】：2011-06-20 18:38:51 【问题描述】：

我一直在做一个网站，我想在浏览器标签中添加一个小图标。

如何在 html 中执行此操作，以及我需要将其放置在代码的什么位置（例如标题）？我有一个 .png 徽标文件，我想将其转换为图标。

相关：HTML set image on browser tab.

【问题讨论】：

查看link 了解更多信息。你在正确的轨道上。 使用 FTP（阅读我们的 FTP 教程）将图像 (favicon.ico) 上传到您网站的根部分。根部分是主文件区域，您可以在其中存储主页的 index.html（index.asp、index.php 等）文件。 davesite.com 将是根 davesite.com/webstation 不会是根 davesite.com/webstation/html 也不是根 此文件放置正确，将作为您整个域的默认值加载。 在那里过早地按回车键 - 无论如何感谢您的回复。只是想说您提供的链接中的第一部分（我在上面粘贴）似乎不起作用？但是第二部分效果很好 - 谢谢 这里是the w3.org recommendations，带有警告IE before IE11 doesn't support .png as fav icons。 【参考方案1】：

实际上有两种方法可以将网站图标添加到网站。

<link rel="icon">

只需将以下代码添加到<head> 元素：

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

PNG 网站图标are supported by most browsers, except IE <= 10。为了向后兼容，您可以使用 ICO favicons。

请注意，您不必再在rel 属性中的icon 前面加上shortcut。来自MDN Link types：

shortcut 链接类型经常出现在 icon 之前，但这种链接类型不符合标准，被忽略，网络作者不得再使用它。

根目录下的favicon.ico

来自another SO answer（@mercator）：

所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）总是会请求 favicon.ico，除非您通过 &lt;link&gt; 指定了快捷方式图标。

因此，您所要做的就是向您的网站发送/favicon.ico 请求，返回您的网站图标。遗憾的是，此选项不允许您使用 PNG 图标。

另见favicon.png vs favicon.ico - why should I use PNG instead of ICO?

【讨论】：

如果您想要自动所有图标（包括移动、“添加到主屏幕”图标、移动书签、ios/Droid、桌面选项卡等）、ICO 文件生成等，以及复制-上述元文件的可粘贴 HTML 代码，只需单击一下，您就可以使用这个方便的工具（我不隶属）realfavicongenerator.net 想补充：你的图标应该是方形的，这意味着宽度等于高度。 测试时不要忘记按Ctrl+F5。有时会被缓存。 我确实没有发现在我网站的根目录中简单地放置一个名为 favicon.ico 的 ICO 文件会导致 FireFox 或 Chrome 加载它。所以我选择了&lt;link rel 路线。但是，我的网站地址没有可靠地列在 DNS 中，所以我不能指望href="http://example.com" 来检索它。所以我在我的index.htm 文件中找到了这个解决方案：&lt;link rel="icon" href="favicon.ico"&gt;【参考方案2】：
    使用工具将您的 png 转换为 ico 文件。你可以搜索“favicon generator”，你可以找到很多在线工具。

    将 ico 地址放在 head 中，并带有 link-tag：

    <link rel="shortcut icon" href="http://sstatic.net/***/img/favicon.ico">

【讨论】：

谢谢！我正确地遵循了这些步骤，它在 IE 和 Firefox 上运行得非常好，但由于某种原因它不能在谷歌 Chrome 上运行，我是否必须删除缓存？或者我必须从那里做什么？ 我喜欢使用 Photoshop 插件：telegraphics.com.au/svn/icoformat/trunk/dist/README.html 很多情况下可以去掉“快捷方式”部分：***.com/questions/13211206/…, mathiasbynens.be/notes/rel-shortcut-icon【参考方案3】：

我找到的最好的是http://www.favicomatic.com/ 我说得最好，因为它给了我最清晰的图标，并且在转换后不需要编辑。 它将生成 16x16 和 32x32 的图标，并引用它们“每个该死的尺寸，先生！” 此外，他们的网站看起来很酷且易于使用。

它们还会生成您需要用于它们生成的文件的 html。

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

我查看了前 20 个左右的 google 结果，这是迄今为止最好的。

【讨论】：

我应该把所有这些都放在每个页面的 head 标签中吗？ 我不会把所有这些都放在你的 head 标签中。我只会放入支持您需要支持的设备所需的标签。老实说，你可以用一个 这个 git 页面解释了这些图标的大部分用途：github.com/audreyr/favicon-cheat-sheet【参考方案4】：

我创建了一个在线Favicon Generator，您可以使用它从Font Awesome Icons 创建网站图标。您可以在浏览器中实时预览创建的网站图标。

如果您想要更多功能，请随时提交问题或拉取请求here :)。

【讨论】：

【参考方案5】：

您可以为各种设备设置许多不同的图标甚至启动画面。这个答案涵盖了如何支持他们所有人。

以下是我使用的一些 sn-ps，以及我收集信息的相关链接。请参阅 my blog 了解更多信息以及有关 ASP.NET MVC Boilerplate 项目模板的更多信息，所有这些都是开箱即用的内置（包括示例图像文件）。

将以下标记添加到您的 html 头部。注释掉的部分完全是可选的。虽然建议未注释的部分涵盖所有图标用法。不要害怕，如果是 cmets 帮助你的话。

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

我的 browserconfig.xml 文件。上面有完整的解释。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

我的 manifest.json 文件。上面有完整的解释。


    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        ,
        
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        ,
        
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        ,
        
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        ,
        
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        ,
        
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        
    ]

项目中的文件列表（请注意，如果您决定将其中一些文件放在项目的根目录以避免使用上述元标记，则这些文件的名称很重要）：

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

总开销

如果您取出 3KB 额外 HTML 的 cmets，如果您不支持 1.5KB 的初始屏幕。如果您在 HTML 内容上使用 GZIP 压缩（现在每个人都应该这样做），那么每个请求的开销约为 634 字节以支持所有平台或 446 字节而没有启动屏幕。我个人认为支持 IOS、Android 和 Windows 设备是值得的，但这是您的选择，我只是提供选项！

关于当前 Web 图标/启动画面/设置情况的附注

这种使用供应商特定图标、启动屏幕和特殊标签来控制网络浏览器或固定图标的情况是荒谬的。在一个完美的世界中，我们都会使用一个 favicon.svg 文件，它可以在任何大小下看起来都很好，并且可以放在页面的根部。在撰写本文时，只有 FireFox 支持此功能（请参阅 CanIUse.com）。

然而，如今图标并不是唯一的设置，还有其他几个特定于供应商的设置（如上所示），但 favicon.svg 文件将涵盖大多数用例。

更新

更新为包含新的 Android/Chrome 版本 M39+ 图标/主题选项。有趣的是，他们采用了与 Microsoft 类似的方法，但使用的是 JSON 文件而不是 XML。

【讨论】：

【参考方案6】：

我已经成功地为我的网站完成了这项工作。

唯一的例外是，SeaMonkey 浏览器需要在您的&lt;head&gt; 中插入 HTML 代码；而其他浏览器仍将显示 favicon.ico 而无需任何 HTML 插入。此外，除 IE 之外的任何浏览器都可以使用其他类型的图像，而不仅仅是 .ico 格式。我希望这会有所帮助。

【讨论】：

【参考方案7】：

我建议您尝试 http://faviconer.com 将您的 .PNG 或 .GIF 转换为 .ICO 文件。

您可以在一个 .ICO 文件中同时创建 16x16 和 32x32（用于新的视网膜显示器）。

IE 和 Firefox 没有问题

【讨论】：

【参考方案8】：

上面有很多复杂的解决方案。为了我？将图像大小更改为 32 x 32 像素后，我使用 GIMP 保存了原始 PNG 文件的副本。

请务必将其保存为 *.ico 文件并使用 

<link rel="shortcut icon" href="http://sstatic.net/***/img/favicon.ico">

上面列出的

【讨论】：

【参考方案9】：

link rel=icon 上的 HTML 标准

为了完整起见，这就是标准所说的：https://html.spec.whatwg.org/multipage/links.html#rel-icon

icon 关键字可以与链接元素一起使用。此关键字创建一个外部资源链接。

指定的资源是表示页面或站点的图标，在用户界面中表示页面时应由用户代理使用。

[...]

下面的 sn-p 显示了带有几个图标的应用程序的顶部。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

由于历史原因，icon 关键字前面可能有关键字“shortcut”。如果存在“shortcut”关键字，则 rel 属性的整个值必须是字符串“shortcut icon”的不区分大小写的 ASCII 匹配（在标记之间有一个 U+0020 SPACE 字符，并且没有其他 ASCII 空格）。

【讨论】：

【参考方案10】：

要让 Chrome 显示页面图标（favicon），您需要从托管服务器检查您的网站，或者您可以在 PC 上开发和测试网站时使用本地主机。

【讨论】：

【参考方案11】： 
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

如果我可以为那些仍然感到困惑的人增加更多的清晰度。 .ico 文件往往比 .png 提供更高的透明度，这就是为什么我建议在此处转换您的图像，如上所述： http://www.favicomatic.com/done 还有，href里面就是图片的位置，可以是任何服务器位置，记得在前面加上http://，否则不起作用。

【讨论】：

【参考方案12】：

我没有用过其他的，但https://realfavicongenerator.net/ 似乎是首选，这里还没有提到。

它支持将 SVG 作为源图像来生成网站图标，并提供有用的选项来覆盖不同平台的图像。此外，默认情况下，它不会生成大量图像以向后兼容每个过时的平台。相反，它为您提供了检查是否需要它们的选项。

从开发人员发给我的一封电子邮件中，他们还计划添加对生成 SVG 图标的支持，以及 SVG theme-sensitivity，我认为，这是一个非常棒的功能。

【讨论】：

【参考方案13】：

请在您的索引文件的标题部分使用以下代码。

<link rel="icon" href="yourfevicon.ico" />

【讨论】：

【参考方案14】：

您可以通过在 Apache 的 .htaccess 文件 [或其 nginx 的等效文件] 中重命名/翻译每个 HTTP 请求来发现 单个 favicon.png 文件，这种方式：

# Universal favicon
RewriteRule ^(?:fav|apple-touch-)icon.*\.(?:ico|png)$ favicon.png [L]

然后，您唯一需要做的就是将此 [tiny] 行添加到 HTML 代码的 head 部分：

<link rel="icon" href="favicon.png">

关于图像尺寸，我会使用我的 web 应用程序所期望的最高尺寸（例如 Android 的 192px），让用户代理自动对剩余的尺寸进行下采样（这在现代 中应该不是问题）视网膜 设备）。

【讨论】：

以上是关于如何为网站添加浏览器标签图标（favicon）？的主要内容，如果未能解决你的问题，请参考以下文章

如何为自己的网站安装favicon.ico标志？

板邓：给网站添加favicon图标

如何为自己的网站安装favicon.ico标志？

在浏览器标签显示网站logo图标

网站微图标，页标签，favicon.ico

如何为自己的网站安装favicon.ico