网站的title前方一般有一个小图标，叫做favicon图标，像下面的图片这样，我们来看一下如何使用。![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2YaHl6Yu-1594619554542)(/Users/mac/Desktop/MarkDown /favicon图标/1.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/708887d6815bba573dfaec7097e3e3f6.jpeg)
一、制作favicon图标
- 首先将想要的图标切成png图片。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2rl0umg-1594619554545)(/Users/mac/Desktop/MarkDown /favicon图标/2.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/6bf776947a0c39abaae157e244fd2480.jpeg)
- 然后把png图片转换成ico图标，这需要借助于第三方转换网站，例如比特虫
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WXAFzmp-1594619554547)(/Users/mac/Desktop/MarkDown /favicon图标/3.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/fe9510b730f4d36e1160f4874d53820a.jpeg)
二、将转换好的图标放到根目录下
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x4TuhTB3-1594619554551)(/Users/mac/Desktop/MarkDown /favicon图标/4.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/689146833d298a370814e44716780008.jpeg)
三、HTML页面引入favicon图标
在head标签中引入：
<link rel="shortcut icon" href=" /favicon.ico" />
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElMguOSc-1594619554552)(/Users/mac/Desktop/MarkDown /favicon图标/5.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/671f2ed0736617ad16296ef43c158ca2.jpeg)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlaYOdBC-1594619554553)(/Users/mac/Desktop/MarkDown /favicon图标/6.jpg)]](https://i-blog.csdnimg.cn/blog_migrate/0851140d80ca661f132933d5d45e6553.jpeg)
就完成了！
扫一扫
03-24
1570
1570
02-20
1158
1158
07-14
8218
8218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
