大家浏览网页时经常看到域名前面会有一个logo的小图标，如下图，这一类图标被称为“ favicon ” ， 全称是“favorite icon”(早期开发人员的叫法，后来也就约定成俗这么用了，其实换个其他命名也是可以的)。

这类统称为ico格式的图标，以.ico后缀命名，通常用在两个地方：

   1.网页顶部（浏览器标签栏左上角）；

   2. 桌面应用程序的图标，比如PC端的微信。

支持格式：

windows应用： .ico格式或者.png、.svg格式

mac应用： .icn格式

一、常规操作方法：

在和中间引入图标样式即可

上面是引用的.ico静态图标，下面引入的是.gif动态图标

如果只是引用静态图标，下面一行可以不写

二、推荐做法：将favicon.ico放在网站的根目录下

有些网站你会发现里面完全不存在图标地址，这是因为他们把favicon.ico的文件发在了服务器根目录下，一旦网站读取不到页面上的图片，就会去服务器根目录下读取.ico文件。

这里我们只需要在访问域名后面加上https://XXX/favicon.ico就可以看到对应的图片了。

所谓根目录，就是网站首页文件所在的目录，通常是index.html所在的目录

三、懒人式操作方法

现在网站顶部已经支持png、svg格式的文件。

一般只需要用两张16*16px和32*32px尺寸的png或者svg即可，以保证普通屏幕和2K、4K高清屏幕都能看到一个比较清晰的图标。这样文件体积更小，访问速度更快。

常用的这几种场景分辨率用到的尺寸为 256*256 48*48 32*32 16*16 的图标

下面是一些平台favicon最佳尺寸列表：

   ◼︎  绝大多数桌面浏览器：16×16, 32×32以及尽可能大

   ◼︎ Android Chrome：192×192

   ◼︎ Google TV：96×96

   ◼︎ 其他平台自己可以找找文档，查查资料。

ico格式和jpg、png的区别

ico图标是用多张png图片合成的，可以根据不同的需求显示不同的尺寸。

如何制作一个自适应尺寸的ico图标

我们可以保存多个尺寸的png图片，通过工具，把他们压缩到一起。这样，就能得到一个可以自适应大小的 ico 文件了。

推荐工具：

1.免费在线icon生成器：https://realfavicongenerator.net/  无需下载安装

2.免费 Icon 编辑器Greenfish Icon Editor Pro，制作过程也很 easy   下载链接地址：https://greenfish-icon-editor-pro.en.softonic.com/  

2.Axialis IconWorkshop    官网下载链接地址（免费30天）：https://www.axialis.com/download/iw.html  

3.facivon.htmlkit.com  这个只支持单个，无法合并

工具一截图

制作完成测试一下

点击favicon.ico图标，右键预览，可以看到如下图右边显示，favicon.ico里面有大中小三个图标。

动手操作一遍，get起来~