我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。
我怎么能在HTML中做到这一点，在代码的哪里，我需要把它(例如头)?我有一个。png徽标文件，我想转换为一个图标。
相关:HTML设置图像浏览器选项卡。
当前回答
实际上有两种方法可以在网站上添加图标。
< =“icon”铁路链接>
只需将以下代码添加到<head>元素中:
<link rel="icon" href="http://example.com/favicon.png">
大多数浏览器都支持PNG格式的favicons，除了IE <= 10。为了向后兼容，您可以使用ICO favicons。
注意，你不再需要在rel属性的图标前面加上快捷键了。来自MDN链路类型:
快捷链接类型经常出现在图标之前，但这种链接类型是不符合要求的，被忽略了，web作者不能再使用它了。
根目录下的Favicon.ico
来自另一个SO答案(@mercator):
所有现代浏览器(在Chrome 4、Firefox 3.5、IE8、Opera 10和Safari 4上进行了测试)总是会请求favicon.ico，除非你通过<link>指定了一个快捷图标。
你所要做的就是让/favicon。ico请求返回你的favicon。不幸的是，这个选项不允许你使用PNG图标。
另见favicon.png vs favicon.ico -为什么我应该使用PNG而不是ICO?
其他回答
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
请允许我为那些仍然困惑的人解释清楚。.ico文件往往比.png文件提供更多的透明度，这就是为什么我建议在这里转换你的图像如上所述: http://www.favicomatic.com/done 另外，在href中只是图像的位置，它可以是任何服务器的位置，记住在前面添加http://，否则它将不起作用。
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).
我找到的最好的一个是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个左右的谷歌结果，这是迄今为止最好的。
请使用下面的代码在标题部分你的索引文件。
<link rel="icon" href="yourfevicon.ico" />
我建议您尝试http://faviconer.com将您的。png或。gif转换为。ico文件。
您可以在一个. ico文件中创建16x16和32x32(用于新的视网膜显示)。
IE和Firefox没有问题
推荐文章
- iOS如何设置应用程序图标和启动图像
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 我的Windows应用程序的图标应该包括哪些大小?
