我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。
我怎样才能在 HTML 中做到这一点，我需要在代码中的什么地方放置它（例如标题）？我有一个想要转换为图标的 .png 徽标文件。
相关：HTML set image on browser tab。
实际上有两种方法可以将网站图标添加到网站。
只需将以下代码添加到 <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：
快捷链接类型经常出现在图标之前，但这种链接类型不符合要求，被忽略，网络作者不得再使用它。
根目录下的 favicon.ico
从 another SO answer（由 @mercator）：
所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）总是会请求 favicon.ico，除非您通过 指定了快捷方式图标。
因此，您所要做的就是向您的网站发出 /favicon.ico 请求，返回您的网站图标。遗憾的是，此选项不允许您使用 PNG 图标。
另请参阅favicon.png vs favicon.ico - why should I use PNG instead of ICO?
使用工具将您的 png 转换为 ico 文件。你可以搜索“favicon generator”，你可以找到很多在线工具。使用链接标签将 ico 地址放在头部：
我发现最好的一个是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=" "/>
<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 结果，这是迄今为止最好的。
您可以为各种设备设置许多不同的图标甚至启动画面。这个答案贯穿了如何支持他们所有人。
以下是我使用的一些片段，以及我收集信息的相关链接。请参阅 my blog 了解更多信息以及有关 ASP.NET MVC Boilerplate 项目模板的更多信息，其中所有这些都是开箱即用的（包括示例图像文件）。
将以下标记添加到您的 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">
我的 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 的评论，如果您不支持 1.5KB 的启动屏幕。如果您在 HTML 内容上使用 GZIP 压缩（现在每个人都应该这样做），那么每个请求的开销大约为 634 字节以支持所有平台或 446 字节而没有启动屏幕。我个人认为支持 IOS、Android 和 Windows 设备是值得的，但这是您的选择，我只是提供选项！
关于当前 Web 图标/启动画面/设置情况的旁注
这种使用供应商特定图标、启动屏幕和特殊标签来控制 Web 浏览器或固定图标的情况是荒谬的。在一个完美的世界中，我们都将使用一个 favicon.svg 文件，该文件可以在任何大小下看起来都不错，并且可以放在页面的根部。在撰写本文时，只有 FireFox 支持此功能（请参阅 CanIUse.com）。
但是，图标并不是目前唯一的设置，还有其他几个特定于供应商的设置（如上所示），但 favicon.svg 文件将涵盖大多数用例。
更新
更新以包括新的 Android/Chrome 版本 M39+ 图标/主题选项。有趣的是，他们采用了与 Microsoft 类似的方法，但使用的是 JSON 文件而不是 XML。
我已经成功地为我的网站做到了这一点。
唯一的例外是，SeaMonkey 浏览器需要在您的 <head> 中插入 HTML 代码；而其他浏览器仍将显示 favicon.ico 而无需任何 HTML 插入。此外，除 IE 之外的任何浏览器都可以使用其他类型的图像，而不仅仅是 .ico 格式。我希望这有帮助。
我建议您尝试 http://faviconer.com 将您的 .PNG 或 .GIF 转换为 .ICO 文件。
您可以在一个 .ICO 文件中同时创建 16x16 和 32x32（用于新的 Retina 显示器）。
IE 和 Firefox 没有问题
上面有很多复杂的解决方案。为了我？在将图像大小更改为 32 x 32 像素后，我使用 GIMP 保存了原始 PNG 文件的副本。
请务必将其保存为 *.ico 文件并使用
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
以上所列
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
如果我可以为你们中仍然感到困惑的人增加更多的清晰度。 .ico 文件往往比 .png 提供更高的透明度，这就是为什么我建议在此处转换您的图像，如上所述：http://www.favicomatic.com/done 此外，href 内部只是图像的位置，它可以是任何服务器位置，记得在前面加上http://，否则不行。
link rel=icon 上的 HTML 标准
为了完整起见，标准是这样说的：https://html.spec.whatwg.org/multipage/links.html#rel-icon
icon 关键字可以与链接元素一起使用。此关键字创建一个外部资源链接。指定资源是表示页面或站点的图标，在用户界面中表示页面时应由用户代理使用。 [...] 下面的代码片段显示了带有几个图标的应用程序的顶部。
要让 Chrome 显示页面图标（favicon），您需要从托管服务器检查您的网站，或者您可以在 PC 上开发和测试网站时使用本地主机。
请在您的索引文件的标题部分中使用以下代码。
<link rel="icon" href="yourfevicon.ico" />
我没有用过其他的，但 https://realfavicongenerator.net/ 似乎是首选，这里还没有提到它。
它支持 SVG 作为生成网站图标的源图像，并提供有用的选项来覆盖不同平台的图像。此外，默认情况下，它不会生成大量图像以向后兼容每个过时的平台。相反，它为您提供了检查是否需要它们的选项。
从开发人员发给我的一封电子邮件中，他们还计划添加对生成 SVG 网站图标的支持，以及我认为的 SVG theme-sensitivity，这是一个非常棒的功能。
您可以通过在 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），让其余的尺寸由用户代理自动下采样（这在现代视网膜设备中应该不是问题）。
关注公众号
不定期副业成功案例分享
<link rel路线。但是，我的站点地址没有可靠地列在 DNS 中，所以我不能指望href="http://example.com"来检索它。所以我在我的index.htm文件中找到了这个解决方案：<link rel="icon" href="favicon.ico">