我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。
我怎么能在HTML中做到这一点，在代码的哪里，我需要把它(例如头)?我有一个。png徽标文件，我想转换为一个图标。
相关:HTML设置图像浏览器选项卡。
当前回答
对于Chrome浏览器显示页面图标(favicon)，您需要从托管服务器检查您的网站，或者您可以在PC上开发和测试您的网站时使用本地主机。
其他回答
HTML标准的链接rel=icon
为了完整起见，这个标准是这样写的:https://html.spec.whatwg.org/multipage/links.html#rel-icon
The icon keyword may be used with link elements. This keyword creates an external resource link. The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface. [...] The following snippet shows the top part of an application with several icons. <!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> ... For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, the rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and no other ASCII whitespace).
我没有用过其他的，但https://realfavicongenerator.net/似乎是首选，这里还没有提到它。
它支持svg作为生成favicons的源图像，并提供了用于覆盖不同平台的图像的有用选项。此外，默认情况下，它不会生成大量的图像来向后兼容每个过时的平台。相反，它提供了一些选项来检查是否需要它们。
从开发者发给我的邮件来看，他们还计划增加对生成SVG favicons的支持，以及SVG主题敏感性，我认为这是一个非常棒的功能。
我找到的最好的一个是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=" "/>
<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个左右的谷歌结果，这是迄今为止最好的。
我建议您尝试http://faviconer.com将您的。png或。gif转换为。ico文件。
您可以在一个. ico文件中创建16x16和32x32(用于新的视网膜显示)。
IE和Firefox没有问题
通过在Apache的.htaccess文件[或Nginx的等效文件]中重命名/翻译每个HTTP请求，你可以让~所有浏览器发现一个favicon.png文件，如下所示:
# Universal favicon
RewriteRule ^(?:fav|apple-touch-)icon.*\.(?:ico|png)$ favicon.png [L]
然后，你唯一需要做的就是将这一行添加到HTML代码的头部部分:
<link rel="icon" href="favicon.png">
关于图像尺寸，我会使用我的webapp所期望的最高尺寸(例如Android的192px)，让剩余的尺寸由用户代理自动向下采样(这在现代视网膜设备中不应该是问题)。
推荐文章
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 为什么CSS选择器/ HTML属性首选破折号?
- 如何在标题属性中转义双引号
- Safari和Chrome桌面浏览器无法自动播放视频
- 自动高度
- 如何将JavaScript文件链接到HTML文件?
- 正确的mime类型的SVG图像嵌入字体
- jQuery的窗口大小调整
