如何为网站添加浏览器选项卡图标（收藏夹图标）？

我一直在一个网站上工作，我想在浏览器选项卡上添加一个小图标。

我如何在超文本标记语言中做到这一点，以及我需要将其放置在代码中的何处（例如标题）？我有一个.png徽标文件，我想将其转换为图标。

相关：浏览器标签上的超文本标记语言集图像。

2043006 次浏览
小开
  1. 使用工具将您的png转换为ico文件。您可以搜索“收藏夹生成器”，您可以找到许多在线工具。

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

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

我在我的网站上成功地做到了这一点。

唯一的例外是，SeaMonkey浏览器需要在您的<head>中插入超文本标记语言代码；而其他浏览器仍然会显示没有任何超文本标记语言插入的favicon.ico。此外，除IE之外的任何浏览器都可以使用其他类型的图像，而不仅仅是. ico格式。我希望这有帮助。

小开

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

小开

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

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

IE和Firefox没有问题

小开

我找到的最好的一个是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个左右的谷歌结果，这是迄今为止最好的。

小开

您可以为各种设备设置许多不同的图标甚至启动屏幕。这个答案将介绍如何支持它们。

以下是我收集信息的相关链接使用的一些片段。请参阅我的博客以获取有关ASP.NETMVC样板项目模板的更多信息，所有这些都内置在开箱即用（包括示例图像文件）中。

将以下标记添加到您的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额外超文本标记语言的注释，如果你不支持1.5KB的启动屏幕。如果你对你的超文本标记语言内容使用GZIP压缩，这几天每个人都应该这样做，每个请求大约有634字节的开销来支持所有平台，或者446字节没有启动屏幕。我个人认为支持IOS是值得的，Android和Windows设备，但这是你的选择，我只是给出选项！

关于当前Web图标/启动屏幕/设置情况的说明

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

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

更新

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

小开

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

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

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

上面列出

小开
最佳答案

实际上有两种方法可以向网站添加收藏夹图标。

<link rel="icon">

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

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

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

请注意，您不再使用不必在#EYZ1属性中的#EYZ0前面加上shortcut。来自MDN链接类型：

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

#根目录中的EYZ0

从另一个so答案（由@莫卡托）：

所有现代浏览器（Chrome4，Firefox 3.5，IE8，Opera 10和Safari4测试）将始终请求favicon.ico，除非您通过<link>指定了快捷方式图标。

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

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

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

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

小开

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

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

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

小开

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

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

超文本标记语言标准link rel=icon

为了完整性，这就是标准所说的：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>
...

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

小开

您可以通过在Apache的.htaccess文件[或其Nginx的等效文件]中重命名/翻译每个HTTP请求，从而使所有浏览器的单个favicon.png文件成为发现，如下所示：

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

然后，您唯一需要做的就是将这[微小]行添加到超文本标记语言代码的head部分：

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

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


提交答案