Back to Details

favicon-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Components: Favicon

组件：Favicon

Guides favicon and app icon implementation for brand consistency across browser tabs, bookmarks, mobile home screens, and Google Search results. Favicons help users identify sites; missing or incorrect icons hurt trust.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
本指南用于指导 favicon 和应用图标的实现，确保在浏览器标签页、书签、移动设备主屏幕以及 Google 搜索结果 中保持品牌一致性。Favicon 可帮助用户快速识别站点，缺失或错误的图标会损害用户信任。
调用规则：首次使用时，如果有帮助，可以先用1-2句话介绍本技能涵盖的内容及其重要性，再提供核心输出。后续调用或用户要求跳过介绍时，直接输出核心内容即可。

Initial Assessment

初始评估

Check for product marketing context first: If 
.claude/product-marketing-context.md
or 
.cursor/product-marketing-context.md
exists, read it for brand and visual identity.
Identify:
  1. Tech stack: Next.js, WordPress, static HTML, etc.
  2. PWA: Is the site a PWA or planning to be?
  3. Existing assets: Logo, icon files
优先检查产品营销上下文：如果存在 
.claude/product-marketing-context.md
或 
.cursor/product-marketing-context.md
文件，先读取其中的品牌和视觉标识相关信息。
确认以下信息：
  1. 技术栈：Next.js、WordPress、静态 HTML 等
  2. PWA：站点是否为 PWA 或有规划转为 PWA？
  3. 现有资产：Logo、图标文件

Required Sizes

要求尺寸

SizeUse
16x16Browser tabs, standard displays
32x32Retina/HiDPI browser tabs
180x180Apple Touch Icon (iOS home screen); no transparency
192x192Android Chrome home screen, PWA launcher
512x512PWA splash screens, adaptive icons
Optional: 48x48, 96x96, 120x120, 152x152, 167x167, 256x256 for broader coverage.
尺寸用途
16x16浏览器标签页，标准显示设备
32x32Retina/高DPI 设备的浏览器标签页
180x180Apple Touch Icon（iOS 主屏幕）；不支持透明度
192x192Android Chrome 主屏幕，PWA 启动器
512x512PWA 启动闪屏，自适应图标
可选尺寸：48x48、96x96、120x120、152x152、167x167、256x256，用于覆盖更广的场景。

Formats

格式要求

FormatUse
SVGModern browsers; scalable; supports dark mode via media queries; lightweight
PNGHigh-DPI; explicit sizes; easy to generate; required for Apple Touch Icon
ICOLegacy; bundles multiple sizes; fallback for older browsers
Recommended: Provide SVG + PNG fallbacks. Never skip Apple Touch Icon (180x180); iOS shows a generic screenshot without it.
格式用途
SVG现代浏览器；可缩放；支持通过媒体查询适配深色模式；体积小
PNG高DPI场景；尺寸明确；易于生成；Apple Touch Icon 要求使用该格式
ICO兼容旧版浏览器；可打包多个尺寸；作为旧浏览器的降级方案
推荐方案：提供 SVG + PNG 降级方案。绝对不要省略 180x180 的 Apple Touch Icon，否则 iOS 会显示站点的通用截图作为替代。

Google Search (SERP Display)

Google 搜索（SERP 展示）

