favicon.ico一般用于作为缩略的网站标识,它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持favicon图标。
步骤:
- 制作favicon图标
- 将favicon图标放到网站根目录下
- HTML页面引入favicon图标
制作favicon图标
- 可以先通过切图或者其它方式得到原始图像,如png图片。
- 再把原始图像转换为 ico图标,这需要借助第三方转换网站,例如比特虫https://www.bitbug.net/
例如,使用切图工具切出了图片:
打开比特虫:
上传图片:
例如,目标尺寸我选择48x48的:
输入附加码,然后点击 生成ico图标:
将生成的ico图标放到项目的根目录下面
可以把文件更名为favicon.ico:
HTML页面中引入favicon图标
在html页面的<head></head>
之间引入代码:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
在浏览器中打开,已经可以看到这个图标了:
例如,访问京东根目录下面的favicon.ico,就能看到京东的favicon图标: