如何在地址栏增加小图标

最新推荐文章于 2014-10-04 13:30:00 发布

最新推荐文章于 2014-10-04 13:30:00 发布 · 325 阅读

标签

#地址栏图标 favicon.ico

综合其他专栏收录该内容

14 篇文章

订阅专栏

让地址栏显示个漂亮的与众不同的小图标，可以让你的网站更容易被人记住，但笔者始终认为这是个锦上添花的东西，况且，不同的浏览器或相同浏览器的不同版本对这个的支持都不尽相同。比如ie6下的地址栏根本不会出现小图标，360的浏览器或世界之窗等可以支持这个功能，但好像也和浏览器的某些设置有一定关系。闲言少叙，如何才能让地址栏出现小图标呢？

其实实现的代码很简单，如下：

======================【html】=========================

<head>

<title>天津市财政局预算编审中心</title>

</head>

======================【html】==========================

请相信，这样最容易实现。网上有很多个版本，我自己试验过无数，走了很多弯路，因为每个人的具体情况不一样，因此遇到的问题自然也不同。因此，建议读者严格按照此格式书写。<link rel="BOOKMARK"/>这一行可以删除，这行是为了在收藏夹里显示小图标用的。强烈建议图标的名字就叫favicon.ico.网上基本上只说一句，把favicon.ico放在网站的根目录即可，真的即可吗？？答案是否定的。举个例子，比如我的站点的首页为http://localhost:8080/wwwroot/index.jsp, wwwroot为此网站的根目录，那么favicon.ico应该放在哪呢？？？如果你觉得放在wwwroot下面，那你就太天真了。正确的答案是应该放在http://localhost:8080/ 所对应的目录下面。是不是很简单？？如果你认为这样，那你又错了。因为放在localhost:8080对应的目录里面，许多浏览器的地址栏上小图标也不会出现的。就是因为8080这个端口号。没错，就是这样的。

正确的作法是，不仅把favicon.ico放在localhost:8080之后，还要保证http://localhost/favicon.ico可以访问到这个小图标。只有这样，用360和世界之窗等浏览器访问你的站点时，地址栏才会出现小图标。对于端口号对地址栏小图标的出现产生的效应，几乎无人论及，笔者尝试了好多次，直到把tomcat的端口改为80后，才最终成功地在地址栏显示小图标。

注：小图标自己准备，让美工弄，不要自己随便弄个图片改扩展名，最好用16*16的。