我一直在一个网站上工作，我想在浏览器标签中添加一个小图标。
我如何在HTML中执行此操作，并且我需要在代码中放置它（例如头文件）？ 我有一个.png标志文件，我想转换成一个图标。
相关： HTML在浏览器选项卡上设置图像 。
I've been working on a website and I'd like to add a small icon to the browser tab.
How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .png logo file that I'd like to convert to an icon.
Related: HTML set image on browser tab.
最满意答案
实际上有两种方式可以在网站上添加一个图标。
<link rel="icon">
只需将以下代码添加到<head>元素：
<link rel="icon" href="http://example.com/favicon.png">除了IE <= 10，大多数浏览器都支持 PNG图标。 为了向后兼容，您可以使用ICO favicons。
请注意，您不必在shortcut rel属性中再次出现icon 。 从MDN链接类型 ：
shortcut链接类型通常在icon之前被看到，但是这种链接类型是不合格的，被忽略， 网络作者不得不使用它 。
favicon.ico在根目录下
从另一个SO答案 （由@mercator ）：
所有现代浏览器（使用Chrome 4，Firefox 3.5，IE8，Opera 10和Safari 4进行测试）将始终请求favicon.ico除非您通过<link>指定了快捷方式图标。
所以你所要做的就是让/favicon.ico请求返回你的网站返回你的网站。 不幸的是，此选项不允许您使用PNG图标。
也可以看看：
favicon.png vs favicon.ico - 为什么要使用PNG而不是ICO？There are actually two ways to add a favicon to a website.
<link rel="icon">
Simply add the following code to the <head> element:
<link rel="icon" href="http://example.com/favicon.png">PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.
Note that you don't have to precede icon in rel attribute with shortcut anymore. From MDN Link types:
The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.
favicon.ico in the root directory
From another SO answer (by @mercator):
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you've specified a shortcut icon via <link>.
So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn't allow you to use a PNG icon.
See also favicon.png vs favicon.ico - why should I use PNG instead of ICO?
更多推荐
发布评论