favicon-gen by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill favicon-gen从徽标、首字母或品牌颜色生成完整的 favicon 包。生成所有必需的格式和 HTML 集成代码。
Have a logo with an icon element?
YES -> Extract icon from logo
NO -> Have text/initials?
YES -> Create monogram favicon
NO -> Use branded shape
提取图标 — 从徽标复制图标路径,在 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/ 目录中找到。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
需要 ImageMagick(convert 命令)。如果需要请安装:brew install imagemagick(macOS)或 apt install imagemagick(Linux)。
# 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 转换。
复制并自定义 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"
}
<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/)。
| 格式 | 尺寸 | 透明度 | 用途 |
|---|---|---|---|
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 清单模板references/format-guide.md — 完整的格式规范references/extraction-methods.md — 徽标图标提取步骤references/monogram-patterns.md — 高级字母组合设计references/shape-templates.md — 特定行业形状及 SVG 代码每周安装数
891
代码仓库
GitHub 星标数
643
首次出现
2026 年 1 月 20 日
安全审计
安装于
opencode726
gemini-cli713
claude-code701
codex694
cursor673
github-copilot639
Generate a complete favicon package from a logo, initials, or brand colours. Produces all required formats and HTML integration code.
Have a logo with an icon element?
YES -> Extract icon from logo
NO -> Have text/initials?
YES -> Create monogram favicon
NO -> Use branded shape
Extracted icon — copy icon paths from logo, centre in 32x32 viewBox, simplify for small sizes.
Monogram — use a template from 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>
Branded shape — circle (universal), rounded square (modern), shield (security), hexagon (tech).
SVG templates available in assets/ directory.
Requires ImageMagick (convert command). Install if needed: brew install imagemagick (macOS) or apt install imagemagick (Linux).
# 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
No ImageMagick? Use https://favicon.io to convert from the SVG instead.
Copy and customise 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"
}
<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">
Place all files in site root (/public/ in Vite/React).
| Format | Size | Transparency | Purpose |
|---|---|---|---|
favicon.svg | Vector | Yes | Modern browsers |
favicon.ico | 16+32 | Yes | Legacy browsers |
apple-touch-icon.png | 180x180 | No | iOS home screen |
icon-192.png | 192x192 | Yes | Android |
assets/favicon-svg-circle.svg — Circle monogram templateassets/favicon-svg-square.svg — Rounded square templateassets/favicon-svg-shield.svg — Shield templateassets/manifest.webmanifest — Web manifest templatereferences/format-guide.md — Complete format specificationsreferences/extraction-methods.md — Logo icon extraction stepsreferences/monogram-patterns.md — Advanced monogram designreferences/shape-templates.md — Industry-specific shapes with SVG codeWeekly Installs
891
Repository
GitHub Stars
643
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode726
gemini-cli713
claude-code701
codex694
cursor673
github-copilot639
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
Gemini Interactions API 指南:统一接口、智能体交互与服务器端状态管理
833 周安装
Apollo MCP 服务器:让AI代理通过GraphQL API交互的完整指南
834 周安装
智能体记忆系统构建指南:分块策略、向量存储与检索优化
835 周安装
Scrapling官方网络爬虫框架 - 自适应解析、绕过Cloudflare、Python爬虫库
836 周安装
抽奖赢家选取器 - 随机选择工具,支持CSV、Excel、Google Sheets,公平透明
838 周安装
Medusa 前端开发指南:使用 SDK、React Query 构建电商商店
839 周安装
icon-512.png |
| 512x512 |
| Yes |
| PWA |