如何为网站添加浏览器标签图标(favicon) ?

我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。

我怎么能在HTML中做到这一点，在代码的哪里，我需要把它(例如头)?我有一个。png徽标文件，我想转换为一个图标。

相关:HTML设置图像浏览器选项卡。

当前回答

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

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

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

上面列出的

其他回答

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

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

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

上面列出的

我建议您尝试http://faviconer.com将您的。png或。gif转换为。ico文件。

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

IE和Firefox没有问题

我已经成功地为我的网站做到了这一点。

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

实际上有两种方法可以在网站上添加图标。

< =“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="icon" href="yourfevicon.ico" />

推荐文章