N002 关于Favicon图标



前几天突然意识到我的网站还差个网站小图标,也就是标签页或者收藏夹中可以显示在网站title前的小图标,于是乎开始了各种研究和尝试。以下是颇有成效的研究结果:

格式尺寸

据研究,常见的小图标为ICO格式,不过实际上这是历史遗留问题,或者说是针对旧版IE浏览器的格式。众所周知的是,旧版IE在很多兼容性上和功能性上都比其他主流浏览器(Chrome,Firefox,Safari,Opera)落后很多,而巨硬也尝试推出新的Spartan革自己的命。随着HTML5的推广,ICO格式因其局限性逐步被淘汰,应用范围(包括移动端)更加广泛的PNG格式开始成为主流。所以,使用新的PNG格式总不会有错。

尺寸问题取决于设备、平台和浏览器(甚至还要考虑各种版本)的综合选择,比如iOS 7的Retina屏幕的iPhone的(定语好长)Icon尺寸规格是120x120。因此,即使准备了16x16、32x32和64x64也是不够折腾的。最好的办法下面会讲到。

声明方式

关于声明问题,比较简单。当让不同的情况可能稍有不同,通用的声明语句如下:

<link rel="icon" type="image/png" href="favicon.png" sizes="32x32"/>

将这句话放进HTML文档的头部,然后就可以看到期待已久的favicon了。当然,前提是先完成下面这个最最重要的步骤。

生成图标

可以随便找一个喜欢的JPG格式图片,然后自己切成合适的大小,再转换成不同的格式和分辨率...这么麻烦的事只有设计师才会去做。

任何麻烦的要死的方法都是耍流氓。 ——默罕默德

如何花最少的时间,制作出匹配各种设备、各种平台和浏览器的favicon?

答案是使用Real Favicon Generator这个神器。上传图片后点几下鼠标,一包图片和一段代码就完美呈现了。生成的代码展示如下图(可以看出有种类齐全的适配方案):

<!--favicon generator-->
<meta name="theme-color" content="#ffffff"/>
<meta name="msapplication-TileColor" content="#00aba9"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<link rel="manifest" href="favicons/manifest.json"/>
<link rel="apple-touch-icon" sizes="57x57" href="../../favicons/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="../../favicons/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="../../favicons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="../../favicons/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="../../favicons/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="../../favicons/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="../../favicons/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="../../favicons/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="../../favicons/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" href="../../favicons/favicon-16x16.png" sizes="16x16"/>
<link rel="icon" type="image/png" href="../../favicons/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="../../favicons/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="../../favicons/android-chrome-192x192.png" sizes="192x192"/>

之前繁琐的流程全部由1次上传和1次点击取代,极大的提高了工作效率。当我发现这个在线工具的时候,脑海里只有一句话:这简直是大自然的馈赠。

参考文章

评论