Favicon二三事

Favicon是favorites icon的缩写,亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)。Favicon是与某个网站或网页相关联的图标。网站设计者可以多种方式创建这种图标,而目前也有很多网页浏览器支持此功能。浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前。

比较直观的就是看图,比如我这个博客的favicon就可以在下面两个地方看到。

地址栏

书签栏

W3C对于Favicon有这样的建议,有兴趣的可以去参考一下。

今天我想谈的主要是Hexo这个轻博客如何添加Favicon的问题。

其实Hexo已经支持Favicon了,在themes/light/layout/_partial/head.ejs里,你可以找到<link href="<%- config.root %>favicon.png" rel="icon">这样一句,想要自己的blog显示Favicon,只需要把相应的文件放在source文件夹内即可。

但是实际使用中,按照默认的favicon设置可能会出现一些麻烦,所以我强烈建议使用.ico格式的favicon,你要做的就是将<link href="<%- config.root %>favicon.png" rel="icon">修改为` <link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">

使用.ico的好处大约有这样两点

  • 大多数的favicon制作网站都使用.ico格式输出
  • 使用.ico格式方便支持retina分辨率

制作favicon的网站我个人比较推荐这个,因为它支持32×32输出,同时界面比较美观。

而关于如何支持retina,这里有一篇很详细的文章,如果你懒得看的话,我可以把中心思想总结给你:

请购买这款软件

以上。