在前端开发中，网站的图标往往是被忽视的一部分，但它在用户体验上却是很重要的。properly-favicon 是一个 npm 包，它能够根据不同的设备自动生成适合的 favicon，并且还能够提供 Safari、iOS 和 Android 平台下的 Apple Touch Icon 和 Web App Manifest。在本文中，我们将介绍如何使用 properly-favicon。
安装
你可以通过 npm 安装 properly-favicon：
npm install properly-favicon
使用
在项目中引入 properly-favicon：
const properlyFavicon = require('properly-favicon');生成常规 favicon
调用 properlyFavicon.generateFavicon() 方法可以生成常规 favicon。例如：
-- -------------------- ---- -------
---------------------------------
------- ---------------------
------- ---------------------
-------- --
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---该方法接收一个对象作为参数，该对象包含以下属性：
source（必填）：原始图片的路径。建议使用 512x512 像素的 PNG 文件。target（必填）：生成的 favicon 的路径，支持 ICO、PNG、JSON、SVG 和 WebP 格式。padding（可选）：在生成的 favicon 上添加白色填充的像素值。默认值为 0。options（可选）：一个对象，包含用于生成 Apple Touch Icon 和 Web App Manifest 的选项。它也支持以下属性：appName：应用程序的名称。默认为网站的标题。appShortName：应用程序的短名称。默认为网站的标题。appDescription：应用程序的描述。默认为网站的描述。developerName：开发者名称。developerURL：开发者 URL。background：用于背景颜色的十六进制字符串。默认为 #fff。themeColor：应用程序主题颜色。默认为 #fff。
注意：除了 source 和 target 属性之外，其他属性都是可选的。
生成 Apple Touch Icon
调用 properlyFavicon.generateAppleTouchIcon() 方法可以生成 Apple Touch Icon。例如：
-- -------------------- ---- -------
----------------------------------------
------- ---------------------
------- ------------------------------
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---该方法接收一个对象作为参数，该对象包含以下属性：
source（必填）：原始图片的路径。建议使用 512x512 像素的 PNG 文件。target（必填）：生成的 Apple Touch Icon 的路径，应该是一个 PNG 文件。options（可选）：一个对象，包含用于生成 Apple Touch Icon 的选项。它也支持以下属性：appName：应用程序的名称。默认为网站的标题。appShortName：应用程序的短名称。默认为网站的标题。appDescription：应用程序的描述。默认为网站的描述。developerName：开发者名称。developerURL：开发者 URL。background：用于背景颜色的十六进制字符串。默认为 #fff。themeColor：应用程序主题颜色。默认为 #fff。
注意：除了 source 和 target 属性之外，其他属性都是可选的。
生成 Web App Manifest
调用 properlyFavicon.generateWebAppManifest() 方法可以生成 Web App Manifest。例如：
-- -------------------- ---- -------
----------------------------------------
------- ---------------------
------- -----------------------
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---该方法接收一个对象作为参数，该对象包含以下属性：
source（必填）：原始图片的路径。建议使用 512x512 像素的 PNG 文件。target（必填）：生成的 Web App Manifest 的路径，应该是一个 JSON 文件。options（可选）：一个对象，包含用于生成 Web App Manifest 的选项。它也支持以下属性：appName：应用程序的名称。默认为网站的标题。appShortName：应用程序的短名称。默认为网站的标题。appDescription：应用程序的描述。默认为网站的描述。developerName：开发者名称。developerURL：开发者 URL。background：用于背景颜色的十六进制字符串。默认为 #fff。themeColor：应用程序主题颜色。默认为 #fff。
注意：除了 source 和 target 属性之外，其他属性都是可选的。
示例
以下是一个完整的示例，它会生成一个名为 my-website 的常规 favicon、Apple Touch Icon 和 Web App Manifest。
-- -------------------- ---- -------
----- --------------- - ----------------------------
-- ---- -------
---------------------------------
------- ---------------------
------- ---------------------
-------- --
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---
-- -- ----- ----- ----
----------------------------------------
------- ---------------------
------- ------------------------------
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---
-- -- --- --- --------
----------------------------------------
------- ---------------------
------- -----------------------
-------- -
-------- --- ---------
------------- --- -----
--------------- ----- -- -- ----------
-------------- ----- -----
------------- -----------------------
----------- -------
----------- -------
--
---结语
properly-favicon 是一个简单易用的 npm 包，通过它可以轻松生成常规 favicon、Apple Touch Icon 和 Web App Manifest，提高网站的用户体验。在你的下一个前端项目中尝试使用 properly-favicon 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d781e8991b448e1319