如何为网站添加浏览器选项卡图标（favicon）？
我一直在网站上工作，我想添加一个小图标到浏览器选项卡。
我怎样才能做到这一点在HTML和代码中我需要放置它（例如标题）？ 我有一个.png标志文件，我想转换为图标。
相关： 浏览器选项卡上的HTML设置图像 。
实际上有两种方法可以将一个网站图标添加到网站。
<link rel="icon">
只需将以下代码添加到<head>元素：
<link rel="icon" href="http://example.com/favicon.png">
除了IE <= 10之外，大多数浏览器都支持 PNG图标。 为了向后兼容，您可以使用ICO图标。
请注意，您不必在带有shortcut rel属性中的icon前面加上shortcut 。 从MDN链接types ：
shortcut链接types通常出现在icon之前，但这种链接types是不符合的，忽略了， networking作者不能再使用它了 。
favicon.ico在根目录下
从另一个SO回答 （ @mercator ）：
除非您通过
<link>指定了快捷方式图标，否则所有现代浏览器（经过Chrome 4，Firefox 3.5，IE8，Opera 10和Safari 4testing）都会请求favicon.ico。
所以你所要做的就是让你的网站的/favicon.ico请求返回你的图标。 这个选项不幸的是不允许你使用PNG图标。
也可以看看：
- favicon.png vs favicon.ico – 为什么我应该使用PNG而不是ICO？
- 使用工具将您的PNG转换为ico文件。 你可以search“favicon generator”，你可以find许多在线工具。
-
将ico地址放在
head并加上link-tag：<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
我发现的最好的是http://www.favicomatic.com/我说得最好，因为它给了我最强大的图标，并且在转换之后不需要编辑。; 它将生成16×16和32×32的图标，并引用他们“每个该死的大小，先生！” 此外，他们的网站看起来很酷，很容易使用。
他们还会生成您需要用于生成的文件的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左右的谷歌结果，这是迄今为止最好的。
我已经成功地为我的网站做了这个。
只有例外，SeaMonkey浏览器需要在您的<head>插入HTML代码; 而其他浏览器仍然会显示favicon.ico而不插入HTML。 另外，除IE之外的任何浏览器都可以使用其他types的图像，而不仅仅是.ico格式。 我希望这有帮助。
有许多不同的图标，甚至可以为各种设备设置启animation面。 这个答案经历了如何支持他们。
以下是我使用的相关链接，以及我收集信息的一些片段。 查看我的博客 ，了解有关ASP.NET MVC Boilerplate项目模板的更多信息和更多信息，包含所有内置的开发工具（包括示例图像文件）。
将以下标记添加到您的html头部。 注释掉的部分完全是可选的。 虽然未注释的部分build议覆盖所有的图标用法。 不要害怕，如果它是评论帮助你。
<!-- 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="/contenthttp://img.dovov.comfavicon-96x96.png" sizes="96x96"> <!-- favicon-16x16.png - The classic favicon, displayed in the tabs. --> <link rel="icon" type="image/png" href="/contenthttp://img.dovov.comfavicon-16x16.png" sizes="16x16"> <!-- favicon-32x32.png - For Safari on Mac OS. --> <link rel="icon" type="image/png" href="/contenthttp://img.dovov.comfavicon-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="/contenthttp://img.dovov.comapple-touch-icon-57x57.png"> <!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 --> <link rel="apple-touch-icon" sizes="114x114" href="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-touch-icon-72x72.png"> <!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 --> <link rel="apple-touch-icon" sizes="144x144" href="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-touch-icon-76x76.png"> <!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 --> <link rel="apple-touch-icon" sizes="152x152" href="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.comapple-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="/contenthttp://img.dovov.commstile-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的启animation面。 如果您在HTML内容上使用GZIP压缩（现在每个人都应该这样做），那么每个请求将会为您留出大约634字节的开销，以支持所有平台或446字节，而不会出现启animation面。 我个人认为它值得支持IOS，Android和Windows设备，但它是你的select，我只是给出select！
关于当前Web图标/启animation面/设置情况的注意事项
这种情况与供应商特定的图标，启animation面和特殊标签来控制网页浏览器或固定图标是荒谬的。 在一个完美的世界里，我们都会使用一个favicon.svg文件，这个文件可以在任何尺寸上看起来不错，可以放在页面的根目录下。 只有FireFox在撰写本文时支持这个function（请参阅CanIUse.com ）。
然而，图标不是目前唯一的设置，还有其他几个供应商特定的设置（如上所示），但favicon.svg文件将覆盖大多数使用情况。
更新
更新为包含新的Android / Chrome版本M39 + favicon /主题选项。 有趣的是，他们对微软采取了类似的方法，但是使用的是JSON文件而不是XML。
上面有很多复杂的解决scheme。 为了我？ 将图像大小更改为32 x 32像素后，我使用GIMP保存原始PNG文件的副本。
只要确保将其保存为* .ico文件并使用
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
以上所列
要让Chrome浏览器显示页面图标（图标），您需要从托pipe服务器上检查您的网站，或者您可以在您的PC上开发和testing您的网站时使用本地主机。
我build议您尝试http://faviconer.com将;.PNG或.GIF转换为.ICO文件。
您可以在一个.ICO文件中创build16x16和32x32 （用于新的视网膜显示）。
没有与IE和Firefox的问题
<link rel="shortcut icon" href="http://someWebsiteLocationhttp://img.dovov.comimageName.ico">
如果我可以为那些仍然困惑的人增加更多的清晰度。 .ico文件倾向于提供更多的透明度比.png，这就是为什么我build议转换你的形象在这里，如上所述： http ： //www.favicomatic.com/done也是在href里面只是图像的位置，它可以是任何服务器的位置，记得在前面添加http：//，否则不会起作用。
