Favicon 图标生成

---

name: favicon argument-hint: [源图片路径] description: 从源图片生成 favicon allowed-tools: Bash(magick *), Bash(which *), Bash(cp *), Bash(mkdir *) context: fork risk: unknown source: community metadata: author: Shpigford version: "1.0"

从 $1 路径的源图片生成完整的 favicon 集合，并使用适当的 link 标签更新项目的 HTML。

适用场景

• 你需要从单个源图片生成完整的 favicon 集合。
• 任务包括将资源放置在正确的框架特定静态目录中并更新 HTML link 标签。
• 你想要一个验证源图片、检测项目类型并写入正确 favicon 输出的工作流。

前置条件

首先，验证 ImageMagick v7+ 是否已安装：

which magick

如果未找到，停止并指导用户安装：

• macOS：brew install imagemagick
• Linux：sudo apt install imagemagick

步骤 1：验证源图片

1. 验证源图片是否存在于提供的路径：$1
2. 检查文件扩展名是否为支持的格式（PNG、JPG、JPEG、SVG、WEBP、GIF）
3. 如果文件不存在或不是有效的图片格式，报告错误并停止

注意源文件是否为 SVG 文件 - 如果是，它也将被复制为 favicon.svg。

步骤 2：检测项目类型和静态资源目录

检测项目类型并确定静态资源应放置的位置。按以下顺序检查：

| 框架 | 检测方式 | 静态资源目录 | |-----------|-----------|------------------------| | Rails | config/routes.rb 存在 | public/ | | Next.js | next.config.* 存在 | public/ | | Gatsby | gatsby-config.* 存在 | static/ | | SvelteKit | svelte.config.* 存在 | static/ | | Astro | astro.config.* 存在 | public/ | | Hugo | hugo.toml 或带 Hugo 标记的 config.toml | static/ | | Jekyll | 带 Jekyll 标记的 _config.yml | 根目录（与 index.html 相同） | | Vite | vite.config.* 存在 | public/ | | Create React App | package.json 有 react-scripts 依赖 | public/ | | Vue CLI | vue.config.* 存在 | public/ | | Angular | angular.json 存在 | src/assets/ | | Eleventy | .eleventy.js 或 eleventy.config.* 存在 | 检查 _site 输出或根目录 | | 静态 HTML | 根目录有 index.html | 与 index.html 相同的目录 |

重要：如果找到现有的 favicon 文件（如 favicon.ico、apple-touch-icon.png），无论框架检测结果如何，都使用它们的位置作为目标目录。

报告检测到的项目类型和将使用的静态资源目录。

不确定时请询问：如果你对静态资源应放置的位置不是100%确定（如项目结构模糊、多个潜在位置、不熟悉的框架），使用 AskUserQuestionTool 在继续之前确认目标目录。宁可询问也不要把文件放错位置。

步骤 3：确定应用名称

从以下来源查找应用名称（按优先级排序）：

1. 现有 site.webmanifest - 检查检测到的静态资源目录中是否有现有 manifest 并提取 name 字段
2. package.json - 如果存在则提取 name 字段
3. Rails config/application.rb - 提取模块名称（如 module MyApp → "MyApp"）
4. 目录名称 - 使用当前工作目录名称作为后备

如需要，将名称转换为标题大小写（如 "my-app" → "My App"）。

步骤 4：确保静态资源目录存在

检查检测到的静态资源目录是否存在。如果不存在，创建它。

步骤 5：生成 Favicon 文件

运行以下 ImageMagick 命令生成所有 favicon 文件。将 [STATIC_DIR] 替换为步骤 2 中检测到的静态资源目录。

重要：-background none 标志必须在输入文件之前，以在渲染 SVG 时正确保留透明度。将其放在输入之后会导致白色背景。

favicon.ico（多分辨率：16x16、32x32、48x48）

magick -background none "$1" \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  -delete 0 -alpha on \
  [STATIC_DIR]/favicon.ico

favicon-96x96.png

magick -background none "$1" -resize 96x96 -alpha on [STATIC_DIR]/favicon-96x96.png

apple-touch-icon.png (180x180)

magick -background none "$1" -resize 180x180 -alpha on [STATIC_DIR]/apple-touch-icon.png

web-app-manifest-192x192.png

magick -background none "$1" -resize 192x192 -alpha on [STATIC_DIR]/web-app-manifest-192x192.png

web-app-manifest-512x512.png

magick -background none "$1" -resize 512x512 -alpha on [STATIC_DIR]/web-app-manifest-512x512.png

favicon.svg（仅当源文件为 SVG 时）

如果源文件扩展名为 .svg，复制它：

cp "$1" [STATIC_DIR]/favicon.svg

步骤 6：创建/更新 site.webmanifest

在静态资源目录中创建或更新 site.webmanifest 文件，包含正确的图标引用和应用名称。