站长必须懂得技能：给网站设置ICO图标

我们浏览网站的时候经常可以看到每个站都有自己的logo标志，在浏览器标签栏里面也会在网站titile前面显示一个小图标，既个性有漂亮
怎么做的呢？

效果：

如何制作？

1、准备一个图标制作软件
Icon是一种特殊的图形文件格式，它是以.ico 作为扩展名。
普通的图像设计软件无法使用这种格式，在线的制作工具很多，也可以下载本地的制作工具

2、确定“收藏夹”图标的规格
图标要256色或16色的16*16尺寸ico文件

3、设计一个属于您自己的图标
你可以将您的网站的LOGO做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之，它一定要是属于您自己的，并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为：favicon.ico(注意,需要命名为这个文件名方可)。可以制作的醒目些。
例如用一个本机上的图标文件改一下吧。从本机上搜索一个文件，复制到桌面。用Microangelo打开，修改成16*16，使用256色吧,另存为favicon.ico。

4、显示ICO图标
将ico图标文件（favicon.ico）上传到您的网站所在的服务器的根目录下
在head之间放置如下代码：

<link href="/favicon.ico" rel="Shortcut Icon">
<link href="/favicon.ico" rel="Bookmark">
<link rel="icon" href="/favicon.ico"/>

实测：支持 IE、Chrome、Sfaria、Firefox、Opera、世界之窗、360安全、360急速、遨游、猎豹 …

## 为何ico不显示？ 1、检查ico路径是否正确 2、检查图标是否符合要求 3、清除浏览器缓存、找到浏览器缓存目录把ico缓存删除（不同浏览器设置方式不一样）

友情提醒

①IE7高级选项“使用个性化收藏夹”要启用。
②图标要256色或16色的16*16尺寸ico文件。
③linkhref=”favicon.ico” rel=”shortcut icon”这个后面要斜杠关闭，无论你是否使用了不严格的DOCTYPE。
④IE要删缓存。
⑤刷新。加收藏。
⑥经过以上５步，运气好就成了，多数情况这个时候还是不显示图标，那就再来一步，重启IE。
⑦如果你很倒霉，以上６步都还不成，那就重启电脑吧。

下面给大家讲讲移动端的ICO

<!-- Android 主屏图标 -->   
<link rel="icon" sizes="196x196" href="/images/apple-touch-icon-152x152.jpg">
<!-- IOS 主屏图标 -->
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-76x76.jpg">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/images/apple-touch-icon-76x76.jpg">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/images/apple-touch-icon-120x120.jpg">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/apple-touch-icon-152x152.jpg">