虽然随着移动互联网的兴起，PC网站和移动网站访问量都下降，但是网站还是需要有一个高大上的favicon图标的，今天分享一下关于favicon图标的一些常见问题。
Favicon最早于1999年出现在IE5上，并且在几个月之后由W3C纳入标准，作为代表网站的小图标。
随后，绝大多数的桌面端浏览器跟随这一趋势，开始以各自的方式使用Favicon。为网站随便做个小图标嘛，一点都不炫酷，能有多复杂？事实真的如此嘛？
一、图标介绍
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略 logo 标志，也可以说是网站头像,目前主要的浏览器都支持 favicon.ico 图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico 是必不可少的。
除此之外，标签式浏览器甚至还有不少扩展的功能，如 FireFox 甚至支持动画格式的 favicon 等。
二、部署方法
浏览器调用favicon的原理是首先在网页所在目录寻找favicon.ico文件，如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。
如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页Html文件中做设定了，具体设置也很简单，在Html中的<head>部分加入如下的代码：
<link rel=”icon” href=”favicon.ico” mce_href=”favicon.ico” type=”image/x-icon”> <link rel=”shortcut icon” href=”favicon.ico” mce_href=”favicon.ico” type=”image/x-icon”>
如果，Firefox还支持GIF动画格式的Favicon，你想展现个性，还可以弄一个动态的网站图标，首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:
<link rel="shortcut icon" href="favicon.ico" > <link rel="icon" href="/favicon.gif" type="image/gif" >
当然，不是所有浏览器都支持这种申明，你可以先实际测试看看。
三、制作方法
当我们已经有满意的图片时，该如何制作成 favicon.ico 呢？其实，只要一个转换工具即可。特推荐一个网站图标转换网站：http://www.faviconico.org/
作者很人性化的加上了批量转换和预览的功能，进一步满足多个站点的图标转换和预览需求，所以大家有网站制作需求的话，可以到这个网站去转换。
作为网站站长，应该知道这个图标对应的就是 favicon.ico文件，通常情况下，这个文件大小是 16x16像素。
做为一个不错的选择，特别是如果您想用心经营您的站点，这个图标不可缺少，这不仅是网站标志，更是访客对您网站的第一印象和定位。比如本站的 地址栏图标 尺寸设计的是16x16，一看相信您就知道，是专门针对 ico 而制作的网站，而比如Google首页展示的：
不过有的站长为了方便起见，也会使用尺寸为32x32的图标，或者 48x48的图标，由于这个图标是可以自适应的，所以在地址栏，收藏栏显示的时候都是支持并且正常的。
四、图片格式
強烈推使用.ico而不是使用png或者gif，经过查证，只有.ico格式的文件支持最广泛和全面，同时，这个文件最好命名问favicon.ico。
所有的浏览器，包括IE5，都支持ico文件，gif、png等都没有ico支持范围广，如果有favicon.ico，服务器的404错误会有友好返回，我们测试了所有现代浏览器（测试了 Chrome 4, Firefox 3.5【火狐】, IE8, Opera 10 and Safari 4），发现他们都会请求favicon.ico，这样错误页就会有对应图标显示，所以最好用ico！ 一个.ico文件可以同时满足多个尺寸的需求，不需要每个尺寸单独生成一个文件
如果不清晰怎么办
这图标是在太小了。不过也有例外，那就是标志性的标志标记文本。例如,维基百科使用公认的“W”而Facebook使用其众所周知的「F」。
这些网站图标们实在是太小了导致了每个像素都被计算在内。有时候直接把一个完整的logo缩小下来很容易造成图标变得很模糊。所以，制作这些网站图标时往往都是按照像素级别去设计。
这是Facebook的logo被整合为32*32像素时的一部分，边缘混淆而模糊，再一次证明像素级别的设计是很有必要的。
在编辑图标时，我喜欢用位图软件编辑。例如Photoshop或者Pixelmator就可以做出很棒的效果。我通常先调整我的大标志到64×64px,因为这是我需要的最大的图标大小。接着我使用铅笔工具编辑一次，知道像素图标看起来很脆。这是一个非常繁琐的过程,可能需要一两个小时,但它会产生最好的结果。
一旦我把满意的64×64px图标做出来，我会按照原来的方法继续做出32×32, 24×24和 16×16的图标。下面是各尺寸对应的用途：
64×64
Safari阅读列表和Windows网站图标
24×24
固定在IE9
32×32
高DPI或视网膜显示屏往往会用到这个尺寸的图标
16×16
在各种浏览器中最常用的尺寸大小
你可能会发现要得到这些小图标，通常通过调整64×64的就可以了，但往往会有更多的地方需要用到像素级别的编辑。记住如果你想调整这些小图标的alpha值也是可以的。几乎所有当下使用的浏览器都支持透明小图标。
推荐一个网站：http://www.xiconeditor.com/
使用X-Icon编辑器可以很好地转换之。这是一个免费的web在线工具，我们上传自己的图像然后导出合适大小的图标。步骤非常简单，跟着该网上的步骤指示就OK了。
五、图片大小
A：标准尺寸应该是16×16吧。
B：好象什么时候标准更新为32×32~
C：视网膜屏幕开始流行了！现在应该用64×64！
D：以上答案都是扯淡。
答：D。Favicon.ico的格式最初是由微软和其他一系列厂商共同制定标准。微软建议使用16×16、32×32 和 48×48。是的，没错，一个ICO格式文件可以包含多个图片哟~
桌面浏览器中经常在选项卡中使用Favicon，在标准的显示器上，16×16的分辨率就够看了：
截至目前，16×16 的Favicon.ico 在谷歌浏览器的标签中，看起来还很不错。
可是，16×16 的Favicon.ico添加到桌面上就不好看了。
将16×16 的Favicon.ico添加到任务栏的效果。
16×16 的Favicon.ico 添加到桌面的效果，并不理想。
所以，当Favicon包含多个图片之后，展示效果会好很多。
当使用包含16×16，32×32以及48×48 多尺寸图片的Favicon之后，任务栏的显示效果就好多了，看起来更像是本地应用了。
包含16×16，32×32以及48×48 多尺寸图片的Favicon 应用到桌面上，效果完美。
很多人会想当然的认为，这尺寸越大越清晰，展示起来越给力！经过测试，超过 32*32，不但效果没有明显改变，而且还会导致某些浏览器无法展示！之前的谷歌网站图标缓存服务器，超过 16kb 就不会缓存，而是直接展示默认的图标。而 16*16 和 32*32 的网站图标，实际展示在浏览器标签栏的效果也没有很明显的区别。
建议是 16*16 或者 32*32，再大是完全没有必要的！效果不见涨，还可能影响网站速度。
当我们深入探讨Favicon的时候，始终绕不过Favicon.png这个文件，人们一直对它心存疑虑。它究竟是什么？
A：它是为那些不支持Favicon.ico这种文件而生的图标，比如Firefox？
B：一个高分辨率的图标。要知道，高分辨率的屏幕越来越多了。
C：这上一个历史遗留的产物。现在有更加现代的图标替代它。
D：well，这是一个非常复杂的事儿。
答：D。随着HTML5的推行，Favicon.ico 逐渐显得不那么有用了。不同大小属性的图片可以被同一个图片的不同版本所替代，而PNG格式图片正好可以胜任。
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
六、favicon.ico无法显示的问题
如果你按照上面步骤做完，理论上是不会出现无法显示的问题，那么就需要进行排查：
1、将你做好的favicon图片文件上传至你网站的根目录下
2、你的favicon文件是否命名为favicon.ico；
3、伪静态问题，.htaccess配置文件修改为
4、顶级域名跳转的配置所致
5、在head之间加以下代码
<span style="white-space:pre"> </span><link rel="”shortcut" icon”="" href="”ico地址”/"> <span style="white-space:pre"> </span><link rel="”shortcut”" href="http://www.lituanmin.com/litm/”/favicon.ico”" /> <span style="white-space:pre"> </span><link href="”ico地址”" rel="”shortcut" icon”="">
七、在移动平台上我们需要什么样的格式？
根据AmartInsights的数据显示，超过26%的网站流量是来自智能手机和平板，那么在未来，我们需要使用什么样的格式呢？
A：当然是Favicon.ico，截至目前它已经存在15年了。
B：PNG格式图标。你都说了要继续探讨这个了~
C：Apple Touch Icon
D：反正无论如何都不会在ABC中列出正确答案……
备注：在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。Apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。
答：D。你需要PNG 图标，也需要Apple Touch Icon，还需要Windows 8 磁贴，最重要的，你需要一个名为 browserconfig.xml 的文件。
比起传统的桌面端浏览器，移动端平台更加庞杂，屏幕尺寸和分辨率也差异巨大，iOS和Android两家割据，并不是像互联网刚刚兴起的时候WIndows一家独大之时那么容易推广标准。所以，你不用期待一个移动端Favicon 应付所有需求。
问：那么PNG格式应该使用哪些尺寸呢？
A：96×96，Google TV
B：196×196，Android和Chrome
C：228×228，Coast，Opera
D：以上全部
答：D。当然，这还不是全部。你还需要为老版的Opera的快速拨号界面准备 160×160 尺寸的图标，而Chrome 网上商店的图标还需要128×128 尺寸的图标。所以，在选取尺寸的时候需要考虑它到底要支持哪些平台。
问：Apple Touch Icon 的尺寸应设定为多少？
答：早期的时候，你只需要准备57×57的图标就行，但是现在，你需要制作高达152×152 的图标。
在iPhone发布之后，Apple Touch icon的尺寸发生过3次变化。
首先是iPad的发布。它的屏幕尺寸比iPhone大，图标尺寸也稍有差别。
然后是Retina屏幕。这时候屏幕的像素密度是之前的2倍。
再就是iOS7的发布。扁平化之后，图标在iPhone和iPad上略有不同。
这样一来，iOS上图标尺寸就有了2x2x2=8种规格：
老版的57×57的Apple Touch icon 在视网膜屏幕上的效果很模糊。
152×152 的Apple Touch icon 在视网膜上效果很清晰。
如果你没有猜对Apple Touch icon的正确尺寸，不要自责。在全球最靠前的5000个网站中，能用对Apple Touch icon的不到4%。
有人可能会说，制作8个版本的Apple Touch icon没有必要，但是你至少需要备好一个152×152的图标。这能确保运行iOS7的视网膜屏幕iPad能够正常显示图标，而分辨率较低的iOS设备也能按比例缩小，显示效果也不会差。
八、有必要在HTML中声明Apple Touch icon么？
A：不知道。
B：有必要。否则iOS怎么能识别它们？
C：没必要。按照Apple的习惯来放置图标就够了，iOS设备无论如何都会找到它们的。
D：没有必要，但是……
答：好吧，答案还是D。考虑到还有其他平台（Andorid，WP等）也会用Apple Touch icon，所以最好还是为之作出声明。
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
比起高分辨率的PNG图片，Apple Touch icon更流行也更加常见，诸如Android Chrome这样的移动端浏览器也倾向于使用它们。因此，声明它们会相对更安全，以备其他兼容的设备和浏览器随时能够访问它们。
九、怎样才能为 WIndows 8 平板设计一个磁贴？
A：windows 8 平板是个啥？
B：Favicon.ico，这是鲍尔默（微软前CEO）的遗产。
C：使用Two msapplication-TileColor 和 msapplication-TileImage meta 标签.
D：browserconfig.xml
答：对于Windows 8.0 和IE 10，答案是C；对于WIndows 8.1和IE 11，答案是D；当然，A差不多也可以说是对的，哈哈~
Windows 8.0 中通常是这样声明的：
<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">
在Windows 8.1 和 IE 11 中的磁贴则通常是这样声明的：
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>
新的Metro Ui拥有一系列全新的设计规范，比如内置的APP都使用了“white silhouettes”。
Windows 8 桌面的网站磁贴。
问：150×150 尺寸的Logo 磁贴到底要用多大尺寸的？
A：都说了是150×150的，还会有什么其他的尺寸？
B：怎么不能是其他尺寸的？
答：B，270×270。微软推荐使用更大的尺寸，以兼容更高分辨率的屏幕……
恭喜你！整个测试到此结束，你都答对了么？
这些问题看起来很简单，但是实际上真正深究的话，还是非常刁钻的。单纯使用Favicon.ico的时代已经过去了，虽然还有网站沿袭旧有的习惯，但是常常会导致荒谬的结果。我们可以耗费很长时间来精心雕琢响应式网站，但是如何只是内置一个57×57的 Apple Touch icon，那么网站也只能是在老旧的设备上正常显示。
为移动时代而生的Favicon生成器
在今天，制作一个符合多平台需求的Favicon是复杂而艰难的。你当然可以在网站根目录中内置一个老派的Favicon.ico，一个32×32的PNG图标和一个152×152的Apple Touch icon。但是，你也可以内置足以应付任何分辨率屏幕的一组图标，只是这样一来，工作量就非常恐怖了。
这个时候，你需要RealFaviconGenerator。和传统的Favicon生成器不一样，RealFaviconGenerator主要满足2大需求：编辑图标，和生成代码。
不同的平台使用截然不同的界面，所以需要为不同的平台生成不同的图标。RealFaviconGenerator自然不是在线的PS，但是RealFaviconGenerator通过设置可以帮你设计出符合不同平台需求的图标。比如，你可以为iOS设备生成带不透明背景的图标，以及符合Windows 8的白色图标。
RealFaviconGenerator 编辑器
主要生成图片和相应的HTML代码，其中主要覆盖以下平台：PC/Mac，iOS，Android，Windows 8 等。
可用的图片和HTML代码
比如，当你提供一个高分辨率的图标，简单几个点击就可以生成如下图标：
总而言之，在RealFaviconGenerator的帮助之下制作Favicon和10年前一样方便快捷。
ico在浏览器上看总是很模糊，不知道具体的尺寸。