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

时间：2011-02-03 15:55:10

标签： html icons favicon

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

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

相关：HTML set image on browser tab。

13 个答案:

答案 0 :(得分：416)

  1. 使用工具将您的png转换为ico文件。您可以搜索“favicon生成器”，您可以找到许多在线工具。

  2. 将ico地址放在head中link - 标记：

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

答案 1 :(得分：324)

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

<link rel="icon">

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

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

PNG favicons are supported by most browsers, except IE <= 10。为了向后兼容，您可以使用ICO favicons。

请注意，不再需要icon rel属性shortcut之前的shortcut 。来自MDN Link types：

  

icon链接类型经常出现在favicon.ico之前，但此链接类型不合规，被忽略且网络作者不得再使用。

根目录中的

favicon.ico

来自another SO answer（@mercator）：

  

除非您通过<link>指定了快捷方式图标，否则所有现代浏览器（使用Chrome 4，Firefox 3.5，IE8，Opera 10和Safari 4进行测试）始终会请求/favicon.ico。

所以，您只需要向您的网站发送{{1}}请求即可返回您的网站图标。遗憾的是，此选项不允许您使用PNG图标。

另见favicon.png vs favicon.ico - why should I use PNG instead of ICO?

答案 2 :(得分：62)

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

他们还会生成您需要用于生成文件的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个左右的谷歌搜索结果，这是迄今为止最好的。

答案 3 :(得分：12)

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

以下是我使用的一些片段以及我收集信息的相关链接。有关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

总费用

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

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

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

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

<强>更新

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

答案 4 :(得分：10)

我已成功为我的网站完成此操作。

只有例外情况是，SeaMonkey浏览器需要在<head>中插入HTML代码;然而，其他浏览器仍然会显示favicon.ico而不插入任何HTML。此外，IE以外的任何浏览器都可以使用其他类型的图像，而不仅仅是.ico格式。我希望这会有所帮助。

答案 5 :(得分：7)

我创建了一个在线Favicon Generator，您可以使用Font Awesome Icons创建一个favicon。您可以在浏览器中预览创建的favicon。

enter image description here

如果您需要其他功能，请随时提交问题或提取请求here：）。

答案 6 :(得分：4)

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

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

IE和Firefox没有问题

答案 7 :(得分：4)

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

请务必将其另存为* .ico文件并使用

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

上面列出

答案 8 :(得分：3)

link rel=icon上的HTML标准

仅出于完整性考虑，这就是标准所说的：enter image description here

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关键字之前可能带有关键字“ shortcut”。如果存在“ shortcut”关键字，则rel属性的整个值必须是字符串“ shortcut icon”的ASCII区分大小写的匹配项（标记之间只有一个U + 0020 SPACE字符，并且没有其他ASCII空格）。

答案 9 :(得分：2)

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

答案 10 :(得分：1)

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

如果我可以为那些仍然困惑的人添加更多清晰度。 .ico文件倾向于提供比.png更多的透明度，这就是我建议如上所述转换图像的原因： http://www.favicomatic.com/done 另外，在href内部只是图像的位置，它可以是任何服务器位置，记得在前面添加http：//，否则它不会起作用。

答案 11 :(得分：1)

我没有使用过其他任何东西，但是https://realfavicongenerator.net/似乎是一个最佳选择，并且这里还没有提及。

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

开发人员发送给我的电子邮件中，他们还计划增加对生成SVG网站图标以及SVG theme-sensitivity的支持，这是一个非常棒的功能。

答案 12 :(得分：0)

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

year, Exports of goods(F.O.B), Domestic exports, Re-exports.

1, 5, 10,20

1, 5, 10, 20

1, 5, 10, 20

1, 5, 10, 20
相关问题
最新问题