那些遇到过的问题

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

kno*_*kie 534 html favicon icons

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

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

相关:HTML在浏览器选项卡上设置图像.

小智 422

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

  2. 将ico地址放在head带有link-tag的地址中:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
    Run Code Online (Sandbox Code Playgroud)

  • 谢谢!我正确地遵循了这些步骤,它在IE和Firefox上工作得非常好,但由于某些原因它不能用于谷歌Chrome,我是否必须删除缓存？或者从那里我该怎么做？ (2认同)
  • 在许多情况下可以删除"快捷方式"部分:http://stackoverflow.com/questions/13211206/html5-link-rel-shortcut-icon,https://mathiasbynens.be/notes/rel-shortcut-icon (2认同)

Mic*_*ski 359

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

<link rel="icon">

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

<link rel="icon" href="http://example.com/favicon.png">
Run Code Online (Sandbox Code Playgroud)

大多数浏览器都支持 PNG favicons ,IE <= 10除外.为了向后兼容,您可以使用ICO favicons.

请注意,您不必再icon在rel属性之前shortcut.从MDN链接类型:

该shortcut链接类型通常见过icon,但这种链路类型为不合格,忽略网页制作者不能再使用它.

favicon.ico 在根目录中

从另一个SO答案(@mercator):

所有现代浏览器(使用Chrome 4,Firefox 3.5,IE8,Opera 10和Safari 4测试)将始终请求a,favicon.ico除非您通过指定了快捷方式图标<link>.

所以你要做的就是让/favicon.ico你的网站上的请求返回你的图标.遗憾的是,此选项不允许您使用PNG图标.

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

  • 如果您想要自动生成所有图标（包括移动设备、“添加到主屏幕”图标、移动设备书签、iOS/Droid、桌面标签等）、ICO 文件生成等，以及上述元文件的可复制粘贴 HTML 代码，只需单击一下，您就可以使用这个方便的工具（我不隶属于）https://realfavicongenerator.net/ (3认同)
  • 想补充：你的图标应该是方形的，这意味着宽度等于高度。 (2认同)
  • 测试时不要忘记按Ctrl + F5。有时会被缓存。 (2认同)

Jar*_*ard 70

我找到的最好的是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" />
Run Code Online (Sandbox Code Playgroud)

我查看了前20个左右的谷歌搜索结果,这是迄今为止最好的.

  • 这个git页面解释了大多数这些图标的用途:https://github.com/audreyr/favicon-cheat-sheet (4认同)
  • 我应该把所有这些都放在每个页面的标题中吗？ (3认同)

Muh*_*eed 13

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

以下是我使用的一些片段以及我收集信息的相关链接.有关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">
Run Code Online (Sandbox Code Playgroud)

我的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>
Run Code Online (Sandbox Code Playgroud)

我的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"
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

项目中的文件列表(请注意,如果您决定将其中一些文件放在项目的根目录以避免使用上述元标记,则这些文件的名称很重要):

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
Run Code Online (Sandbox Code Playgroud)

总开销

如果您不支持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.

小智 10

我已经成功地为我的网站做了这个.

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

ecl*_*pse 10

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

在此输入图像描述

如果你想要更多的功能,请随时提出问题或拉入请求在这里 :).

小智 5

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

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

IE 和 Firefox 没有问题

bee*_*eck 5

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

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

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
Run Code Online (Sandbox Code Playgroud)

以上所列

Cir*_*四事件 5

HTML 标准link rel=icon

\n

为了完整起见，这就是标准所说的：https ://html.spec.whatwg.org/multipage/links.html#rel-icon

\n
\n

图标关键字可以与链接元素一起使用。该关键字创建外部资源链接。

\n

指定的资源是代表页面或站点的图标，并且应该由用户代理在用户界面中代表页面时使用。

\n

[...]

\n

以下代码片段显示了带有多个图标的应用程序的顶部。

\n
<!DOCTYPE HTML>\n<html lang="en">\n <head>\n  <title>lsForums \xe2\x80\x94 Inbox</title>\n  <link rel=icon href=favicon.png sizes="16x16" type="image/png">\n  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">\n  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">\n  <link rel=icon href=iphone.png sizes="57x57" type="image/png">\n  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">\n  <link rel=stylesheet href=lsforums.css>\n  <script src=lsforums.js></script>\n  <meta name=application-name content="lsForums">\n </head>\n <body>\n  ...\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n
\n

归档时间：

查看次数：

1370842 次

最近记录：

7 年，5 月 前
favicon.png vs favicon.ico - 我为什么要使用PNG而不是ICO？ 428
HTML5` <link rel ="快捷图标"/>` 58
HTML在浏览器选项卡上设置图像 42
更多相关链接
相关归档
将JavaScript放在HTML文件中的哪个位置？ 202
浏览器中的ES6:Uncaught SyntaxError:意外的令牌导入 74
删除HTML按钮/提交的完整样式 73
如何阻止缓存中的chrome 39
在IE中设置SELECT的高度 29
如何在chrome的noscript标签中显示html？ 28
中心子div在父div中 25
与Django一起提供favicon.ico.为什么settings.MEDIA_URL与django.views.generic.simple.redirect_to仅适用于开发环境？ 24
使用时锚定<a>标签在chrome中不起作用# 21
使浮动div具有相同的高度 19
难疑归档
是否可以将CSS应用于角色的一半？ 2717
可以(a == 1 && a == 2 && a == 3)评估为真吗？ 2438
在jQuery中添加表行 2331
为什么在单独的循环中元素添加比在组合循环中快得多？ 2175
垂直对齐图像旁边的文字？ 1881
如何在Linux中对文件进行符号链接？ 1865
将浮点数限制为两个小数点 1527
如何将字节数组转换为十六进制字符串,反之亦然？ 1313
JavaScript是一种传递引用还是按值传递的语言？ 1311
Promises和Observables有什么区别？ 1291