网站图标是什么
浏览器收藏夹和地址栏网站网址前面的个性化图标,常被成为网页小图标、网站缩略图标或者收藏夹图标,是网站的重要识别方式。
如上图中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格式