徽标,Favicon(Favorite Icon的简称) ,是指出现在浏览器地址栏、收藏夹或者导航条的图标。网页徽标不仅可以增加网页流量,而且可以美化博客外观,让读者很容易的识别出您的网页。下面是建立网页徽标的具体步骤。
1)通则
网页徽标的固定尺寸是16 x 16像素,并且文件名末是“.ico”。可以想象这么小的尺寸不能做成复杂的图片,所以设计的时候要用简单的图像或者文字。要确保徽标的颜色和您的博客的颜色是一致的,这样可以方便读者把您的徽标和网页联系起来。
2)使用Photoshop软件(您如果不使用Photoshop,可以跳过这一步)
使用Adobe Photoshop来设计徽标或许是最好的选择。但是标准的Adobe Photoshop不能处理“.ico”文件,所以,您需要先下载一个插件Windows Icon Photoshop Plugin。
安装好这个插件之后,您需要建立一个64 x 64像素的图像,设计好之后,修改图像的大小。您可以到图像尺寸菜单(Image Size)然后点击重复取样(Resample Image)——这样可以避免图像变模糊。接着把图像保存为16 x 16像素的“favicon.ico”就可以了。
3)使用微软画图工具和网络工具
徽标是一个非常简单的图标,就算是使用微软画图工具也应该可以设计得很好看。最简单的方法就是设计一个32 x 32像素的JPEG图像,然后通过网络服务“Favicon from Pics”把图像转换为“.ico”文件。
4)上传“favicon.ico”文件
“favicon.ico”文件做好之后,把它上传到您的网页。请确保该文件被放在根目录下面,即和Index文件在同一个地方。
5)修改Header
最后的一步是修改网页的Header,把下面的代码插入标签<head>和</head>之间:
-
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
再次强调这个代码只有当“favicon.ico”文件在根目录下面时才会生效。
备注:
其实,正确的方法应该还要添加以下代码:
-
<link rel="icon" href="/favicon.ico" type="image/x-icon">
6)测试
一切到这里应该都完成了,打开您的网页看看设计的徽标是否出现。收藏您的网页,打开几个工具条,看看效果如何,您如果觉得不满意,可以重新设计。
精博寄语:
1 原文:每日博客技巧,Daniel,How to create a favicon。
2 本文属于建博40个实用技巧系列。
3 精品博客有按照这个教程设计了一个徽标,上传到根目录以及修改主题的Header,并且还通过Favicon from Pics 验证,可是浏览器(IE7.0)和收藏夹就是没有显示,您如果知道原因,还请不吝赐教!(問題已經得到解決,詳情請看下面的評論。)
相关博文:
10 条评论
此事一直没有解决,精品博客的“精”字徽标还是无法显示。
精品博客的网页徽标的“精”字在FireFox浏览器下可以正常显示,但是在IE浏览器下还是无法显示。您如果知道原因,还请不吝赐教。
这个玩意Bodhi已经帮忙解决了,原来是图片的问题。
我这边是一直是可以的呀
@Poshi,你用的是FF浏览器吧?最早我自己弄的那个只能在FireFox浏览器下看得到。
@Young 不是的,我用的是IE,还有腾迅的TT吧,Opera也装了,不过没注意能不能看到,腾讯TT是可以看到的~~
我没有装FF
最后的一步是修改网页的Header
—————-请问这是在哪里修改的?具体描述一下路径好吗,谢谢。
@Mi, 路径如下:
wp-content==>themes==>您的主题==>hearder.php, 找个地方(比如某个 标签代码的下面)。
你写的不错,我是在专业网站上现场定做的,只要上传图片,然后下载,解压,上传,就可以了.
这样的话,只要一分钟就搞定网站徽标.
你好,你说的精品博客的网页徽标的“精”字在FireFox浏览器下可以正常显示,但是在IE浏览器下还是无法显示 我这里是这样的,我上传已经几天了,在FIREFOX 和 傲游,能够正常显示。但是在IE7。0 中却还是原来的微标。有点想不通。@Young: