如果你曾经有过给网站添加图标的经历，应该对 favicons 不会陌生。favicons 包含了网站在浏览器标签页及书签中的图标，也可以在手机主屏幕上快速启动网站时使用。而 npm 包 @types/favicons 的作用就在于为 TypeScript 开发者提供 Favicons 相关类型定义，方便代码提示和开发。
安装
首先，我们需要安装 @types/favicons 包到项目中。
npm install --save-dev @types/favicons
使用
下面，我们以使用 @types/favicons 包来生成自定义 favicons 为例，来看一下其具体的使用方法。
1. 准备
在进行生成操作之前，我们需要先准备好默认的 favicon，通常为三个尺寸的 PNG 图片文件（16x16，32x32，48x48）。
2. 导入
在代码中，我们需要导入 favicons 模块，并构建对应的配置信息。
-- -------------------- ---- -------
------ - -- -------- ---- -----------
----- ------- ---------------------- - -
----- ---- -- ------- ---
------ -
---------- ----- -- ------
-------- ----- -- ------- ----
------ ----- -- ----- ----- ---- ----
-------- ----- -- ------- ----
------- ---- -- ------ ------- ----
-
-我们需要设置生成的信息的存储路径及需要生成的图标类型。上面提到的图标类型都是可以通过 favicons 包生成的，不同浏览器需要不同类型的图标，这里我们仅仅示例了一些典型的选项。
3. 生成
接下来，我们就可以直接进行 favicon 的生成操作了。
-- -------------------- ---- -------
---------------- ------- ------- --------- -- -
-- ------- -
---------------------
-
-- ------
----------------------------- -- -------
--------------------------- -- - ---- --------
---------------------------- -- -------
---其中，source 为默认 favicon 的路径，我们可以使用 Node.js 中的 fs 模块来读取。
const fs = require('fs');
const defaultIcons = fs.readFileSync('path/to/defaultIcons');在回调中，我们可以拿到生成的所有图标、在 HTML 中使用的图标引用和生成的文件列表等信息。更多 options 和属性请查看 官方文档。
4. 在 HTML 中使用
最后，我们可以将生成的 HTML 代码片段带入到我们网站的模板中，方便它们被正确地嵌入到 HTML 页面中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- --------------- ----- --------------- ---------------------------- ------------------- ---- ------ ---- --------- --- --- ---------------------------------- -- ------- ------ ------- -------
这样，在浏览器中展示您的网站时，就可以看到自定义的 favicon 啦！
结语
@types/favicons 包可以大大地方便 TypeScript 开发者生成和使用 favicons，随着网站越来越重要、信息碎片化严重的现在，这样的技术文章和技巧也越来越值得关注和分享。希望这篇文章能够对你有帮助，如果你有任何问题，可以在评论区留言，我们会尽快回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbec6b5cbfe1ea0611b9e