[英]How to add a browser tab icon (favicon) for a website?
我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。
我如何在 HTML 中执行此操作以及我需要将其放置在代码中的什么位置（例如标题）？ 我有一个.png徽标文件，我想将其转换为图标。
相关： HTML 在浏览器选项卡上设置图像。
实际上有两种方法可以将网站图标添加到网站。
<link rel="icon"> 只需将以下代码添加到<head>元素：
<link rel="icon" href="http://example.com/favicon.png">
大多数浏览器都支持PNG 图标，除了 IE <= 10 。 为了向后兼容，您可以使用 ICO 图标。
请注意，您不必再使用shortcut在rel属性中的icon之前。 来自MDN 链接类型：
shortcut链接类型经常出现在icon之前，但这种链接类型是不合格的，被忽略了，网页作者不能再使用它了。
favicon.ico来自另一个 SO 答案（由@mercator 提供）：
所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 测试）将始终请求
favicon.ico除非您已通过<link>指定快捷方式图标。
所以你所要做的就是让/favicon.ico请求你的网站返回你的 favicon。 遗憾的是，此选项不允许您使用 PNG 图标。
将 ico 地址放在带有link标签的head ：
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.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 结果，这是迄今为止最好的。
我创建了一个在线Favicon Generator ，您可以使用它从Font Awesome Icons创建网站图标。 您可以在浏览器中实时预览创建的网站图标。
如果您需要其他功能，请随时在此处提交问题或拉取请求:)。
您可以为各种设备设置许多不同的图标，甚至启动画面。 这个答案贯穿了如何支持他们。
以下是我使用的一些片段，以及指向我收集信息的位置的相关链接。 有关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 （用于新的视网膜显示）。
IE 和 Firefox 没有问题
上面有很多复杂的解决方案。 给我？ 在将图像大小更改为 32 x 32 像素后，我使用 GIMP 保存了原始 PNG 文件的副本。
只要确保将其保存为 *.ico 文件并使用
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
上面列出
link rel=icon上的 HTML 标准
只是为了完整性，这就是标准所说的： https : //html.spec.whatwg.org/multipage/links.html#rel-icon
icon 关键字可以与链接元素一起使用。 此关键字创建外部资源链接。
指定的资源是代表页面或站点的图标，用户代理在用户界面中表示页面时应该使用它。
[...]
以下代码段显示了具有多个图标的应用程序的顶部。
<!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> ...由于历史原因，图标关键字之前可能会出现关键字“快捷方式”。 如果存在“shortcut”关键字，则 rel 属性的整个值必须是字符串“shortcut icon”的不区分大小写的 ASCII 匹配（在标记之间有一个 U+0020 空格字符，并且没有其他 ASCII 空格）。
为了让 Chrome 显示页面图标（favicon），您需要从托管服务器检查您的网站，或者您可以在 PC 上开发和测试您的网站时使用本地主机。
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
如果我可以为那些仍然感到困惑的人增加更多清晰度。 .ico 文件往往比 .png 提供更多的透明度，这就是为什么我建议如上所述在此处转换您的图像： http : //www.favicomatic.com/done也是，href 内只是图像的位置, 可以是任意服务器位置，记得前面加http://，否则不行。
我没有用过其他的，但https://realfavicongenerator.net/似乎是首选，这里还没有提到。
它支持 SVG 作为用于生成收藏夹图标的源图像，并提供有用的选项来覆盖不同平台的图像。 此外，默认情况下它不会生成大量图像以向后兼容每个过时的平台。 相反，它为您提供了检查是否需要它们的选项。
从开发人员发给我的一封电子邮件中，他们还计划添加对生成 SVG 图标的支持，以及SVG 主题敏感性，我认为，这是一个非常棒的功能。
请在索引文件的标题部分使用以下代码。
<link rel="icon" href="yourfevicon.ico" />
通过在 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），让剩余的尺寸由用户代理自动下采样（这在现代视网膜设备中应该不是问题）。
如何使用 webpack 在网站的浏览器选项卡中放置图标（图标）？
[英]How can I put an icon (favicon) in the browser tab of a website using webpack?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.