前言
在前端开发过程中，如果需要为网站添加各种图标，例如网站图标、苹果和安卓设备图标等，通常需要手动制作一系列尺寸和格式的图标文件。 这既浪费时间也有可能会引起繁琐的错误。为了解决这些问题，我们可以使用 npm 包 enb-favicons。
enb-favicons 是一个快速，自动化的工具，它可以帮助您生成多个尺寸和格式的网站图标和移动设备图标，同时减少手动处理的时间和错误率。
在这篇文章中，我将向大家介绍如何使用 enb-favicons 包，以便在网站上添加图标。
安装 enb-favicons
在使用 enb-favicons 之前，需要先安装它。 在终端中输入以下命令并按回车键，即可将 enb-favicons 包安装在项目中：
npm install enb-favicons --save-dev
使用 enb-favicons
安装完成 enb-favicons 后，我们需要设置 enb-favicons 配置信息和输入和输出文件路径等信息。接下来让我们进入配置文件的编写。
在项目根目录下创建 enb-make-favicons.js 文件，并写入以下代码：
-- -------------------- ---- -------
----- ----------- - ------------------------
------------------
----- ------------------
------- --------------
------------ ---- ------- ------ ---------
-------------- ----- -----
------------- -----------------------
-------- ------
------- -
-------- ---- ------- ------ ---------
--------------- ----- -- -- ------- -- ----- ------------ ---------
----------- ----------
-------- -------------
------------ -----------
---------- ----
------ ---
-
---在上面的代码中，我们定义了配置文件的各项信息：
path：生成的图标文件存储的路径，这里定义static/favicons；source：源图标文件的地址，我们将在此使用favicon.png图标；projectName：网站或应用名称，这里定义ENB Favicon Sample Project；developerName：开发者名称，这里定义John Doe；developerURL：开发者网站地址，定义为https://example.com/；version：网站或应用版本号，设置为1.0；config：其他配置选项。
上面代码中定义的 config 变量用于设置一些其他细节，如应用名称，描述，背景颜色，显示模式，方向等。
在配置文件中添加完这些信息后，我们只需要在终端输入以下命令，即可生成对应的图标:
./node_modules/enb-favicons/bin/enb-favicons-standalone
生成的图标将存储在我们在配置文件中定义的路径中。
在网站上使用图标
一旦生成了图标，我们只需要将它们添加到网站文件中，并在 HTML 文件的头部中添加以下代码：
<link rel="icon" type="image/png" href="/static/favicons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/static/favicons/favicon-16x16.png" sizes="16x16">
上面的代码需要根据你生成的图标进行修改。
总结
enb-favicons 包提供了一种自动化处理图标的方法，既提高了网站或应用开发的效率，又极大地降低了制作图标时出错的风险。 通过这篇文章，我们了解了如何使用 enb-favicons 包以及如何将生成的图标添加到网站上。这个过程对于任何需要在网站上添加图标的人都是有指导意义的。
示例代码
配置文件 enb-make-favicons.js：
-- -------------------- ---- -------
----- ----------- - ------------------------
------------------
----- ------------------
------- --------------
------------ ---- ------- ------ ---------
-------------- ----- -----
------------- -----------------------
-------- ------
------- -
-------- ---- ------- ------ ---------
--------------- ----- -- -- ------- -- ----- ------------ ---------
----------- ----------
-------- -------------
------------ -----------
---------- ----
------ ---
-
---HTML 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------- ------ ---------------
----- ---------- ---------------- ----------------------------------------- --------------
----- ---------- ---------------- ----------------------------------------- --------------
-------
------
----------- -- --- ------- ------ ------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1fa563576b7b1ecd70