网站的图标 favicon.ico

网站图标是什么

浏览器收藏夹和地址栏网站网址前面的个性化图标，常被成为网页小图标、网站缩略图标或者收藏夹图标，是网站的重要识别方式。

如上图中CSDN的C

favicon.ico

默认情况网页未指定icon时，浏览器会从网站目录下的favicon.ico文件作为网站的图标。

自定义则在 html -> head 中定义一个link元素，如下：

<link href="https://g.csdnimg.cn/static/logo/favicon32.ico" rel="shortcut icon" type="image/x-icon">
或者简化
<link href="https://g.csdnimg.cn/static/logo/favicon32.ico" rel="icon">

格式及大小

favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不过ico格式是所有浏览器都支持的。
大小通常使用16×16、32×32，其他的要看浏览器是否支持。

图标制作

直接准备好一张图，正方的，不限制尺寸大小。
百度搜索 “网站 ICO” 关键字，找到在线制作ICO的网站，把图片上传即可生成图标。

举个栗子

来看看百度的（百度翻译）

<link rel="icon" type="image/png" href="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon-32x32_ca689c3.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon-16x16_e1883cf.png" sizes="16x16" />
<link rel="shortcut icon" type="image/x-icon" href="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon_d87cd2a.ico" />
<link rel="bookmark" type="image/x-icon" href="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon_d87cd2a.ico" />

定义的4个，
rel=icon 使用png格式，先定义32x32的，然后定义16x16，使用sizes属性区分分辨率
rel=shortcut 使用x-icon格式
rel=bookmark 使用x-icon格式