favicon-gen

用途

favicon-gen 用于从 logo、文字缩写或品牌配色生成一整套网站图标（favicon）资源，产出所有必要格式并附带 HTML 集成代码。

工作流程

第 1 步：选择方案

有带图标元素的 logo？是 → 从 logo 中提取图标。
否 → 有文字或缩写？是 → 创建字母组合（monogram）favicon。
否 → 使用品牌化形状。

第 2 步：创建源 SVG

提取图标：从 logo 复制图标路径，置于 32x32 viewBox 居中，为小尺寸做简化。
字母组合：使用 assets/ 中的模板，例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#0066cc"/>
  <text x="16" y="21" font-size="16" font-weight="bold"
        text-anchor="middle" fill="#ffffff" font-family="sans-serif">AC</text>
</svg>

品牌化形状：圆形（通用）、圆角方形（现代）、盾形（安全）、六边形（科技）。SVG 模板位于 assets/ 目录。

第 3 步：生成所有格式

需要 ImageMagick（convert 命令）。如未安装：macOS 使用 brew install imagemagick，Linux 使用 apt install imagemagick。

# ICO (16x16 + 32x32)
convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

# Apple Touch Icon (180x180, SOLID background — transparent = black on iOS)
convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

# Android/PWA icons
convert favicon.svg -resize 192x192 icon-192.png
convert favicon.svg -resize 512x512 icon-512.png

没有 ImageMagick？改用 https://favicon.io 从该 SVG 转换。

第 4 步：创建 Web Manifest

复制并定制 assets/manifest.webmanifest：

{
  "name": "Your Business Name",
  "short_name": "Business",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

第 5 步：添加 HTML 标签

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0066cc">

将所有文件放在站点根目录（Vite/React 中为 /public/）。

关键规则

始终生成所有格式——SVG、ICO、apple-touch-icon、192、512、manifest。
iOS 图标必须有实心背景——透明会显示为黑色方块。
字母组合文字始终使用粗体字重（常规字重在 16x16 下会消失）。
在 16x16 下测试——若不可辨识则做简化。
不要以 CMS 默认图标上线（如 WordPress 的“W”）。

格式速查

格式	尺寸	透明	用途
favicon.svg	矢量	是	现代浏览器
favicon.ico	16+32	是	旧版浏览器
apple-touch-icon.png	180x180	否	iOS 主屏幕
icon-192.png	192x192	是	Android
icon-512.png	512x512	是	PWA

资源文件

assets/favicon-svg-circle.svg — 圆形字母组合模板
assets/favicon-svg-square.svg — 圆角方形模板
assets/favicon-svg-shield.svg — 盾形模板
assets/manifest.webmanifest — Web manifest 模板

参考文件

references/format-guide.md — 完整格式规格
references/extraction-methods.md — logo 图标提取步骤
references/monogram-patterns.md — 进阶字母组合设计
references/shape-templates.md — 行业特定形状与 SVG 代码

适用场景

适用于需要为网站或 PWA 配置完整图标集的开发者，尤其适合从品牌 logo 或文字缩写快速产出多平台兼容的 favicon 资源。

限制

生成 PNG/ICO 需要 ImageMagick；若未安装，需改用第三方站点 favicon.io 转换。资料未提供该技能的收费、价格、平台依赖细节或性能数据。