favicon-gen

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Favicon Generator

Favicon生成工具

Status: Production Ready ✅ Last Updated: 2026-01-14 Dependencies: None (generates pure SVG/converts to ICO and PNG) Latest Versions: N/A (no package dependencies)

状态：已就绪可用于生产环境 ✅ 最后更新：2026-01-14 依赖项：无（生成纯SVG格式，可转换为ICO和PNG） 最新版本：无（无包依赖）

Quick Start (5 Minutes)

快速上手（5分钟）

Decision Tree: Choose Your Approach

决策树：选择合适的方法

Do you have a logo with an icon element?
├─ YES → Extract icon from logo (Method 1)
└─ NO
   ├─ Do you have text/initials?
   │  ├─ YES → Create monogram favicon (Method 2)
   │  └─ NO → Use branded shape (Method 3)

你是否有带图标元素的logo？
├─ 是 → 从logo中提取图标（方法1）
└─ 否
   ├─ 你是否有文字/首字母？
   │  ├─ 是 → 创建字母组合Favicon（方法2）
   │  └─ 否 → 使用品牌专属形状（方法3）

Method 1: Extract Icon from Logo

方法1：从Logo中提取图标

When to use: Logo includes a standalone icon element (symbol, lettermark, or geometric shape)

bash

undefined

适用场景：Logo包含独立的图标元素（符号、字母标志或几何形状）

bash

undefined

1. Identify the icon element in your logo SVG

1. 在你的logo SVG中识别图标元素

2. Copy just the icon paths/shapes

2. 仅复制图标路径/形状

3. Center in 32x32 viewBox

3. 在32x32的视口中居中

4. Simplify for small sizes (remove fine details)

4. 简化细节以适配小尺寸（移除精细细节）


**Example**: Logo with rocket ship → Extract just the rocket shape


**示例**：带火箭的logo → 仅提取火箭形状

Method 2: Create Monogram Favicon

方法2：创建字母组合Favicon

When to use: Only have business name, no logo yet

bash

undefined

适用场景：仅有企业名称，还没有logo

bash

undefined

1. Choose 1-2 letters (initials or brand abbreviation)

1. 选择1-2个字母（首字母或品牌缩写）

2. Pick shape template (circle, rounded square, shield)

2. 选择形状模板（圆形、圆角方形、盾牌形）

3. Set brand colors

3. 设置品牌颜色

4. Generate SVG

4. 生成SVG


**Example**: "Acme Corp" → "AC" monogram in circle


**示例**："Acme Corp" → 圆形内的"AC"字母组合

Method 3: Branded Shape Favicon

方法3：品牌专属形状Favicon

When to use: No logo, no strong text identity, need something now

bash

undefined

适用场景：没有logo，也没有明确的文字标识，需要快速创建图标

bash

undefined

1. Choose industry-relevant shape

1. 选择与行业相关的形状

2. Apply brand colors

2. 应用品牌颜色

3. Generate SVG

3. 生成SVG


**Example**: Tech startup → Hexagon with gradient

---


**示例**：科技初创公司 → 带渐变的六边形

---

Critical Rules

关键规则

Always Do

必须遵守的事项

✅ Generate ALL required formats:

```
favicon.svg
```
(modern browsers, scalable)
```
favicon.ico
```
(legacy browsers, 16x16 and 32x32)
```
apple-touch-icon.png
```
(180x180, iOS)
```
icon-192.png
```
(Android)
```
icon-512.png
```
(Progressive Web Apps)

✅ Use solid backgrounds for iOS (transparent = black box on iOS)

✅ Test at 16x16 (smallest display size)

✅ Keep designs simple (3-5 shapes max, no fine details)

✅ Match brand colors exactly

✅ 生成所有所需格式:

```
favicon.svg
```
（现代浏览器，可缩放）
```
favicon.ico
```
（旧版浏览器，16x16和32x32尺寸）
```
apple-touch-icon.png
```
（180x180，iOS设备）
```
icon-192.png
```
（Android设备）
```
icon-512.png
```
（渐进式Web应用）

✅ iOS图标使用纯色背景（透明背景会在iOS上显示为黑框）

✅ 在16x16尺寸下测试（最小显示尺寸）

✅ 保持设计简洁（最多3-5个形状，无精细细节）

✅ 完全匹配品牌颜色

Never Do

严禁事项

❌ NEVER use CMS default favicons (WordPress "W", Wix, Squarespace, etc.)

❌ Don't use transparent backgrounds on iOS icons (appears as black square)

❌ Don't use complex illustrations (illegible at small sizes)

❌ Don't skip the web manifest (required for PWA, Android home screen)

❌ Don't forget the ICO fallback (still needed for IE/legacy)

