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

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

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

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

一、图标介绍

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

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

二、部署方法

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

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

<head>
...
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
...
</head>

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

<link rel="icon" href="/favicon.gif" type="image/gif" />

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

三、制作方法

①、懒人做法

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

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

②、自己制作

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

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

http://www.faviconico.org/

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

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

他的微博: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 之后,我觉得应该找作者加一个图标大小的限制功能。作者非常热心肠,在我留言后不久,立马搞定了,非常给力:

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

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

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

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

温馨提示:

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

开发小程序没那么难,看完这5个套路你就全懂了

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

2.6K5
来自专栏js编程在工科课程中的简单应用

2.2.6 第三方js类库

1260
来自专栏娱乐心理测试

vue开发类似淘宝商品评价页面(星级,上传多张图片)

最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:

1652
来自专栏程序员宝库

Chrome 常用插件 前端-后端-产品

俗话说chrome没有插件只有四成能力,可见插件才是chrome的牛逼之处。 前提:要想直接使用Google的应用商店需要先本地添加: 谷歌访问助手插件:(下载...

43716
来自专栏伪君子的梦呓

推荐几个油猴脚本

油猴,也就是 Tampermonkey 是我每一台电脑都会安装的东西,也是我会给熟人介绍和安装的东西。没什么好说的,就是好用。

4.7K2
来自专栏腾讯防水墙

验证码前端性能分析及优化实践

在越来越注重用户体验的趋势下,验证码作为一种自打诞生以来就被贴上“多余”标签的产品,更应该给用户提供良好的体验。本文以滑动验证码作为切入点,分析了验证码可能存在...

1.4K9
来自专栏ThoughtWorks

展望2016,REACT.JS 最佳实践 | TW洞见

今日洞见 译者:ThoughtWorks-吕靖,译自 Péter Márton:React.js Best Practices for 2016。 本文所有内容...

3909
来自专栏葡萄城控件技术团队

【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效...

1292
来自专栏静晴轩

Html<a>标签href的困惑记载

近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

4675
来自专栏程序员的诗和远方

写个小编辑器娱乐自己

上周有两天感冒低烧了,躺在床上昏昏沉沉听罗胖的发布会,说到《黑天鹅》书中的一句话:现代社会给我们的双重惩罚是,既让我们衰老的更快,又让我们活得更长。深有同感,...

3407

扫码关注云+社区

领取腾讯云代金券