为你的博客添加favicon图标

不知道什么叫favicon:mrgreen: 恩,我们可以理解为网站的迷你Logo,恩,不知道什么是Logo,Logo就是网站的标志,这样推理的话,favicon就是网站的迷你标志,没错了,其实所谓favicon就是各网站在浏览器地址栏前的小图标,比如本站的favicon就是一小黄色的五角星,额,看到了没?如果你用的是IE6的话,就不用找啦,因为IE是不显示网站favicon的,所以我强烈建议你使用firefox,说了这么多废话,还不如Google下,搞清楚了什么是favicon,那favicon怎么制作呢?

favicon并不是一般的位图文件,故其生成要借助一些特殊的软件,不过还好,Internet的在线生成功能网站总能让人省去很多的麻烦。首先我们用photoshop或是其他的制图软件制作出网站的favicon图像,到导出为gif或png格式,建议导出为png格式,因为png格式清晰度更高点,当时要注意的是,我们这里制作的图像文件的尺寸只能为16X16,或是32X32,因为favicon的规定尺寸为16X16。

制作完了我们的图像文件,接下来的工作就能交给在线生成网站完成了,常见的favicon在线生成网站有:

直接导入我们刚刚制作的图像文件,然后按照提示下载生成的favicon图标到你的本地电脑上。

但接下来我们要怎样让这favicon图标应用到我们的网站上呢?其实很简单,把刚刚制作的favicon图标命名为favicon.ico,上传到你的博客空间,然后在你的博客风格头部的<head>和 </head>之间加上:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>,当然这种段代码说明你的favicon存在你的网站的跟目录,如果图标并不是存在在根目录的,可直接更换其绝对或相对连接地址就行。

好了,现在刷新下是不是能看到你网站的“迷你Logo”了? :shock:

此篇文章由 housne 发表于 2007年11月5日,点击此处发表评论,或者订阅本文

« »

13 Comments»

  1. Jack Park 发表于 2007年11月5日

    特别需要这个,转了转了。。不错

  2. Qiu Xianli 发表于 2007年11月5日

    IE7可以查看Favicon IE6记得好像也可以吧?

  3. housne 发表于 2007年11月5日

    @IE7应该行,IE6肯定不行

  4. niuhuifei 发表于 2007年11月5日

    我比较喜欢“装死有害健康”的图标,所以我一不小心跑到这里,但不能装死 :cry:

  5. kerby 发表于 2007年11月5日

    我有一些建议哈,housne,

    首先是标题,SPace这样不妥吧?space是一个单词,Space才对啊,你把前两个字母大写感觉像是S Pace了 :mrgreen:

    还有你的favicon是个什么图形呢?纠缠? :?:

  6. housne 发表于 2007年11月6日

    @kerby 大写前面的P是为了设计上的美观,如果是小写的话,那么P就会下沉,这样的话,Space整个单词好像是由p这一字母来支撑,看起来不稳.favicon是两个连起来的半圆,看起来有点H的感觉,而且两个半圆加起来正好是一个O,不过还是要谢谢你的建议!

  7. 大尾巴狼 发表于 2010年2月16日

    哈哈 很实用 转了 转了

    PS1:该方法如果没有效果 可以把href=的连接方式需要改成
    <link rel="shortcut icon" href="/images/favicon.ico” type=”image/favicon.ico”>

    PS2:IE下无法显示ICO的解决方法
    (未经测试,据说是在IE7下有效果)http://eisenme.cn/?p=1276

  8. timberland sale 发表于 2010年2月19日

    不过总觉得这个东西不是很适合网络习惯 包括即将生效的 .中国

  9. 发表于 2010年2月22日

    ,,春哥信徒,前来路过!

Trackbacks & Pingbacks

  1. I am VIP » Blog Archive » 为你的博客添加favicon图标(转)
  2. 让WordPress主题风格更适合自己 | BlueFox Zone
  3. 为你的博客添加favicon图标 « 大尾巴狼的自留地

Leave a Reply

称呼//Name (必填)

邮箱//Email (必填)

网站//website (选填)