mcpField
F
favicon-generator

favicon-generator

github.com/kostja94设计与 UI1.1k1.1k 次安装3 天前更新
代码仓库

关于 favicon-generator

用于在网站、浏览器、移动主屏幕和 Google Search 中实现网站图标与应用图标的技能。它涵盖尺寸、格式、按技术栈实施的方法及抓取要求。

主要功能

  1. 01选择适用于浏览器和设备的图标尺寸
  2. 02选择 SVG、PNG 和 ICO 格式
  3. 03为 HTML 或 Next.js 添加图标链接
  4. 04在 PWA 清单中配置图标
  5. 05检查 Google Search 抓取要求

适用场景

  1. 01为网站添加 favicon
  2. 02准备 PWA 所需图标
  3. 03排查 Google Search 中图标的显示问题

安装

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

$npx skills add https://github.com/kostja94/marketing-skills --skill favicon-generator

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

详细介绍

组件：Favicon

介绍 favicon 和应用图标的实现方法，确保浏览器标签页、书签、手机主屏幕和 Google 搜索结果中的品牌形象保持一致。Favicon 可帮助用户识别网站；缺少图标或图标不正确会降低信任度。

调用时：首次使用时，如果有帮助，可先用 1-2 句话介绍此技能涵盖的内容及其重要性，然后提供主要输出。后续使用或用户要求跳过时，直接提供主要输出。

初步评估

项目背景： 如果根目录中存在 contextus.md，请阅读并仅加载与此任务相关的模块。没有 Contextus 时，请使用现有项目材料或用户提供的信息，并询问缺失的信息；不要创建并行的上下文系统。

请确认：

  1. 技术栈：Next.js、WordPress、静态 HTML 等。
  2. PWA：网站是否为 PWA，或是否计划将其设为 PWA。
  3. 现有资源：徽标、图标文件

所需尺寸

尺寸用途
16x16浏览器标签页、标准显示屏
32x32Retina/HiDPI 浏览器标签页
180x180Apple Touch Icon（iOS 主屏幕）；不透明
192x192Android Chrome 主屏幕、PWA 启动器
512x512PWA 启动画面、自适应图标

可选：48x48、96x96、120x120、152x152、167x167、256x256，以覆盖更多场景。

格式

格式用途
SVG现代浏览器；可缩放；可通过媒体查询支持深色模式；体积小
PNG高 DPI；可指定尺寸；易于生成；Apple Touch Icon 必需
ICO旧版格式；可打包多种尺寸；可供较旧浏览器回退使用

建议：提供 SVG 和 PNG 回退格式。切勿省略 Apple Touch Icon（180x180）；如果没有它，iOS 会显示通用截图。

Google 搜索（SERP 展示）

有关 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 上。

实现

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

将以下文件放在 /app 中：favicon.ico、icon.png、apple-icon.png。Next.js 会自动生成标签。

PWA 清单

在 manifest.json 中加入 icons 数组，并为可遮罩图标提供 192x192 和 512x512 尺寸。

最佳实践

  • 简洁：在 16x16 尺寸下，复杂细节难以辨认；使用简化的徽标图案；设计时应考虑品牌在 SERP 中的辨识度
  • 一致性：Favicon 应与徽标/品牌保持一致（logo-generator、brand-visual-generator）
  • 缓存：使用较长的缓存时间；更新时使用版本号（例如 /favicon.ico?v=2）
  • 工具：使用 RealFaviconGenerator、favicon.io 或 favicons npm package 实现自动化
  • 测试：在不同浏览器、深色模式和 Search Console 中检查（favicon 可能需要数天至数周才会显示）

输出格式

  • 尺寸检查清单（16、32、180、192、512；Google 搜索需大于 48x48）
  • 格式建议（SVG、PNG、ICO）
  • 实现说明（针对各技术栈的首页页眉位置）
  • Google 搜索检查清单（可抓取性、稳定的 URL、适当的内容）
  • Manifest（如果是 PWA）

相关技能

  • logo-generator：Favicon 通常源自 logo；保持品牌形象一致
  • media-kit-page-generator：媒体资料包应包含 favicon 或指向品牌素材的链接
  • brand-visual-generator：视觉识别；favicon 与品牌颜色和标志保持一致
  • indexing：Favicon 需要可抓取的首页；使用 URL Inspection 检查是否已编入索引

评论

支持 Markdown