SuperAPI AI 工具集

favicon

前端与建站

查看项目

更新于 10-16 02:12

技能介绍

favicon 是一个用于从源图片生成完整 favicon 图标集并自动更新项目 HTML 的技能。它通过一系列步骤完成图标生成与集成,适用于需要为网站或 Web 应用快速配置 favicon 的场景。

用途: 该技能的主要用途是从指定的源图片生成一套完整的 favicon 文件,并自动将相应的链接标签更新到项目的 HTML 或布局文件中,从而简化网站图标配置流程。

主要能力:

  • 校验源图片:检查源图片是否存在,并验证文件扩展名是否为支持的格式(PNG、JPG、JPEG、SVG、WEBP、GIF)。
  • 检测项目类型:根据项目中的配置文件自动识别框架,包括 Rails、Next.js、Gatsby、SvelteKit、Astro、Hugo、Jekyll、Vite、Create React App、Vue CLI、Angular、Eleventy 以及静态 HTML 项目,并确定静态资源目录。
  • 生成图标文件:使用 ImageMagick 命令生成 favicon.ico(多分辨率 16x16、32x32、48x48)、favicon-96x96.png、apple-touch-icon.png(180x180)、web-app-manifest-192x192.png、web-app-manifest-512x512.png。如果源文件是 SVG,还会复制为 favicon.svg。
  • 创建或更新 site.webmanifest:生成或更新 manifest 文件,包含应用名称、图标列表、主题色、背景色和显示模式等字段。
  • 更新 HTML/布局文件:根据项目类型,在相应的布局文件(如 Rails 的 application.html.erb、Next.js 的 layout.tsx 或静态 index.html)中添加或替换 favicon 相关的 link 标签和 meta 标签。

使用方式: 该技能通常以命令行或自动化脚本的形式调用,需要传入源图片路径作为参数($1)。执行前需确保已安装 ImageMagick v7+,可通过 which magick 验证。若未安装,技能会停止并提示安装命令(macOS: brew install imagemagick,Linux: sudo apt install imagemagick)。技能会按步骤执行:验证源图片、检测项目类型和静态资源目录、确定应用名称、确保目录存在、生成图标文件、创建/更新 manifest、更新 HTML 文件,最后输出摘要报告。

适用场景:

  • 为新的 Web 项目快速配置 favicon。
  • 在现有项目中替换或更新 favicon 图标集。
  • 需要为不同框架(如 Rails、Next.js、静态 HTML 等)自动生成并集成 favicon 的场合。

限制:

  • 依赖 ImageMagick v7+,未安装时无法执行。
  • 源图片必须存在且为支持的格式,否则会报错并停止。
  • 项目类型检测基于特定配置文件,若项目结构不明确或框架未知,可能无法自动确定静态资源目录,此时技能会询问用户确认或跳过 HTML 更新。
  • 若无法找到布局文件,仍会生成图标文件,但需要用户手动添加 HTML 标签。
  • 技能的具体收费、价格、平台等信息暂未提供。