favicon-gen

Name: favicon-gen
Author: jezweb

github.com/jezweb设计与 UI1.1k2.2k 次安装3 周前更新

代码仓库

关于 favicon-gen

favicon-gen 是一项指导从 Logo、首字母或品牌色制作完整网站图标包的技能，面向网站设计与开发者。它涵盖图标设计、格式转换、清单配置和 HTML 集成。

主要功能

01从 Logo 提取图标或制作字母图标
02提供圆形、圆角方形和盾牌模板
03生成 SVG、ICO 和 PNG 图标
04配置 Web Manifest 与 HTML 标签
05检查小尺寸可读性及背景要求

适用场景

01为网站制作多尺寸 favicon 文件
02为 PWA 和移动设备准备图标
03将品牌首字母设计成网站图标

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jezweb/claude-skills --skill favicon-gen

安装后在 Claude Code 中输入/favicon-gen确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/

favicon-svg-circle.svg

favicon-svg-shield.svg

favicon-svg-square.svg

manifest.webmanifest

references/

extraction-methods.md

format-guide.md

monogram-patterns.md

shape-templates.md

详细介绍

网站图标生成器

根据徽标、首字母或品牌色生成完整的网站图标包，并提供所有必需格式和 HTML 集成代码。

工作流

第 1 步：选择方案

Have a logo with an icon element?
 YES -> Extract icon from logo
 NO  -> Have text/initials?
         YES -> Create monogram favicon
         NO  -> Use branded shape

第 2 步：创建源 SVG

提取图标——从徽标复制图标路径，将其置于 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>

品牌形状——圆形（通用）、圆角方形（现代）、盾形（安全）、六边形（科技）。

assets/ 目录中提供了 SVG 模板。

第 3 步：生成所有格式

需要 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 转换。

第 4 步：创建 Web 清单

复制并自定义 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"
}

第 5 步：添加 HTML 标签

<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/）。

关键规则

始终生成所有格式——SVG、ICO、apple-touch-icon、192、512、manifest
iOS 图标必须使用纯色背景——透明背景会显示为黑色方块
字母组合文本始终使用粗体字重（常规字重在 16x16 尺寸下会消失）
在 16x16 尺寸下测试——如果无法辨认，就简化
绝不要使用 CMS 默认图标上线（例如 WordPress 的 “W”）

格式速查

格式	尺寸	透明度	用途
`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 代码的行业专用形状

支持 Markdown

登录后评论