favicon.ico介绍

背景：今天在群里解决群友问题时，对favicon了解不够深入，错误了理解群友的意思。实在惭愧，误人子弟了。后来测试和整理，记录一下

介绍

favicon是Favorites Icon的缩写，代指的是一个网页标题左侧的图标。抬头看一下当前文章标题，左侧的那个大C就是csdn的favicon.ico。

.ico是一种图片格式，通常用于网页图标。
具体使用方法：

<!--这是当前csdn的使用方式-->
<link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">

状态

今天主要是想说一下这个favicon.ico出现的几种状态。

不同浏览器实现不一样，此处以chrome浏览器为主，其他浏览器对此没这么多设计。
主要分为三种状态：

1. 刚加载页面时，浏览器还没请求到ico资源，所以当前图标的位置会出现一个圈圈逆时针转圈。
2. 请求到icon资源后，图标位置会出现图标样式，如果当前还有其他资源的话，会出现以图标为底，有一个小圈圈顺时针方向旋转。
3. 当所有的资源都返回后，小圈圈消失，显示完整的图标。
   
   
   

参考：

• https://zhidao.baidu.com/question/489658691.html
• https://www.cnblogs.com/nyw1983/p/11222350.html