关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。

但是随着成员数量的增长,图标便成了页面的拖沓大户,严重拖慢了整体速度。经常有成员反馈页面加载太慢,经仔细检查发现,居然有部分成员的网站图标居然达到了140kb!你老这是要闹哪样啊?这玩意再大也没用啊!

所以,谨以此文献给那些不知网站图标为何物的大神们,希望能赶紧优化你的网站图标,为联盟做点贡献。

一、图标介绍

favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志,也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的。

除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon等。

关于网站图标favicon.ico那点事儿,你造吗?

 

二、部署方法

一般站长的做法,就是将网站图标文件favicon.ico放到网站根目录,就不管了。

其实,为了更好的兼容性,正确的做法应该是在header添加如下的META申明:

 

如果,你想展现个性,还可以弄一个动态的网站图标,申明方法如下:

当然,不是所有浏览器都支持这种申明,你可以先实际测试看看。

三、制作方法

①、懒人做法

如果你疲于设计,疲于PS,那么推荐你去彭亚欧同学推荐的图标库,或许可以找到让你钟情的图标:

关于网站图标favicon.ico那点事儿,你造吗?

地址:http://www.easyicon.net/language.zh-cn/

②、自己制作

个性,是一种生活态度,所以大部分人还是会选择自己设计一个网站图标。

当我们已经有满意的图片时,该如何制作成favicon.ico呢?其实,只要一个转换工具即可。受博友委托,特推荐一个他本人精心制作的网站图标转换网站:

http://www.faviconico.org/

关于网站图标favicon.ico那点事儿,你造吗?

虽说这种工具烂大街了,但作者很人性化的加上了批量转换和预览的功能,进一步满足多个站点的图标转换和预览需求,所以大家有网站制作需求的话,可以到这个网站去转换。

使用中有任何意见和建议都可以直接@作者吴谷

他的微博:http://weibo.com/googleblog

四、图标大小

很多人并不清楚,网站图标到底做成多大合适,16*16?还是32*32?甚至是128*128??

蛋疼的是,很多人会想当然的认为,这尺寸越大越清晰,展示起来越给力!于是就出现了前文所说的140kb的笑话。

根据我实际测试,超过32*32,不但效果没有明显改变,而且还会导致某些浏览器无法展示!之前的谷歌网站图标缓存服务器,超过16kb就不会缓存,而是直接展示默认的图标。而16*16和32*32的网站图标,实际展示在浏览器标签栏的效果也没有很明显的区别。

但是,受心理作用的影响,我依然固执的选择了32*32作为我所有站点的网站图标。这个大小是比较和谐的,既照顾了浏览器,也照顾了你的心理。大小一般也就4k多。

所以,对于网站图标的大小,张戈给出的建议是16*16或者32*32,再大是完全没有必要的!效果不见涨,还可能影响网站速度。

五、关于导航

最初,联盟导航用的是谷歌的网站图标API接口,在谷歌大姨妈之后,就不得不放弃了这个API,另寻他法。

偶然一次机会,让我找到了一位国内的大牛搭建的一个网站图标获取服务,速度比谷歌快,而且功能更强大,就一直沿用至今。

如果你的博客的友情链接,需要展示友链图标的,也可以用到这个API:

调用方法:http://g.soz.im/http://zhangge.net

更详细的介绍:http://g.soz.im/

当我发现有成员的网站图标居然达到140kb之后,我觉得应该找作者加一个图标大小的限制功能。作者非常热心肠,在我留言后不久,立马搞定了,非常给力:

关于网站图标favicon.ico那点事儿,你造吗?

所以,现在博客联盟导航图标现采用以下机制:

①、荣誉博客图标大小上限为16kb

②、其他博客图标大小上限为10kb

超过这个大小,将显示联盟默认图标。

温馨提示:

如果发现贵站显示的是默认图标,请检查大小是否超标,请及时改善;

如果图标大小合格,请检查图标文件是否放在网站根目录,或者是否在header加上了META声明;

如果以上确认无误还是显示默认图标,请使用作者设定的删除链接,来清理图标缓存:

例如:http://g.soz.im/del/?domain=http://zhangge.net  将后面的网址改成你的博客地址即可。

本文到此结束,希望这篇文章发布后,联盟导航中的默认图标越来越少!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:18   其中:访客  15   博主  3

  1. 梦轩丽人 6 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

    都是直接在网上生成的,懒得折腾

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      文章所说也是在网上生成啊。

  2. 热腾网 6 来自天朝的朋友 未知浏览器 Unknow Os 河北省石家庄市 联通

    动态图片不会做,不然我也搞个动态的图标。

  3. 瑾瑜 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市 中国科学技术大学

    以前搞过IE的Pin功能,所以图标是64*64的,一直用下来了,刚好超过张哥的上限,不好意思了。另外,考虑到有些手机浏览器收藏夹图标显示,16可能有点小了。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      没事呢,弄个32刚好合适。

      • 瑾瑜 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市 中国科学技术大学

        嗯,已经修改了,48*8,刚好小于10KB

  4. 我是来学习的 4 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 联通

    我都没有icon

  5. Phnomi 4 来自天朝的朋友 未知浏览器 Unknow Os 天津市 联通

    支持!

  6. 优美拍 3 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省荆门市 联通

    我就是直接放在网站根目录的,这样除了兼容性不好,还有其他的问题吗?

  7. 幻杀博客 5 来自天朝的朋友 谷歌浏览器 Windows 7 山东省潍坊市 联通

    把图标换大了

  8. 中国非织造网 0 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 电信

    学习了,正好需要知道尺寸的问题,谢谢

  9. 鲜活 3 来自天朝的朋友 谷歌浏览器 Windows 8 广东省湛江市 电信

    刚也换了一个fav

  10. 两天 3 来自天朝的朋友 谷歌浏览器 Windows 10 山东省临沂市 移动

    ico和gif站标能同时启用?

  11. 两天 3 来自天朝的朋友 谷歌浏览器 Windows 10 山东省临沂市 移动

    ico和gif站标能同时用?

  12. nwwolf 0 来自天朝的朋友 火狐浏览器 Windows 8 北京市 三信时代华北BGP互联节点

    你好我想问问你这个图标后面的文字:xxx的博客在哪里设置呢?

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      哪有什么xxx的博客

  13. asdf 0 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西南宁市 电信

    我见过的浏览器都是16*16的,所以我的网站一直都是用16*16。没用过别的。

  14. 安定 0 来自天朝的朋友 火狐浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心

    你说的:

    这两个是必须同时出现吗?

加载中,请稍候...