❌ 严禁使用CMS默认图标（WordPress的"W"、Wix、Squarespace等平台默认图标）

❌ iOS图标不要使用透明背景（会显示为黑方块）

❌ 不要使用复杂插图（小尺寸下无法辨认）

❌ 不要遗漏Web应用清单（PWA和Android主屏幕必需）

❌ 不要忘记ICO格式的降级方案（仍需支持IE/旧版浏览器）

The 4-Step Favicon Generation Process

Favicon生成四步流程

Step 1: Create Source SVG (favicon.svg)

步骤1：创建源SVG文件（favicon.svg）

For extracted logo icons:

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- Extracted icon paths here -->
  <!-- Keep design simple, center in viewBox -->
  <!-- Use brand colors -->
</svg>

For monogram favicons (use templates in

templates/

xml

<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>

Key Points:

32x32 viewBox (renders well at all sizes)
Simple shapes only
High contrast between background and foreground
Brand colors integrated

从logo提取图标时:

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- 此处为提取的图标路径 -->
  <!-- 保持设计简洁，在视口中居中 -->
  <!-- 融入品牌颜色 -->
</svg>

创建字母组合Favicon时（使用

templates/

目录中的模板）:

xml

<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>

关键点:

使用32x32的视口（在所有尺寸下都能良好渲染）
仅使用简单形状
背景与前景之间保持高对比度
融入品牌颜色

Step 2: Generate Multi-Size ICO

步骤2：生成多尺寸ICO文件

Using online converter (recommended for simplicity):

Go to https://favicon.io or https://realfavicongenerator.net
Upload
```
favicon.svg
```
Generate ICO with 16x16 and 32x32 sizes
Download as
```
favicon.ico
```

Using ImageMagick (if available):

bash

convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

使用在线转换器（推荐，操作简单）:

访问https://favicon.io或https://realfavicongenerator.net
上传
```
favicon.svg
```
生成包含16x16和32x32尺寸的ICO文件
下载为
```
favicon.ico
```

使用ImageMagick（如果已安装）:

bash

convert favicon.svg -define icon:auto-resize=16,32 favicon.ico

Step 3: Generate PNG Icons

步骤3：生成PNG图标

Apple Touch Icon (180x180, solid background):

bash

undefined

Apple触摸图标（180x180，纯色背景）:

bash

undefined

Using ImageMagick

使用ImageMagick

convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

Or manually in Figma/Illustrator:

或在Figma/Illustrator中手动操作:

1. Create 180x180 artboard with solid background color

1. 创建180x180的画板，设置纯色背景

2. Center icon at appropriate size (~120x120)

2. 将图标居中放置，尺寸约为120x120

3. Export as PNG

3. 导出为PNG格式


**Android/PWA Icons** (192x192 and 512x512):
```bash
convert favicon.svg -resize 192x192 -background transparent icon-192.png
convert favicon.svg -resize 512x512 -background transparent icon-512.png

CRITICAL: iOS icons MUST have solid backgrounds. Android/PWA icons can be transparent.


**Android/PWA图标**（192x192和512x512）:
```bash
convert favicon.svg -resize 192x192 -background transparent icon-192.png
convert favicon.svg -resize 512x512 -background transparent icon-512.png

重要提示：iOS图标必须使用纯色背景。Android/PWA图标可以使用透明背景。

Step 4: Create Web Manifest

步骤4：创建Web应用清单

Create
site.webmanifest
(or

manifest.json

json

{
  "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"
}

创建
site.webmanifest
（或

manifest.json

）:

json

{
  "name": "你的企业名称",
  "short_name": "企业简称",
  "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"
}

HTML Integration

HTML集成

Complete Favicon HTML (Add to

<head>

完整的Favicon HTML代码（添加到

<head>

标签中）:

html

<!-- Modern browsers (SVG preferred) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Legacy fallback (ICO) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple Touch Icon (iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest (Android, PWA) -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme color (browser UI) -->
<meta name="theme-color" content="#0066cc">

Order matters: SVG first (modern browsers), ICO second (fallback)

File locations: All files should be in site root (

/public/

in Vite/React)

html

<!-- 现代浏览器（优先使用SVG） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- 旧版浏览器降级方案（ICO） -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Apple触摸图标（iOS设备） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web应用清单（Android、PWA） -->
<link rel="manifest" href="/site.webmanifest">

<!-- 主题色（浏览器UI） -->
<meta name="theme-color" content="#0066cc">

顺序很重要：先加载SVG（现代浏览器），再加载ICO（降级方案）

文件位置：所有文件应放在网站根目录（Vite/React项目中为

/public/

）

Extraction Guidelines (Logo → Favicon)

提取指南（Logo → Favicon）

Identifying Extractable Icons

可提取图标的识别

✅ Good candidates:

Standalone symbol in logo (rocket, leaf, shield)
Lettermark that works alone ("A", "M", "ZW")
Geometric shape that represents brand
Icon that appears before/after text in logo

❌ Difficult candidates:

Full text-only logos (need monogram instead)
Highly detailed illustrations (simplify first)
Horizontal lockups with no icon element

✅ 合适的候选:

Logo中的独立符号（火箭、叶子、盾牌）
可独立使用的字母标志（"A"、"M"、"ZW"）
代表品牌的几何形状
Logo中位于文字前后的图标元素

❌ 难以提取的情况:

纯文字Logo（应使用字母组合方案）
高度精细的插图（需先简化）
无图标元素的横向排版Logo

Extraction Process

提取流程

Open logo SVG in editor (VS Code, Figma, Illustrator)
Identify the icon element (paths, groups that form the symbol)
Copy just those paths (exclude text, taglines, background)
Create new 32x32 SVG with extracted paths
Center and scale the icon to fill ~80% of viewBox
Simplify if needed (remove fine lines, merge shapes)
Test at 16x16 (zoom out, check legibility)

在编辑器中打开logo SVG（VS Code、Figma、Illustrator）
识别图标元素（构成符号的路径、组）
仅复制这些路径（排除文字、标语、背景）
创建新的32x32 SVG文件，粘贴提取的路径
居中并缩放图标，使其填充约80%的视口
必要时简化（移除细线条、合并形状）
在16x16尺寸下测试（缩小视图，检查辨识度）

Simplification Tips

简化技巧

At 16x16 pixels, details disappear:

Merge close shapes (gaps < 2px become invisible)
Remove thin lines (< 2px width disappears)
Increase stroke width (minimum 2-3px)
Reduce color count (2-3 colors max)
Increase contrast (background vs foreground)

Example: Detailed rocket → Simple triangle + circle + flame shapes

在16x16像素下，细节会消失：

合并相近形状（小于2px的间隙会不可见）
移除细线条（小于2px的宽度会消失）
增加描边宽度（最小2-3px）
减少颜色数量（最多2-3种颜色）
提高对比度（背景与前景之间）

示例：精细的火箭 → 简化为三角形+圆形+火焰形状

Monogram Favicon Patterns

字母组合Favicon设计模式

Letter Selection Rules

字母选择规则

Business Name	Monogram Options	Best Choice
Single word (Acme)	A, AC, AM	A (cleanest)
Two words (Blue Sky)	B, BS, BSK	BS (both initials)
Three words (Big Red Box)	B, BR, BRB	BR (drop last initial)
Acronym (FBI, NASA)	FBI, NASA	Use full acronym

Rule of thumb: 1 letter > 2 letters > 3 letters (simpler is better at small sizes)

企业名称	字母组合选项	最佳选择
单个单词（Acme）	A, AC, AM	A（最简洁）
两个单词（Blue Sky）	B, BS, BSK	BS（两个首字母）
三个单词（Big Red Box）	B, BR, BRB	BR（去掉最后一个首字母）
缩写（FBI, NASA）	FBI, NASA	使用完整缩写

经验法则：1个字母 > 2个字母 > 3个字母（小尺寸下越简洁越好）

Font and Size Guidelines

字体与尺寸指南

Font size by letter count:

1 letter: 18-20px (fills ~60% of 32px viewBox)
2 letters: 14-16px (balance legibility and fit)
3 letters: 11-13px (maximum, more = illegible)

Font family: Use web-safe sans-serif fonts

```
font-family="Arial, sans-serif"
```
(most reliable)
```
font-family="Helvetica, sans-serif"
```
(clean)
```
font-family="Verdana, sans-serif"
```
(readable at small sizes)

Font weight: Always use

font-weight="bold"

font-weight="700"

(regular weight disappears at 16x16)

按字母数量设置字体大小:

1个字母：18-20px（填充32px视口的约60%）
2个字母：14-16px（平衡辨识度与适配性）
3个字母：11-13px（最大限制，更多字母会无法辨认）

字体家族：使用网页安全的无衬线字体

```
font-family="Arial, sans-serif"
```
（最可靠）
```
font-family="Helvetica, sans-serif"
```
（简洁）
```
font-family="Verdana, sans-serif"
```
（小尺寸下可读性好）

字体粗细：始终使用

font-weight="bold"

或

font-weight="700"

（常规粗细在16x16尺寸下会消失）

Shape Templates

形状模板

Use templates in

templates/

directory:

Circle (
```
favicon-svg-circle.svg
```
) - Universal, safe choice
Rounded Square (
```
favicon-svg-square.svg
```
) - Modern, matches iOS
Shield (
```
favicon-svg-shield.svg
```
) - Security, protection industries
Hexagon (create from template) - Tech, engineering

使用

templates/

目录中的模板:

圆形 (
```
favicon-svg-circle.svg
```
) - 通用、安全的选择
圆角方形 (
```
favicon-svg-square.svg
```
) - 现代风格，适配iOS
盾牌形 (
```
favicon-svg-shield.svg
```
) - 适用于安全、防护行业
六边形（从模板创建）- 适用于科技、工程行业

Industry-Specific Shape Recommendations

行业专属形状推荐

By Industry

按行业分类

Industry	Recommended Shape	Color Palette
Technology	Hexagon, Circle	Blue (#0066cc), Teal (#00a896)
Finance	Square, Shield	Dark blue (#003366), Green (#00733b)
Healthcare	Circle, Cross	Medical blue (#0077c8), Green (#00a651)
Real Estate	House outline, Square	Earth tones (#8b4513), Blue (#4a90e2)
Security	Shield, Lock	Dark blue (#1a237e), Red (#c62828)
Food/Restaurant	Circle, Rounded square	Warm colors (Orange #ff6b35, Red #d62828)
Creative/Agency	Abstract shapes	Bold colors (Purple #7209b7, Pink #f72585)
Legal	Scales, Shield	Navy (#001f54), Gold (#c5a778)
Education	Book, Circle	Blue (#1976d2), Green (#388e3c)
Retail	Shopping bag, Tag	Brand-specific

When in doubt: Use a circle with brand colors (universally works)

行业	推荐形状	调色板
科技	六边形、圆形	蓝色（#0066cc）、蓝绿色（#00a896）
金融	方形、盾牌形	深蓝色（#003366）、绿色（#00733b）
医疗健康	圆形、十字形	医疗蓝（#0077c8）、绿色（#00a651）
房地产	房屋轮廓、方形	大地色系（#8b4513）、蓝色（#4a90e2）
安全	盾牌形、锁形	深蓝色（#1a237e）、红色（#c62828）
餐饮	圆形、圆角方形	暖色调（橙色#ff6b35、红色#d62828）
创意/代理	抽象形状	大胆色彩（紫色#7209b7、粉色#f72585）
法律	天平、盾牌形	藏青色（#001f54）、金色（#c5a778）
教育	书本、圆形	蓝色（#1976d2）、绿色（#388e3c）
零售	购物袋、标签	品牌专属颜色

不确定时：使用带品牌颜色的圆形（通用且适用所有场景）

Color Guidelines

颜色指南

Choosing Favicon Colors

选择Favicon颜色

Must match existing branding:

Primary brand color for background
Contrasting color for foreground/text
2-3 colors maximum (more = muddy at small sizes)

Contrast requirements:

Minimum contrast ratio: 4.5:1 (WCAG AA)
Test at 16x16 to verify legibility
Light backgrounds → dark text
Dark backgrounds → light text

No transparency on iOS:

xml

<!-- ❌ WRONG (appears as black square on iOS) -->
<circle cx="16" cy="16" r="16" fill="transparent"/>

<!-- ✅ CORRECT (solid background) -->
<circle cx="16" cy="16" r="16" fill="#0066cc"/>

必须与现有品牌匹配:

背景使用品牌主色
前景/文字使用对比色
最多使用2-3种颜色（颜色过多会在小尺寸下显得浑浊）

对比度要求:

最小对比度：4.5:1（WCAG AA标准）
在16x16尺寸下测试以验证可读性
浅色背景 → 深色文字
深色背景 → 浅色文字

iOS图标不要使用透明:

xml

<!-- ❌ 错误（在iOS上会显示为黑方块） -->
<circle cx="16" cy="16" r="16" fill="transparent"/>

<!-- ✅ 正确（纯色背景） -->
<circle cx="16" cy="16" r="16" fill="#0066cc"/>

File Delivery Checklist

文件交付清单

When delivering favicon package to client or deploying:

```
favicon.svg
```
(source file, modern browsers)
```
favicon.ico
```
(16x16 and 32x32 sizes, legacy)
```
apple-touch-icon.png
```
(180x180, solid background)
```
icon-192.png
```
(Android home screen)
```
icon-512.png
```
(PWA, high-res displays)
```
site.webmanifest
```
(web app manifest)
HTML
```
<link>
```
tags (copy-paste ready)
Tested at 16x16 (zoom browser to 400%, verify legible)
Tested on iOS (verify no black square)
Tested on Android (verify home screen icon)
Cleared browser cache (hard refresh Ctrl+Shift+R)

向客户交付Favicon包或部署时需检查：

```
favicon.svg
```
（源文件，适用于现代浏览器）
```
favicon.ico
```
（16x16和32x32尺寸，适用于旧版浏览器）
```
apple-touch-icon.png
```
（180x180，纯色背景）
```
icon-192.png
```
（Android主屏幕）
```
icon-512.png
```
（PWA、高分辨率显示器）
```
site.webmanifest
```
（Web应用清单）
HTML
```
<link>
```
标签（可直接复制粘贴）
在16x16尺寸下测试（将浏览器缩放至400%，验证可读性）
在iOS上测试（验证无黑方块）
在Android上测试（验证主屏幕图标）
清除浏览器缓存（硬刷新Ctrl+Shift+R）

Known Issues Prevention

已知问题预防

This skill prevents 8 documented issues:

本技能可预防8个已记录的问题：

Issue #1: Launching with CMS Default Favicon

问题1：上线时使用CMS默认图标

Error: Website goes live with WordPress "W" or platform default Source: https://wordpress.org/support/topic/change-default-favicon/ Why It Happens: Developers forget favicon during build, CMS serves default Prevention: Generate custom favicon before launch, add to checklist

错误：网站上线时使用WordPress的"W"或平台默认图标来源：https://wordpress.org/support/topic/change-default-favicon/ 原因：开发人员在构建时忘记添加Favicon，CMS提供默认图标 预防措施：上线前生成自定义Favicon，添加到检查清单

Issue #2: Transparent iOS Icons Appear as Black Squares

问题2：透明iOS图标显示为黑方块

Error: iOS home screen shows black box instead of icon Source: https://developer.apple.com/design/human-interface-guidelines/app-icons Why It Happens: apple-touch-icon.png has transparent background Prevention: Always use solid background color on iOS icons

错误：iOS主屏幕显示黑框而非图标来源：https://developer.apple.com/design/human-interface-guidelines/app-icons 原因：apple-touch-icon.png使用透明背景 预防措施：iOS图标始终使用纯色背景

Issue #3: Favicon Not Updating (Browser Cache)

问题3：Favicon不更新（浏览器缓存）

Error: Old favicon shows despite uploading new one Source: https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh Why It Happens: Browsers aggressively cache favicons (days/weeks) Prevention: Instruct users to hard refresh (Ctrl+Shift+R), clear cache, or version favicon URL

错误：即使上传了新图标，仍显示旧图标来源：https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh 原因：浏览器会强力缓存Favicon（数天/数周） 预防措施：指导用户硬刷新（Ctrl+Shift+R）、清除缓存，或为Favicon URL添加版本号

Issue #4: Complex Icon Illegible at 16x16

问题4：复杂图标在16x16尺寸下无法辨认

Error: Favicon looks muddy or unrecognizable in browser tabs Source: Common UX issue Why It Happens: Too much detail for small canvas (fine lines, many colors) Prevention: Simplify design, test at actual size, use 3-5 shapes max

错误：Favicon在浏览器标签中显得模糊或无法识别来源：常见UX问题原因：小画布上细节过多（细线条、多种颜色） 预防措施：简化设计，在实际尺寸下测试，最多使用3-5个形状

Issue #5: Missing ICO Fallback

问题5：缺失ICO降级方案

Error: No favicon in older browsers (IE11, old Edge) Source: https://caniuse.com/link-icon-svg Why It Happens: Only providing SVG, ICO not generated Prevention: Always generate both favicon.svg and favicon.ico

错误：在旧版浏览器（IE11、旧版Edge）中无图标显示来源：https://caniuse.com/link-icon-svg 原因：仅提供SVG格式，未生成ICO格式 预防措施：始终同时生成favicon.svg和favicon.ico

Issue #6: Missing Web Manifest

问题6：缺失Web应用清单

Error: Android "Add to Home Screen" shows no icon or default icon Source: https://web.dev/add-manifest/ Why It Happens: No manifest file linking to PNG icons Prevention: Always create site.webmanifest with 192/512 icons

错误：Android的"添加到主屏幕"显示无图标或默认图标来源：https://web.dev/add-manifest/ 原因：没有清单文件链接到PNG图标 预防措施：始终创建site.webmanifest，包含192/512尺寸的图标

Issue #7: Wrong ICO Sizes

问题7：ICO尺寸错误

Error: Favicon blurry at some sizes Source: https://en.wikipedia.org/wiki/ICO_(file_format) Why It Happens: ICO generated with only one size (e.g., 32x32 only) Prevention: ICO must include both 16x16 and 32x32 sizes

错误：Favicon在某些尺寸下模糊来源：https://en.wikipedia.org/wiki/ICO_(file_format) 原因：生成的ICO仅包含一种尺寸（如仅32x32） 预防措施：ICO必须同时包含16x16和32x32尺寸

Issue #8: Monogram Font Weight Too Light

问题8：字母组合字体粗细过轻

Error: Letters disappear or barely visible in favicon Source: Common design issue Why It Happens: Using regular (400) font weight instead of bold (700) Prevention: Always use font-weight="bold" or 700 for text in favicons

错误：Favicon中的字母消失或几乎不可见来源：常见设计问题原因：使用常规（400）字体粗细而非粗体（700） 预防措施：Favicon中的文字始终使用font-weight="bold"或700

Using Bundled Resources

使用捆绑资源

Templates (templates/)

模板（templates/目录）

SVG Templates (copy and customize):

```
favicon-svg-circle.svg
```
- Circle monogram (most universal)
```
favicon-svg-square.svg
```
- Rounded square monogram (modern)
```
favicon-svg-shield.svg
```
- Shield monogram (security/trust)
```
manifest.webmanifest
```
- Web app manifest template

Usage:

bash

undefined

SVG模板（复制并自定义）:

```
favicon-svg-circle.svg
```
- 圆形字母组合（最通用）
```
favicon-svg-square.svg
```
- 圆角方形字母组合（现代风格）
```
favicon-svg-shield.svg
```
- 盾牌形字母组合（安全/信任类）
```
manifest.webmanifest
```
- Web应用清单模板

使用方法:

bash

undefined

Copy template

复制模板

cp ~/.claude/skills/favicon-gen/templates/favicon-svg-circle.svg favicon.svg

Edit in text editor or Figma

在文本编辑器或Figma中编辑

Change colors, text, and customize

更改颜色、文字并自定义

Generate ICO and PNGs from customized SVG

从自定义后的SVG生成ICO和PNG文件

undefined

undefined

References (references/)

参考资料（references/目录）

When Claude should load these: For detailed guidance on specific techniques

```
references/format-guide.md
```
- Complete specification of all formats (SVG, ICO, PNG requirements)
```
references/extraction-methods.md
```
- Detailed steps for extracting icons from logos
```
references/monogram-patterns.md
```
- Advanced monogram design patterns
```
references/shape-templates.md
```
- Shape variations by industry with SVG code

Claude应在以下场景加载这些资料：针对特定技术的详细指导

```
references/format-guide.md
```
- 所有格式的完整规范（SVG、ICO、PNG要求）
```
references/extraction-methods.md
```
- 从Logo中提取图标的详细步骤
```
references/monogram-patterns.md
```
- 高级字母组合设计模式
```
references/shape-templates.md
```
- 按行业分类的形状变体及SVG代码

Validation and Testing

验证与测试

Visual Testing Checklist

视觉测试清单

Test in multiple contexts:

Browser tab (Chrome, Firefox, Safari)
- Zoom to 100%, 125%, 150%
- Light mode and dark mode
- Multiple tabs open (icon at 16x16)
Bookmarks bar
- Favicon shows correctly next to bookmark title
iOS Home Screen
- Add to home screen, verify solid background
- Check corners are rounded (system-applied)
Android Home Screen
- Add to home screen via Chrome menu
- Verify icon appears crisp at 192x192
PWA Install Dialog
- Verify manifest icons load
- Check theme color matches branding

在多种场景下测试:

浏览器标签（Chrome、Firefox、Safari）
- 缩放至100%、125%、150%
- 浅色模式和深色模式
- 打开多个标签（图标显示为16x16）
书签栏
- Favicon在书签标题旁正确显示
iOS主屏幕
- 添加到主屏幕，验证纯色背景
- 检查边角是否为圆角（系统自动添加）
Android主屏幕
- 通过Chrome菜单添加到主屏幕
- 验证192x192尺寸的图标清晰显示
PWA安装对话框
- 验证清单图标加载正常
- 检查主题色与品牌匹配

Technical Validation

技术验证

SVG validation:

bash

undefined

SVG验证:

bash

undefined

Check SVG is valid XML

检查SVG是否为有效的XML

xmllint --noout favicon.svg

Or online: https://validator.w3.org/

或在线验证: https://validator.w3.org/


**ICO validation**:
```bash


**ICO验证**:
```bash

Check ICO contains multiple sizes

检查ICO是否包含多种尺寸

identify favicon.ico

Should show:

应显示:

favicon.ico[0] ICO 16x16

favicon.ico[1] ICO 32x32


**Manifest validation**:
- https://manifest-validator.appspot.com/

---


**清单验证**:
- https://manifest-validator.appspot.com/

---

Troubleshooting

故障排查

Problem: Favicon not showing after upload

问题：上传后Favicon不显示

Solution:

Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)
Clear browser cache completely
Test in incognito/private window
Verify file is in correct location (site root)
Check HTML
```
<link>
```
tags are correct
Wait 5-10 minutes (CDN/cache propagation)

解决方案:

硬刷新浏览器（Ctrl+Shift+R或Cmd+Shift+R）
完全清除浏览器缓存
在隐身/隐私窗口中测试
验证文件是否在正确位置（网站根目录）
检查HTML
```
<link>
```
标签是否正确
等待5-10分钟（CDN/缓存传播）

Problem: Black square on iOS

问题：iOS上显示黑方块

Solution: apple-touch-icon.png needs solid background

bash

undefined

解决方案：apple-touch-icon.png需要使用纯色背景

bash

undefined

Re-generate with solid background

重新生成带纯色背景的图标

convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

undefined

convert favicon.svg -resize 180x180 -background "#0066cc" -alpha remove apple-touch-icon.png

undefined

Problem: Blurry in browser tab

问题：浏览器标签中显示模糊

Solution:

Check ICO includes 16x16 size
Verify SVG viewBox is 32x32
Simplify design (too much detail for small size)

解决方案:

检查ICO是否包含16x16尺寸
验证SVG的视口是否为32x32
简化设计（小尺寸下细节过多）

Problem: Android home screen shows default icon

问题：Android主屏幕显示默认图标

Solution:

Add site.webmanifest file
Link manifest in HTML
```
<head>
```
Ensure icon-192.png and icon-512.png exist
Verify manifest.json syntax is valid

解决方案:

添加site.webmanifest文件
在HTML
```
<head>
```
中链接清单
确保icon-192.png和icon-512.png存在
验证manifest.json语法是否有效

Official Documentation

官方文档

Favicon Specification: https://developer.mozilla.org/en-US/docs/Glossary/Favicon
Apple Touch Icon: https://developer.apple.com/design/human-interface-guidelines/app-icons
Web App Manifest: https://web.dev/add-manifest/
ICO Format: https://en.wikipedia.org/wiki/ICO_(file_format)
SVG Favicon Support: https://caniuse.com/link-icon-svg

Favicon规范: https://developer.mozilla.org/en-US/docs/Glossary/Favicon
Apple触摸图标: https://developer.apple.com/design/human-interface-guidelines/app-icons
Web应用清单: https://web.dev/add-manifest/
ICO格式: https://en.wikipedia.org/wiki/ICO_(file_format)
SVG Favicon支持: https://caniuse.com/link-icon-svg

Quick Reference: Format Requirements

快速参考：格式要求

Format	Size(s)	Use Case	Transparency	Required?
`favicon.svg`	Vector	Modern browsers	✅ Yes	✅ Yes
`favicon.ico`	16x16, 32x32	Legacy browsers	✅ Yes	✅ Yes
`apple-touch-icon.png`	180x180	iOS home screen	❌ No (solid)	✅ Yes
`icon-192.png`	192x192	Android	✅ Yes	✅ Yes
`icon-512.png`	512x512	PWA, high-res	✅ Yes	✅ Yes
`site.webmanifest`	N/A	PWA metadata	N/A	✅ Yes

格式	尺寸	使用场景	透明背景	是否必需
`favicon.svg`	矢量	现代浏览器	✅ 是	✅ 是
`favicon.ico`	16x16, 32x32	旧版浏览器	✅ 是	✅ 是
`apple-touch-icon.png`	180x180	iOS主屏幕	❌ 否（纯色）	✅ 是
`icon-192.png`	192x192	Android	✅ 是	✅ 是
`icon-512.png`	512x512	PWA、高分辨率	✅ 是	✅ 是
`site.webmanifest`	N/A	PWA元数据	N/A	✅ 是

Real-World Examples

实际案例

Example 1: Tech Startup with Logo

案例1：带Logo的科技初创公司

Scenario: Logo has rocket ship icon + "Launchpad" text

Approach: Extract rocket icon

Open logo SVG, copy rocket paths
Create 32x32 SVG with just rocket
Simplify: Remove engine details, make flame 3 shapes instead of 10
Test at 16x16: Still recognizable ✅
Generate all formats

Result: Clean, scalable rocket favicon matching brand

场景：Logo包含火箭图标 + "Launchpad"文字

方法：提取火箭图标

打开logo SVG，复制火箭路径
创建仅包含火箭的32x32 SVG
简化：移除引擎细节，将火焰从10个形状简化为3个
在16x16尺寸下测试：仍可辨认 ✅
生成所有格式

结果：简洁、可缩放的火箭Favicon，与品牌匹配

Example 2: Consulting Firm with Text-Only Logo

案例2：纯文字Logo的咨询公司

Scenario: "Stratton Partners" text logo, no icon

Approach: Create monogram

Choose "SP" initials
Use circle template (professional)
Navy background (#003366), white text
Font size 16px, bold weight
Generate all formats

Result: Professional SP monogram in brand colors

场景："Stratton Partners"纯文字Logo，无图标

方法：创建字母组合

选择"SP"首字母
使用圆形模板（专业风格）
深蓝色背景（#003366），白色文字
字体大小16px，粗体
生成所有格式

结果：专业的SP字母组合，使用品牌颜色

Example 3: Restaurant with No Branding Yet

案例3：尚未建立品牌的餐厅

Scenario: New restaurant, needs favicon before logo finalized

Approach: Branded shape

Choose: Rounded square (modern, food-friendly)
Use warm orange (#ff6b35) background
Add simple fork/knife silhouette in white
Generate all formats

Result: Temporary favicon matching restaurant vibe, replaceable later

场景：新餐厅，在Logo确定前需要Favicon

方法：品牌专属形状

选择：圆角方形（现代风格，适合餐饮）
使用暖橙色（#ff6b35）背景
添加白色的简单刀叉轮廓
生成所有格式

结果：符合餐厅风格的临时Favicon，后续可替换

Production Example

生产环境案例

This skill is based on patterns used in 50+ client websites:

Success Rate: 100% (no launches with CMS defaults)
Average Generation Time: 15 minutes (from logo to all formats)
Issues Prevented: 8 (documented above)
Validation: All 8 blocked errors verified in real projects

Questions? Issues?

Check
```
references/format-guide.md
```
for format specifications
Use templates in
```
templates/
```
directory (copy and customize)
Verify all 6 files generated and HTML tags added
Test at 16x16 zoom level before deploying

本技能基于50+客户网站中使用的模式:

成功率: 100%（无上线时使用CMS默认图标的情况）
平均生成时间: 15分钟（从Logo到所有格式）
预防的问题: 8个（上文已记录）
验证: 所有8个已阻止的错误在实际项目中得到验证

有疑问？遇到问题？

查看
```
references/format-guide.md
```
获取格式规范
使用
```
templates/
```
目录中的模板（复制并自定义）
验证已生成所有6个文件并添加了HTML标签
部署前在16x16尺寸下测试

favicon-gen

Original

Translation

Favicon Generator

Favicon生成工具

Quick Start (5 Minutes)

快速上手（5分钟）

Decision Tree: Choose Your Approach

决策树：选择合适的方法

Method 1: Extract Icon from Logo

方法1：从Logo中提取图标

1. Identify the icon element in your logo SVG

1. 在你的logo SVG中识别图标元素

2. Copy just the icon paths/shapes

2. 仅复制图标路径/形状

3. Center in 32x32 viewBox

3. 在32x32的视口中居中

4. Simplify for small sizes (remove fine details)

4. 简化细节以适配小尺寸（移除精细细节）

Method 2: Create Monogram Favicon

方法2：创建字母组合Favicon

1. Choose 1-2 letters (initials or brand abbreviation)

1. 选择1-2个字母（首字母或品牌缩写）

2. Pick shape template (circle, rounded square, shield)

2. 选择形状模板（圆形、圆角方形、盾牌形）

3. Set brand colors

3. 设置品牌颜色

4. Generate SVG

4. 生成SVG

Method 3: Branded Shape Favicon

方法3：品牌专属形状Favicon

1. Choose industry-relevant shape

1. 选择与行业相关的形状

2. Apply brand colors

2. 应用品牌颜色

3. Generate SVG

3. 生成SVG

Critical Rules

关键规则

Always Do

必须遵守的事项

Never Do

严禁事项

The 4-Step Favicon Generation Process

Favicon生成四步流程

Step 1: Create Source SVG (favicon.svg)

步骤1：创建源SVG文件（favicon.svg）

Step 2: Generate Multi-Size ICO

步骤2：生成多尺寸ICO文件

Step 3: Generate PNG Icons

步骤3：生成PNG图标

Using ImageMagick

使用ImageMagick

Or manually in Figma/Illustrator:

或在Figma/Illustrator中手动操作:

1. Create 180x180 artboard with solid background color

1. 创建180x180的画板，设置纯色背景

2. Center icon at appropriate size (~120x120)

2. 将图标居中放置，尺寸约为120x120

3. Export as PNG

3. 导出为PNG格式

Step 4: Create Web Manifest

步骤4：创建Web应用清单

HTML Integration

HTML集成

Complete Favicon HTML (Add to <head>):

完整的Favicon HTML代码（添加到<head>标签中）:

Extraction Guidelines (Logo → Favicon)

提取指南（Logo → Favicon）

Identifying Extractable Icons

可提取图标的识别

Extraction Process

提取流程

Simplification Tips

简化技巧

Monogram Favicon Patterns

字母组合Favicon设计模式

Letter Selection Rules

字母选择规则

Font and Size Guidelines

Complete Favicon HTML (Add to
`<head>`
):

完整的Favicon HTML代码（添加到
`<head>`
标签中）: