在地址栏显示网站的图标

最新推荐文章于 2021-06-11 14:27:08 发布

转载最新推荐文章于 2021-06-11 14:27:08 发布 · 1.2k 阅读

文章标签：

#xhtml #html #浏览器 #ie

本文详细介绍了如何在网站中设置图标，包括上传图标文件、在HTML源文件中添加代码，以及不同浏览器环境下图标显示的注意事项。通过设置网站图标，可以提升用户的视觉体验并增强网站辨识度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在地址栏显示网站的图标
做法：
制作一个图标文件，大小为16*16像素。文件名为favicon.ico，然后上传网站根目录中。
在HTML源文件“＜head＞＜/head＞”之间添加如下代码：
＜link rel="Shortcut Icon" href="favicon.ico"＞ IE地址栏前换成自己的图标
＜link rel="Bookmark" href="favicon.ico"＞可以在收藏夹中显示出你的图标
如果是myie不用加以上代码地址栏也可以显示，自己的图标，文件名必须是favicon.ico。

<head>

<link rel="shortcut icon" href="http://i1.social.microsoft.com/Forums/GlobalResources/images/Msdn/favicon.ico" type="image/x-icon" />

</head>

这个图标叫做favicon，可以用ico和png格式的图片，它会出现在浏览器的地址栏，添加收藏之后的地址前面也是这个图标，快捷方式也是这个图标，基本上现代的浏览器都支持。

还有一些注意的地方，HTML和XHTML里是不一样的，在HTML里可以用下面的语法中的一种：

<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">

<link rel="icon" type="image/png" href="http://example.com/image.png">

<link rel="icon" type="image/gif" href="http://example.com/image.gif">

在XHTML中的图片地址可以写相对地址了：

<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />

<link rel="icon" type="image/png" href="/somepath/image.png" />

<link rel="icon" type="image/gif" href="/somepath/image.gif" />