如何为网站添加浏览器选项卡图标(favicon)? [英] How to add a browser tab icon (favicon) for a website?
问题描述
我如何在HTML中执行此操作,并在何处执行此操作在代码中我需要放置它(例如标题)?我有一个 .png
徽标文件,我想将它转换为图标。
相关:浏览器标签上的HTML设置图片。
< / p> link rel =icon>
只需将以下代码添加到< head>
元素:
< link rel =iconhref =http ://example.com/favicon.png>
PNG图标受大多数浏览器支持,但IE <= 10 除外。为了向后兼容,您可以使用ICO图标。
请注意,您不必先于图标
在 rel
属性中使用快捷键
。从 MDN链接类型:
在
图标
之前经常出现快捷键
链接类型,但这种链接类型是不符合的,被忽略,并且网络作者不能再使用它了。
favicon.ico
在根目录中
所有现代浏览器(经过Chrome 4,Firefox 3.5,IE8,Opera 10和Safari 4测试)都会请求
favicon.ico
,除非您通过< link>
指定了快捷图标。
$ b $所以你所要做的就是让你的网站的 /favicon.ico
请求返回你的图标。不幸的是,这个选项不允许你使用PNG图标。
另见 favicon.png vs favicon.ico - 为什么我应该使用PNG而不是ICO?
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.
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 beforeicon
, 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?
这篇关于如何为网站添加浏览器选项卡图标(favicon)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!