如何在浏览器的收藏夹和地址栏里显示个性图标-favicon.ico

个性图标的原意是favicon,全称为Favorites Icon,是一种后缀名为.ico格式的图标。.ico 是图像格式的一种,常见的图像格式还有jpg gif  png等

个性图标示例:

favorites-icon

为什么使用个性图标(favicon)?

从上面的示例我们可以看出,其可以让浏览器的收藏夹和地址栏中除显示相应的标题外,还显示指定的个性图标,使网站更专业。

如何制作Favicon.ico ?

  1. 利用绘图软件(Photosho Illustrator 等)制作一个32×32像素的个性图片;
  2. 将上面的图片转化成.ico图像格式,网上有很多在线转化工具可以使用,例如:Bitbug Icon转化工具

如何使用Favicon.ico ?

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件,如果没有,便到网站的根目录下寻找。
因此,在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可。

如果您需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,具体设置也很简单,在Html的<head>中添加如下的代码:

程序代码:
<link rel=”icon” href=”http://www.renniaofei.com/favicon.ico”>
<link rel=”shortcut icon” href=”http://www.renniaofei.com/favicon.ico”>

标签:
除非注明,本博客文章均为原创,转载请以链接形式标明本文地址
原创文章如转载,请注明:转载自 任鸟飞网页设计 [ http://www.renniaofei.com/ ]
本文链接地址: http://www.renniaofei.com/design/how-to-add-favicon/
引用通告地址 Trackback URL:直接在本文链接地址后添加 trackback/
本文短网址: http://bit.ly/9Qdi4M
任鸟飞

任鸟飞网页设计网创办者 主要关注网页设计,网站建设,图形图像设计。 Twitter @renniaofei QQ:29900684

2 条评论

  1. 左手烟 一月 4th, 2010   12:24 上午

    制作一个32×32像素。不是16像素的吗。

  2. 任鸟飞 一月 5th, 2010   12:01 上午

    感觉16像素太小了,看不清楚,我用32px的也挺好,没什么问题。

留下评论

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: