大家浏览网页时经常看到域名前面会有一个logo的小图标，如下图，这一类图标被称为“ favicon ” ， 全称是“favorite icon”(早期开发人员的叫法，后来也就约定成俗这么用了，其实换个其他命名也是可以的)。
这类统称为ico格式的图标，以.ico后缀命名，通常用在两个地方：
1.网页顶部（浏览器标签栏左上角）；
2. 桌面应用程序的图标，比如PC端的微信。
支持格式：
windows应用： .ico格式或者.png、.svg格式
mac应用： .icn格式
一、常规操作方法：
在<head>和</head>中间引入图标样式即可
<link rel="icon" type="image/x-ico" href="./images/favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >
上面是引用的.ico静态图标，下面引入的是.gif动态图标
如果只是引用静态图标，下面一行可以不写
二、推荐做法：将favicon.ico放在网站的根目录下
有些网站你会发现<head/>里面完全不存在图标地址，这是因为他们把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 的图标
<link rel="icon" type="image/png" href="./images/favicon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./images/favicon32.png" sizes="32x32">
下面是一些平台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起来~
