Favicons

核心功能：借助Node.js的favicons库，生成跨平台适配的网站、PWA及各平台APP图标，同步产出配置文件和可直接嵌入<head>的HTML标签。典型场景：需制作网站图标包、PWA图标集、iOS/Android/Windows等平台应用图标时使用。输入需清晰的源图像（推荐512x512及以上，支持PNG/SVG），可自定义应用信息、平台开关等；输出为多尺寸图标、配置文件及HTML标签文件。使用前需安装favicons依赖，Node.js版本≥14。

openlark

热度 36.02

最近更新 2026-05-11 17:42:36

分类：开发依赖：代码执行应用场景：品牌素材

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add favicons

Metadata

name: favicons
description: Use the favicons Node.js library to generate multi-platform website icons (Favicons).

Favicons

Generate cross-platform website icons using the Node.js favicons library.

Use Cases

Use this skill when the user needs to generate website icons, create a PWA icon set for a website, generate app icons for different platforms (iOS, Android, Windows), or produce a complete icon package including HTML tags and manifest files.

Installing Dependencies

Ensure favicons is installed in the project before execution:

npm install favicons

Quick Start

import { favicons } from "favicons";

const response = await favicons(source, configuration);

Workflow

Confirm Source Image: Requires a clear app icon source image (recommended 512x512 or larger, supports PNG/SVG)
Configure Options: Set app name, icon path, platform toggles, etc., as needed
Execute Generation: Run the script to generate icon files
Output Files: Obtain image files, configuration files, and HTML tags

Executing Icon Generation

Use the bundled script to generate icons:

node <skill-path>/scripts/generate_favicons.js <source-image> <output-directory> <config-JSON>

Example

# Basic usage
node scripts/generate_favicons.js ./logo.png ./dist

# Full configuration
node scripts/generate_favicons.js ./logo.png ./dist '{
  "appName": "My App",
  "appShortName": "App",
  "background": "#2196F3",
  "icons": {"android": true, "appleIcon": true, "windows": true}
}'

Configuration Reference

For detailed configuration options, refer to config_reference.md.

Common Configuration

Option	Description
`appName`	Application name
`appShortName`	Application short name (displayed on desktop)
`path`	Icon deployment path prefix
`background`	Icon background color
`icons.android`	Generate Android icons
`icons.appleIcon`	Generate Apple Touch icons
`icons.favicons`	Generate generic favicons

Disabling Specific Platforms

{
  icons: {
    android: false,      // Skip Android icons
    appleStartup: false, // Skip Apple startup images
    yandex: false        // Skip Yandex icons
  }
}

Output Files

The generated directory contains:

Image Files: PNG icons of various sizes
Configuration Files: manifest.json, browserconfig.xml
HTML Tag File: favicon-tags.html (can be directly copied into <head>)

FAQ

Why are some icons missing? Some icons (such as macOS SVG, Windows tile silhouette effects) require additional module support; the project will follow up continuously.

Generation failed?

Ensure the source image exists and is in the correct format
Check that Node.js version >= 14
Ensure the favicons package is installed correctly