网站图标favicon.ico-优快云博客

本文链接：https://blog.youkuaiyun.com/caoning315629/article/details/80982841

一、图标介绍

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

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

二、部署方法

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

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

XHTML
 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
        <head> 
       
        ... 
       
        <link  
        rel 
        = 
        "shortcut icon" 
          
        href 
        = 
        "/favicon.ico" 
         /> 
       
        <link  
        rel 
        = 
        "bookmark" 
          
        href 
        = 
        "/favicon.ico" 
          
        type 
        = 
        "image/x-icon"　 
        /> 
       
        ... 
       
        </head>

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

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

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

三、制作方法

①、懒人做法

如果你疲于设计，疲于 PS，那么推荐你去图标库，或许可以找到让你钟情的图标：

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

②、自己制作

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

当我们已经有满意的图片时，该如何制作成 favicon.ico 呢？其实，只要一个转换工具即可。

http://www.faviconico.org/

四、图标大小

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

很多人会想当然的认为，这尺寸越大越清晰，展示起来越给力！

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

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

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