如何在浏览器的收藏夹和地址栏里显示个性图标-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”>

2 Comments

  1. 左手烟 says:

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

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

无觅相关文章插件,快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates