在地址栏添加个图标

很多网站,比如Google、Yahoo!都有一个好看的图标。

但是我没有,可我也想要有个。

招到个网站可以制作这样的图标,精挑细选了个好看的上传上去,马上就反馈给我了个制作成功的ICON了,你看看地址栏,那个蓝色的音符就是它帮我做好的图标了。

如果你也想要有个,来这里

首先,准备好一张你打算当作ICON的正方形的图片。

接着在这个页面里,点击“浏览”(黄色部分),选中你的图片。

然后点击Generate FavIcon.ico那个按钮。

icon1

稍等片刻,进入下面的页面就成功了。制作好的不仅仅有静态图标,还有动画图标(不过笨蛋的我没能实现动画效果)。

icon2

上面那个预览便是静态效果,下面的便是动态效果了。此刻,你还可以点击“Test in Browser”直接看看最终效果,该网站会提供很短的时间可以让你真实体会一下图标应用在网站上的效果。觉得满意了,便可以点击“Download FavIcon”下载该图标文件了。

打开下载的ZIP文件,里面的结构如下:

icon3

favicon.ico便是我们所需要的图标文件了,如果你不需要动态图标的话,那么把这个文件上传到网站的根目录,以WordPress为例就应该上传到虚拟空间下的WWW目录或者是Public_html目录下,再修改当前所使用的Theme主题的header.php文件。找到如下代码:

<head profile="http://gmpg.org/xfn/11">
中间若干代码
</head>

加上这段:

<link rel="shortcut icon" href="favicon.ico" >

使之成为:

<head profile="http://gmpg.org/xfn/11">
中间若干代码
<link rel="shortcut icon" href="favicon.ico" >  //这段建议加载所有代码的底部
</head>

刷新一下页面,便能看到效果了。

详细的使用说明请查看ReadMe.txt。

本文链接: http://www.soundghost.com/add-favicon-ico.html

相关日志

6 Comments

  1. Posted 2008年10月22日 at 下午 2:28 | Permalink

    这个动态的Favorite Icon不错。我也试试。

    weeper 回应:

    呵呵,就是很可惜我没能实现动画效果。太笨啦。

  2. Posted 2008年10月22日 at 下午 9:48 | Permalink

    有啊。我看到你的图标有时候动来着

  3. weeper
    Posted 2008年10月22日 at 下午 9:54 | Permalink

    你用的是什么浏览器?Firefox?我用马桶和Oprea这两个都不动的诶

  4. Posted 2008年10月23日 at 上午 9:54 | Permalink

    Firefox,在页面载入时是动的。

  5. Posted 2008年12月20日 at 上午 12:29 | Permalink

    我怎么早没有想到用这个插件捏?

    不过我看到很多Linux的网站都没有用插件。coolcode可以定义背景颜色吗?

  6. Posted 2008年12月20日 at 上午 1:57 | Permalink

    这我不清楚,默认是用主题的背景色的

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*