【Web前端】如何制作网页的图标(保姆级)

如何制作网页的图标

下面我将一步步实现如下效果
【Web前端】如何制作网页的图标(保姆级)

找到你需要的png格式图片文件

你可以自己用PS等软件制作,也可以到 iconfont-阿里巴巴矢量图标库 寻找。
【Web前端】如何制作网页的图标(保姆级)
【Web前端】如何制作网页的图标(保姆级)
【Web前端】如何制作网页的图标(保姆级)
【Web前端】如何制作网页的图标(保姆级)

将png图片转换成.ico格式

网上有很多在线转换器,我这里用的是第一个:https://www.easyicon.net/covert/
【Web前端】如何制作网页的图标(保姆级)
【Web前端】如何制作网页的图标(保姆级)
图标格式我这里用的是微软的icon;尺寸的话建议大家选择 16x16 或者 32x32,其实区别不大。

【Web前端】如何制作网页的图标(保姆级)

将图标放到与 index.html 相同的目录下,并将名字改成 favicon.ico

【Web前端】如何制作网页的图标(保姆级)

用任意前端开发软件打开,并将其导入

【Web前端】如何制作网页的图标(保姆级)
效果就出来啦
【Web前端】如何制作网页的图标(保姆级)