如何在地址栏加上网站的标志、LOGO图片

最新推荐文章于 2021-06-04 00:51:22 发布

kyrin_云中鹤

最新推荐文章于 2021-06-04 00:51:22 发布

阅读量4.2k

点赞数

分类专栏： web开发

web开发专栏收录该内容

60 篇文章 0 订阅

订阅专栏

第一步：首先你必须要制作一个看起来既清楚又容易辨识的.ico格式的小图片。

我们将图标的大小定义为16x16 像素。此外在制作图形文件的时候，你可能需要把色盘设定成只使用标准的 16 色 Windows 色盘，这样做出来的图形才会在各种配置的机器上看起来都是一样的。记得文件名是固定的，要叫做“favicon.ico”。这个http://www.bitbug.net/网页里有最快捷的制作favicon.ico的方法。

第二步：把制作好的 favicon.ico 文件上传到你的网站根目录去。

例如你的网址是：http://www.baidu.com那么你的 favicion.ico 就应该被放在下面这个URL下http://www.baidu.com/favicion.ico
每当有网友要把你的网站“加入收藏”的时候，IE 浏览器便会到你的网站根目录去寻找看看有没有favicon.ico这个文件，如果有的话，这个文件就会被用来当作书签上面的图示了。但是如果你没办法把文件上传到上面所说的根目录怎么办？没关系，你可以在网页源码的 <HEAD>标签里区里面加上下面的设定：

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http://www.baidu.com/favicon.ico">
<TITLE>My Title</TITLE>
</HEAD>

记得要把上面的http://www.baidu.com/favicon.ico代换成你自己的 URL 。使用这个做法的话，就不一定要把图形文件放在网站的根目录下面了，你可以放在任何位置，甚至直接连结到其他网站上面的图形文件也可以，而且图形文件的文件名也不一定要叫做 favicon.ico，可以自己随便取。不过要注意的是使用这个做法的话，只有在网友把有加入上面 HTML 语法的页面加入书签的时候才会有作用。

大功告成！只要有网友将你的网站加入收藏夹中，你的 logo 就会出现在收藏夹目录里面了。不过有一点请记住：你的 logo 在网友还没将你的网站加入书签以前是不会被看见的，而且有些免费网页空间并不支援 ico 图形格式。

如果你favicion.ico已经传到你网站空间的根目录下了，依然不显示的话，那你就关闭浏览器，重新打开空白的浏览器，找到浏览器的“工具”，然后“删除浏览的历史记录......”，再打开你的网站，就可以了。我试过了，可以的！

<LINK href="kei.ico" rel="Shortcut Icon"> (请将kei.ico改为你对应的图片名称)
这段代码是将ie地址栏前的图标换成自己的icon；
而
<LINK href="kei.ico" rel="Bookmark"> (请将kei.ico改为你对应的图片名称)
是将收藏夹中图标换掉。

或者

这是我在百度云测试的效果：