favicon by brianlovin/claude-config
npx skills add https://github.com/brianlovin/claude-config --skill favicon从源图像 $1 生成一套完整的 favicon,并使用适当的链接标签更新项目的 HTML。
首先,通过运行以下命令验证是否已安装 ImageMagick v7+:
which magick
如果未找到,请停止并指导用户安装:
brew install imagemagicksudo apt install imagemagick$1注意源文件是否为 SVG 文件 - 如果是,它也将被复制为 favicon.svg。
检测项目类型并确定静态资源应放置的位置。按此顺序检查:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 框架 | 检测方法 | 静态资源目录 |
|---|---|---|
| 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 来确认目标目录。询问总比把文件放错地方好。
从以下来源(按优先级顺序)查找应用名称:
site.webmanifest - 检查检测到的静态资源目录中是否存在现有的清单文件,并提取 name 字段package.json - 如果存在,提取 name 字段config/application.rb - 提取模块名称(例如 module MyApp → "MyApp")如果需要,将名称转换为标题大小写(例如 "my-app" → "My App")。
检查检测到的静态资源目录是否存在。如果不存在,则创建它。
运行这些 ImageMagick 命令来生成所有 favicon 文件。将 [STATIC_DIR] 替换为步骤 2 中检测到的静态资源目录。
magick "$1" \
\( -clone 0 -resize 16x16 \) \
\( -clone 0 -resize 32x32 \) \
\( -clone 0 -resize 48x48 \) \
-delete 0 -alpha on -background none \
[STATIC_DIR]/favicon.ico
magick "$1" -resize 96x96 -background none -alpha on [STATIC_DIR]/favicon-96x96.png
magick "$1" -resize 180x180 -background none -alpha on [STATIC_DIR]/apple-touch-icon.png
magick "$1" -resize 192x192 -background none -alpha on [STATIC_DIR]/web-app-manifest-192x192.png
magick "$1" -resize 512x512 -background none -alpha on [STATIC_DIR]/web-app-manifest-512x512.png
如果源文件具有 .svg 扩展名,则复制它:
cp "$1" [STATIC_DIR]/favicon.svg
使用以下内容创建或更新 [STATIC_DIR]/site.webmanifest(替换检测到的应用名称):
{
"name": "[APP_NAME]",
"short_name": "[APP_NAME]",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
如果静态目录中已存在 site.webmanifest,则保留现有的 theme_color、background_color 和 display 值,同时更新 name、short_name 和 icons 数组。
根据检测到的项目类型,更新相应的文件。根据静态资源目录相对于 Web 根目录的位置调整 href 路径:
public/ 或 static/ 中并从根目录提供 → 使用 /favicon.icosrc/assets/ 中 → 使用 /assets/favicon.ico./favicon.ico 或仅使用 favicon.ico编辑 app/views/layouts/application.html.erb。找到 <head> 部分,并使用以下内容添加/替换 favicon 相关标签:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />
重要:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 这一行<link rel="icon"、<link rel="shortcut icon"、<link rel="apple-touch-icon" 或 <link rel="manifest" 标签<head> 部分的顶部附近,如果存在,放在 <meta charset> 和 <meta name="viewport"> 之后编辑检测到的布局文件(app/layout.tsx 或 src/app/layout.tsx)。更新或添加 metadata 导出以包含图标配置:
export const metadata: Metadata = {
// ... 保留现有的元数据字段
icons: {
icon: [
{ url: '/favicon.ico' },
{ url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
shortcut: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
appleWebApp: {
title: '[APP_NAME]',
},
};
重要:
{ url: '/favicon.svg', type: 'image/svg+xml' } 条目编辑检测到的 index.html 文件。在 <head> 部分内添加与 Rails 相同的 HTML。
跳过 HTML 更新,并通知用户需要手动将以下内容添加到其 HTML 的 <head> 中:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />
报告完成情况,包括:
每周安装次数
91
代码库
GitHub 星标数
275
首次出现
2026年1月20日
安全审计
安装于
claude-code73
opencode67
gemini-cli64
codex64
cursor59
github-copilot58
Generate a complete set of favicons from the source image at $1 and update the project's HTML with the appropriate link tags.
First, verify ImageMagick v7+ is installed by running:
which magick
If not found, stop and instruct the user to install it:
brew install imagemagicksudo apt install imagemagick$1Note whether the source is an SVG file - if so, it will also be copied as favicon.svg.
Detect the project type and determine where static assets should be placed. Check in this order:
| Framework | Detection | Static Assets Directory |
|---|---|---|
| Rails | config/routes.rb exists | public/ |
| Next.js | next.config.* exists | public/ |
| Gatsby | gatsby-config.* exists | static/ |
Important : If existing favicon files are found (e.g., favicon.ico, apple-touch-icon.png), use their location as the target directory regardless of framework detection.
Report the detected project type and the static assets directory that will be used.
When in doubt, ask : If you are not 100% confident about where static assets should be placed (e.g., ambiguous project structure, multiple potential locations, unfamiliar framework), use AskUserQuestionTool to confirm the target directory before proceeding. It's better to ask than to put files in the wrong place.
Find the app name from these sources (in priority order):
site.webmanifest - Check the detected static assets directory for an existing manifest and extract the name fieldpackage.json - Extract the name field if it existsconfig/application.rb - Extract the module name (e.g., module MyApp → "MyApp")Convert the name to title case if needed (e.g., "my-app" → "My App").
Check if the detected static assets directory exists. If not, create it.
Run these ImageMagick commands to generate all favicon files. Replace [STATIC_DIR] with the detected static assets directory from Step 2.
magick "$1" \
\( -clone 0 -resize 16x16 \) \
\( -clone 0 -resize 32x32 \) \
\( -clone 0 -resize 48x48 \) \
-delete 0 -alpha on -background none \
[STATIC_DIR]/favicon.ico
magick "$1" -resize 96x96 -background none -alpha on [STATIC_DIR]/favicon-96x96.png
magick "$1" -resize 180x180 -background none -alpha on [STATIC_DIR]/apple-touch-icon.png
magick "$1" -resize 192x192 -background none -alpha on [STATIC_DIR]/web-app-manifest-192x192.png
magick "$1" -resize 512x512 -background none -alpha on [STATIC_DIR]/web-app-manifest-512x512.png
If the source file has a .svg extension, copy it:
cp "$1" [STATIC_DIR]/favicon.svg
Create or update [STATIC_DIR]/site.webmanifest with this content (substitute the detected app name):
{
"name": "[APP_NAME]",
"short_name": "[APP_NAME]",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
If site.webmanifest already exists in the static directory, preserve the existing theme_color, background_color, and display values while updating the name, short_name, and icons array.
Based on the detected project type, update the appropriate file. Adjust the href paths based on where the static assets directory is relative to the web root:
public/ or static/ and served from root → use /favicon.icosrc/assets/ → use /assets/favicon.ico./favicon.ico or just favicon.icoEdit app/views/layouts/application.html.erb. Find the <head> section and add/replace favicon-related tags with:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />
Important :
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> line<link rel="icon", <link rel="shortcut icon", <link rel="apple-touch-icon", or <link rel="manifest" tags before adding the new ones<head> section, after <meta charset> and <meta name="viewport"> if presentEdit the detected layout file (app/layout.tsx or src/app/layout.tsx). Update or add the metadata export to include icons configuration:
export const metadata: Metadata = {
// ... keep existing metadata fields
icons: {
icon: [
{ url: '/favicon.ico' },
{ url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
{ url: '/favicon.svg', type: 'image/svg+xml' },
],
shortcut: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
appleWebApp: {
title: '[APP_NAME]',
},
};
Important :
{ url: '/favicon.svg', type: 'image/svg+xml' } entry from the icon arrayEdit the detected index.html file. Add the same HTML as Rails within the <head> section.
Skip HTML updates and inform the user they need to manually add the following to their HTML <head>:
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="[APP_NAME]" />
<link rel="manifest" href="/site.webmanifest" />
Report completion with:
Weekly Installs
91
Repository
GitHub Stars
275
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code73
opencode67
gemini-cli64
codex64
cursor59
github-copilot58
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
157,400 周安装
svelte.config.* exists |
static/ |
| Astro | astro.config.* exists | public/ |
| Hugo | hugo.toml or config.toml with Hugo markers | static/ |
| Jekyll | _config.yml with Jekyll markers | Root directory (same as index.html) |
| Vite | vite.config.* exists | public/ |
| Create React App | package.json has react-scripts dependency | public/ |
| Vue CLI | vue.config.* exists | public/ |
| Angular | angular.json exists | src/assets/ |
| Eleventy | .eleventy.js or eleventy.config.* exists | Check _site output or root |
| Static HTML | index.html in root | Same directory as index.html |