关于网站图标favicon.ico

淡看江湖路经过一个多月测试,今天正式开放运行了。在我们的网站建设中,为网站打造一个契合网站主题的个性化标志则是必需的,这直接关系到能否成功地塑造网站的品牌。这从某些角度看仍在网站推广的范畴之内,而欲取得成功,不仅包括良好的页面设计、令人印象深刻的网站Logo,也包括网站图标favicon.ico

而网站图标favicon.ico则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。

但是有些朋友不会制作网站图标favicon.ico,不知道怎么部署,或者不知道网站图标favicon.ico到底做成多大合适,16*16?还是32*32?甚至是128*128

所以,谨以此文献给那些不知网站图标为何物的朋友们,希望大家的网站越来越精美。

一、图标介绍

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

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

二、部署方法

一般站长的做法,就是将网站图标文件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,那么ehefu推荐一个图标库给你,或许可以找到让你钟情的图标:
关于网站图标favicon.ico
地址:http://www.easyicon.net/language.zh-cn/

②、自己制作

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

当我们已经有满意的图片时,该如何制作成favicon.ico呢?其实,只要一个转换工具即可。
关于网站图标favicon.ico
地址:http://www.faviconico.org/

四、图标大小

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

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

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

Last modification:April 27th, 2019 at 09:38 pm
If you think my article is useful to you, please feel free to appreciate

4 comments

  1. 喃小柯

    wp后台说要放一个512*512的上去,然后我就放了个256*256……chrome一切正常

    1. ehefu
      @喃小柯

      大小只是影响加载速度而已,一般影响不大。

  2. 梁兴健

    我就是放在根目录就不管了,不考虑兼容性

    1. ehefu
      @梁兴健

      我也是丢在根目录,懒得折腾。

Leave a Comment