网站图标多终端适配实现

要解决的具体问题

网站图标看似简单，但不同终端对尺寸、格式和声明方式的要求差异极大。浏览器标签页需要清晰的小图标，移动设备主屏幕依赖 Apple Touch Icon 和 Android Chrome 的标准，而 Google 搜索结果中的图标展示还涉及爬虫可访问性和品牌一致性。缺失或适配不当会导致用户无法快速识别网站，甚至影响品牌信任度。

技能如何工作

核心能力

• 项目上下文识别：优先检查 .claude/project-context.md 或 .cursor/project-context.md，获取品牌和视觉识别信息；识别技术栈（如 Next.js、WordPress、静态 HTML）、PWA 状态及现有资产（Logo、图标文件）。
• 尺寸与格式规范：覆盖关键尺寸（16×16、32×32、180×180、192×192、512×512），推荐 SVG+PNG 组合，强调 Apple Touch Icon 的必要性。
• 多终端实现指南：提供 HTML <link> 标签示例（如 rel="icon"、rel="apple-touch-icon"），适配 Next.js 的 /app 目录自动生成机制，指导 PWA Manifest 的 icons 数组配置。
• Google 搜索优化：明确 hostname 规则、爬虫可访问性（不阻止 Googlebot-Image 和首页抓取）、稳定 URL 要求及 Search Console 的索引请求流程。
• 最佳实践：包括简化设计（16×16 场景下避免复杂细节）、缓存策略（/favicon.ico?v=2）、跨浏览器测试及工具推荐（RealFaviconGenerator、favicon.io）。

关键步骤

1. 读取项目上下文，识别技术栈和现有资产。
2. 根据使用场景确定所需尺寸（如 16×16 用于浏览器标签，180×180 用于 iOS 主屏幕）。
3. 选择格式组合（推荐 SVG+PNG，兼容 ICO 用于旧浏览器）。
4. 按技术栈实现标签声明（如 Next.js 放入 /app 目录的 favicon.ico 和 icon.png）。
5. 配置 PWA Manifest（若适用），确保 192×192 和 512×512 图标支持 maskable。
6. 验证 Google 搜索展示要求（不阻止爬虫、稳定 URL、正方形图标）。

适用边界与注意点

• 不自动修改项目文件或安装依赖，所有命令和代码仅作为参考。
• 需手动确认涉及外部写入（如发布、部署）的操作，避免未经授权的修改。
• Google 搜索中的图标展示可能需要数天至数周索引，需通过 Search Console 主动请求。
• 复杂 Logo 在 16×16 尺寸下可能失真，需简化设计以保证识别度。