SuperAPI AI 工具集

favicon

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:从一个源图片生成一套完整 favicon(favicon.ico 含 16/32/48 多分辨率、favicon-96x96.png、apple-touch-icon.png 180x180、web-app-manifest-192x192.png、web-app-manifest-512x512.png,以及 site.webmanifest),并写入项目的 HTML 布局、web manifest 和资源目录。适用于用户要求生成 favicon、新项目初始化、替换旧图标或添加 PWA 兼容图标等场景。

主要能力:支持 PNG、JPG、JPEG、SVG、WEBP、GIF 源格式,SVG 会额外直接复制为 favicon.svg 并添加相应 link 标签。可自动识别框架并确定资源目录,如 Rails 用 public/、Next.js 用 public/、Gatsby 用 static/、SvelteKit 用 static/、Astro 用 public/、Hugo 用 static/、Jekyll 用根目录、Vite 用 public/、Vue CLI 用 public/、Angular 用 src/assets/、Eleventy 用根目录或 _site/、静态 HTML 用 HTML 同目录。如已存在 favicon 文件,则优先按其位置放置。还可以按顺序解析应用名(site.webmanifest、package.json、Rails module、当前目录名),并将已有 manifest 的 theme_color、background_color、display 值保留。

使用方式:先确认环境,执行 magick 检查 ImageMagick;缺失时 macOS 用 brew install imagemagick,Linux 用 sudo apt install imagemagick。随后校验源图格式,检测框架并确定目标目录,解析应用名,再用 ImageMagick 生成各尺寸资源并保留透明通道,接着创建或更新 site.webmanifest,最后按框架修改布局文件(Rails 编辑 application.html.erb,Next.js 编辑 app/layout.tsx 或 app/layout.js 的 metadata,静态 HTML 编辑 index.html 的 head),无法识别时输出 HTML 片段供手动添加。

限制:依赖 ImageMagick v7+;无法确定资源放置位置或框架时会询问用户确认;非 SVG 源不生成 SVG 相关标签;缺失的信息如具体分辨率需求以外的定制项暂未提供。