在前端开发中，网站的图标不仅是一个装饰品，更是提升用户体验和品牌形象的一种方式。而对于一个网站，不同平台和设备的图标要求可能会不一样，因此制作不同规格的图标也十分必要。为了提升前端开发效率，我们可以使用一个叫做 favicons 的 npm 包来进行批量图标制作。
安装 favicons
在使用之前，我们需要先安装 favicons 包，可以通过下面的命令进行安装：
npm install -g favicons
注意：
favicons需要全局安装。如果使用的是nvm管理器，请先切换到需要安装到的 node 版本再执行安装命令。
批量制作图标
favicons 可以自动制作出多种尺寸类型的图标，包括 <link> 标签所需的 favicon.ico、Apple Touch Icon 等等。
运行以下命令将图标制作到对应目录中：
favicons source.png --path=dest --icons
说明：
source.png: 原图标的路径，可以是 png、jpg 或者 svg 等格式。如果有多份图标，可以在后面添加多个图标路径。--path=dest: 图标制作后的输出目录。--icons: 表示制作多种 icon。
执行完上述命令后，将在 dest 目录下输出制作好的图标文件。
定制规格和其他选项
除了制作多种尺寸、类型的图标之外，favicons 还提供了很多选项可以帮助我们定制图标的输出规格。
定制图标规格
我们可以使用 --sizes 选项来自定义输出的 icon 尺寸。例如需要生成一个 16x16 的图标，命令如下：
favicons source.png --path=dest --icons --sizes="16x16"
还可以添加多个尺寸，例如 16x16 和 32x32：
favicons source.png --path=dest --icons --sizes="16x16,32x32"
定制 Apple Touch Icon、Safari Pinned Tab 等规格
除了普通图标外，我们也可以通过 favicons 制作苹果设备的 Touch Icon 和 Safari Pinned Tab，在命令后添加相应的参数即可。
- 制作 Apple Touch Icon
favicons source.png --path=dest --apple-touch-icon
- 制作 Safari Pinned Tab
favicons source.png --path=dest --pinned-tab
注意：Apple Touch Icon 需要设置
<meta>标签，具体可参考 苹果官方文档。
其他选项
- 使用 background 颜色
favicons source.png --path=dest --background="#ffffff"
- 使用多个 background 颜色
favicons source.png --path=dest --background="red,green,blue"
- 添加 badge（徽标）
favicons source.png --path=dest --badge="blue"
更多选项，请参考 favicons 的官方文档。
示例代码
下面是一个通过 favicons 制作苹果设备和网站图标的示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- --------------- ---- ----- ----- ---- --- ----- ---------------------- --------------- ----------------------------- ----- ----------------------------------- -------------- ----- -------------------------------------------- ---------------- ---- ------ ------ --- --- ----- --------------- ----------------------------- ---------------- ----- ------------------------------ ------------------ ---- ---- ---- --- ----- ---------- ---------------- ------------- -------------------------- ----- ---------- ---------------- ------------- -------------------------- ----- -------------- ------------------------- ----- --------------- ----------------------------- ---------------- ----- ------------- ----- -------------------- ----- --------------------------- ----------------------------- ----- ------------------ ------------------ ------- ------ ---- ---- --- ------- -------
以上就是 favicons 的使用教程，希望能够帮助大家快速制作出多种尺寸类型的图标，提升网站品牌形象和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e3181e8991b448dbae6