See serp-features for SERP feature types and optimization.
Favicons can appear in Google Search results next to your site's listings. Google Search Central requirements:
RequirementGuideline
PlacementAdd 
<link rel="icon" href="/path/to/favicon.ico">
to homepage header
One per hostnameOne favicon per hostname; 
example.com
and 
code.example.com
are separate; 
example.com/sub-site
shares the same favicon
CrawlabilityGooglebot-Image must crawl favicon; Googlebot must crawl homepage; do not block either in robots.txt
ShapeSquare (1:1 aspect ratio); minimum 8x8px; preferably >48x48px for quality across platforms
Stable URLDo not change favicon URL frequently
AppropriateNo inappropriate content (pornography, hate symbols); Google may replace with default icon
TimingCrawling can take days to weeks; use Search Console URL Inspection to request indexing
Supported rel values: 
icon
, 
shortcut icon
, 
apple-touch-icon
, 
apple-touch-icon-precomposed
. href can be relative (
/favicon.ico
) or absolute; favicon can be hosted on CDN.
SERP 功能类型和优化方案可参考 serp-features 相关内容。
Favicon 可在 Google 搜索结果的站点条目旁展示。Google Search Central 要求如下：
要求规范
放置位置在首页的 header 中添加 
<link rel="icon" href="/path/to/favicon.ico">
每个主机名对应一个每个主机名对应一个 favicon；
example.com
和 
code.example.com
是独立的；
example.com/sub-site
共享主站的 favicon
可爬取性Googlebot-Image 必须能够爬取 favicon，Googlebot 必须能够爬取首页；不要在 robots.txt 中屏蔽二者的爬取权限
形状正方形（宽高比1:1）；最小尺寸 8x8px；推荐大于48x48px，以保证在多平台的展示质量
稳定的URL不要频繁修改 favicon 的 URL
内容合规不得包含违规内容（色情、仇恨符号等），否则 Google 可能会将其替换为默认图标
生效时间爬取可能需要数天到数周时间；可使用 Search Console 的 URL 检测工具请求索引
支持的 rel 属性值：
icon
、
shortcut icon
、
apple-touch-icon
、
apple-touch-icon-precomposed
。href 可以是相对路径（
/favicon.ico
）或绝对路径；favicon 也可以托管在 CDN 上。

Implementation

实现方式

HTML Link Tags

HTML Link 标签

html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Next.js

Next.js

Place in 
/app
: 
favicon.ico
, 
icon.png
, 
apple-icon.png
. Next.js auto-generates tags.
将 
favicon.ico
、
icon.png
、
apple-icon.png
放在 
/app
目录下，Next.js 会自动生成对应的标签。

PWA Manifest

PWA Manifest

Include 
icons
array in 
manifest.json
with 192x192 and 512x512 for maskable icons.
在 
manifest.json
的 
icons
数组中添加 192x192 和 512x512 尺寸的可适配图标。

Best Practices

最佳实践

  • Simplicity: At 16x16, complex details are illegible; use simplified logo mark; design for brand recognition in SERPs
  • Consistency: Favicon should match logo/brand (logo-generator, brand-visual-generator)
  • Cache: Use long cache; version for updates (e.g. 
    /favicon.ico?v=2
    )
  • Tools: RealFaviconGenerator, favicon.io, or favicons npm package for automation
  • Test: Check across browsers, dark mode, and Search Console (favicon may take days to weeks to appear)
  • 简洁性：16x16 尺寸下复杂细节无法识别，建议使用简化的 Logo 标识，设计时要考虑在搜索结果中的品牌辨识度
  • 一致性：Favicon 要与 Logo/品牌风格统一（可参考 logo-generator、brand-visual-generator）
  • 缓存策略：设置长缓存时间，更新时添加版本号（例如 
    /favicon.ico?v=2
    ）
  • 工具推荐：可使用 RealFaviconGenerator、favicon.io 或 favicons npm 包实现自动化生成
  • 测试验证：在多个浏览器、深色模式下测试，也可在 Search Console 中验证（favicon 可能需要数天到数周才会在搜索结果中更新）

Output Format

输出格式

  • Size checklist (16, 32, 180, 192, 512; >48x48 for Google Search)
  • Format recommendations (SVG, PNG, ICO)
  • Implementation notes per tech stack (homepage header placement)
  • Google Search checklist (crawlability, stable URL, appropriate content)
  • Manifest (if PWA)
  • 尺寸检查清单（16、32、180、192、512；Google 搜索要求大于48x48）
  • 格式推荐（SVG、PNG、ICO）
  • 实现说明（对应技术栈的首页 header 放置规则）
  • Google 搜索检查清单（可爬取性、稳定URL、内容合规）
  • Manifest配置（如果是PWA）

Related Skills

相关技能

  • logo-generator: Favicon typically derived from logo; consistent branding
  • media-kit-page-generator: Media kit should include favicon or link to brand assets
  • brand-visual-generator: Visual identity; favicon aligns with brand colors and mark
  • indexing: Favicon requires crawlable homepage; URL Inspection for indexing
  • logo-generator：Favicon 通常从 Logo 衍生而来，用于保持品牌一致性
  • media-kit-page-generator：媒体工具包应包含 favicon 或品牌资产的访问链接
  • brand-visual-generator：视觉标识体系，favicon 需要符合品牌配色和标识设计
  • indexing：Favicon 要求首页可爬取，可使用URL检测工具请求索引