免费在 GitHub 公开中文介绍

favicons

检查浏览器标签页、书签和手机主屏幕使用的网站图标，协助生成适合不同设备的格式与尺寸，并核对HTML声明及PWA配置。

原文查看原文说明

Use when reviewing templates, rendered HTML, or shared components related to Implement favicons for all devices. Validate the final browser-facing markup, not just the source framework abstraction.

thedaviddias/Front-End-Checklist

实测评分未实测

查看安装方法

适用场景

准备标签页和书签图标
配置手机主屏幕图标
核对PWA图标配置
检查支持深色模式的SVG图标

中文介绍

功能

此技能检查浏览器标签页、书签和手机主屏幕显示的网站图标，协助准备所需图片并完善配置。检查内容包括ICO、PNG、SVG及移动设备图标的格式、尺寸和HTML声明，也包括PWA这类网页应用在manifest.json中设置的多种图标尺寸。

适用场景

适合在网站发布前查找缺失的图标，或需要统一不同浏览器与设备上的图标显示时使用。也可用于检查支持深色模式的SVG favicon，以及共用模板生成的图标声明。检查既涉及图标文件，也涉及页面最终输出的配置。

使用示例

“检查网站的favicon，列出缺少的格式和尺寸。”
“完善移动设备和PWA的图标配置。”
“核对生成的HTML中的图标声明。”

注意事项

资料给出的最低配置为32×32的favicon.ico和180×180的apple-touch-icon.png。列出的生成工具包括RealFaviconGenerator和favicons npm包。最终应在交付给浏览器的HTML中验证配置。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

文档检查

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果（实测对比）。

安全性发送数据、删除文件、执行命令等是否有说明: A良好涉及图片生成和配置修改，但未指示外部发送、删除或读取凭据。
安装难易度所需工具和 API 密钥是否少且有说明: B部分不足列出RealFaviconGenerator和favicons npm包，但未提供配置或安装步骤。

不计入评分。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md1.7 KB
references/rule.md21.0 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Implement favicons for all devices

Missing or low-quality favicons make sites look unprofessional in browser tabs, bookmarks, and home screens—damaging brand recognition and user trust.

Quick Reference

Minimum: favicon.ico (32x32) + apple-touch-icon.png (180x180)
Modern: SVG favicon with dark mode support
PWA: Include in manifest.json with multiple sizes
Use RealFaviconGenerator or favicons npm package

Check

Verify that all necessary favicon formats and sizes are implemented correctly for optimal display across different browsers, devices, and platforms.

Fix

Generate and implement a complete favicon set including ICO, PNG, SVG, and mobile/PWA icons with proper HTML declarations.

Explain

Explain how proper favicon implementation improves brand recognition, user experience, and ensures consistent display across all browsers and devices.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Implement favicons for all devices. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/html/favicons

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能