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

Question

提问by knookie

I've been working on a website and I'd like to add a small icon to the browser tab.

我一直在开发一个网站，我想在浏览器选项卡中添加一个小图标。

How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .pnglogo file that I'd like to convert to an icon.

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

Related: HTML set image on browser tab.

相关：浏览器选项卡上的 HTML 设置图像。

Answer 1

采纳答案by Micha? Per?akowski

There are actually two ways to add a favicon to a website.

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

`<link rel="icon">`

Simply add the following code to the <head>element:

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

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

PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.

大多数浏览器都支持PNG 图标，除了 IE <= 10。为了向后兼容，您可以使用 ICO 图标。

Note that you don't have to precede iconin relattribute with shortcutanymore. From MDN Link types:

请注意，您不必再icon在rel属性之前加上shortcut。来自MDN 链接类型：

The shortcutlink type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

该shortcut链接类型通常见过icon，但这种链接类型是不符合要求的，忽略网页制作者不能再使用它。

`favicon.ico`in the root directory

`favicon.ico`在根目录

From another SO answer(by @mercator):

来自另一个 SO 答案（由@mercator 提供）：

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.icounless you've specified a shortcut icon via <link>.

所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）总是会请求 a，favicon.ico除非您通过<link>.

So all you have to do is to make the /favicon.icorequest to your website return your favicon. This option unfortunately doesn't allow you to use a PNG icon.

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

See also favicon.png vs favicon.ico - why should I use PNG instead of ICO?

另请参阅favicon.png 与 favicon.ico - 为什么我应该使用 PNG 而不是 ICO？

Answer 2

回答by Gustavo Costa De Oliveira

Use a tool to convert your png to a ico file. You can search "favicon generator" and you can find many online tools.

Place the ico address in the headwith a link-tag:

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

使用工具将您的 png 转换为 ico 文件。你可以搜索“favicon generator”，你可以找到很多在线工具。

将 ico 地址放在head带有link-tag 的位置：

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

Answer 3

回答by Jared Menard

The best one that I found is http://www.favicomatic.com/I say best because it gave me the crispest favicon, and required no editing after their transformation. It will generate favicons at 16x16 and 32x32 and to quote them "Every damn size, sir!" Also, their site looks cool and is easy to use.

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

They also generate the html that you need to use for the files they generate.

它们还会生成您需要用于它们生成的文件的 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" />

I looked at the first 20 or so google results, and this was by far the best.

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

Answer 4

回答by Muhammad Rehan Saeed

There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.

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

Here are some snippets I have used with relevant links to where I gathered the information. See my blogfor more information and more information about the ASP.NET MVC Boilerplateproject template with all this built in right out of the box (Including sample image files).

以下是我使用的一些片段，以及指向我收集信息的位置的相关链接。有关ASP.NET MVC Boilerplate项目模板的更多信息和更多信息，请参阅我的博客，所有这些都是开箱即用的（包括示例图像文件）。

Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don't be scared, most if it is comments to help you.

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

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

My browserconfig.xml file. Full explanation above.

我的 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>

My manifest.json file. Full explanation above.

我的 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"
        }
    ]
}

A list of the files in the project (Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags):

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

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

Total Overhead

总开销

If you take out the comments that's 3KB of extra HTML, if you don't support splash screens that's 1.5KB. If you are using GZIP compression on your HTML content, which everyone should be doing these days, that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens. I personally think its worth it to support IOS, Android and Windows devices but its your choice, I'm just giving the options!

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

Side Note About The Current Web Icon/Splash Screen/Settings Situation

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

This situation with vendor specific icons, splash screens and special tags to control the web browser or pinned icons is ridiculous. In a perfect world we would all use a favicon.svg file which could look good at any size and could be placed at the root of the page. Only FireFox supports this at the time of writing (See CanIUse.com).

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

However, icons are not the only setting these days, there are several other vendor specific settings (shown above) but a favicon.svg file would cover most use cases.

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

Update

更新

Updated to include the new Android/Chrome version M39+ favicon/theming options. Interestingly, they have gone with a similar approach to Microsoft but are using a JSON file instead of XML.

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

Answer 5

回答by eclipse

I have created an online Favicon Generatorwith which you can create favicons from Font Awesome Icons. You can preview the created favicon live in the browser.

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

If you want additional features please feel free to submit an issue or a pull request here:).

如果您需要其他功能，请随时在此处提交问题或拉取请求:)。

Answer 6

回答by Barbie laptop gamer

I've successfully done this for my website.

我已经成功地为我的网站做到了这一点。

Only exception is, the SeaMonkey browser requires HTML code inserted in your <head>; whereas, the other browsers will still display the favicon.ico without any HTML insertion. Also, any browser other than IE may use other types of images, not just the .ico format. I hope this helps.

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

Answer 7

回答by beep_check

There are a lot of complicated solutions above. For me? I used GIMP to save a copy of the original PNG file after changing the image size to 32 x 32 pixels.

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

Just be sure to save it as a *.ico file and use the

只要确保将其保存为 *.ico 文件并使用

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

listed above

以上所列

Answer 8

回答by Dmitri A

I'd recommend you to try http://faviconer.comto convert your .PNG or .GIF to a .ICO file.

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

You can create both 16x16and 32x32(for new retina display) in one .ICO file.

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

No issues with IE and Firefox

IE 和 Firefox 没有问题

Answer 9

回答by Miloud Eloumri

For Chrome to display the page icon (favicon), you need to check your website from a hosting server or you can use local host while developing and testing your website on your PC.

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

Answer 10

回答by dizad87

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

If i may add more clarity for those of you that are still confused. The .ico file tends to provide more transparency than the .png, which is why i recommend converting your image here as mentioned above: http://www.favicomatic.com/donealso, inside the href is just the location of the image, it can be any server location, remember to add the http:// in front, otherwise it won't work.

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

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

提问by knookie

采纳答案by Micha? Per?akowski

`<link rel="icon">`

`<link rel="icon">`

`favicon.ico`in the root directory

`favicon.ico`在根目录

回答by Gustavo Costa De Oliveira

回答by Jared Menard

回答by Muhammad Rehan Saeed

回答by eclipse

回答by Barbie laptop gamer

回答by beep_check

回答by Dmitri A

回答by Miloud Eloumri

回答by dizad87

相关推荐

最近更新

标签

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

提问by knookie

采纳答案by Micha? Per?akowski

<link rel="icon">

<link rel="icon">

favicon.icoin the root directory

favicon.ico在根目录

回答by Gustavo Costa De Oliveira

回答by Jared Menard

回答by Muhammad Rehan Saeed

回答by eclipse

回答by Barbie laptop gamer

回答by beep_check

回答by Dmitri A

回答by Miloud Eloumri

回答by dizad87

相关推荐

Html 如何在css中编写下拉菜单？

Html 在 HTML5 部分旁边浮动

Html 链接不回目录？

Html 如何在div中动态显示文本

相关推荐

最近更新

标签

`<link rel="icon">`

`<link rel="icon">`

`favicon.ico`in the root directory

`favicon.ico`在根目录