免费在 GitHub 公开中文介绍

favicon

检查并完善浏览器标签页和搜索结果使用的网站图标设置，核对HTML声明、图片格式与尺寸、HTTPS访问和抓取限制，帮助排查图标不显示的问题。

原文查看原文说明

Use when checking whether a site has a correctly configured favicon, auditing `<link rel='icon'>` tags in the `<head>`, or setting up favicon infrastructure for a new project.

thedaviddias/Front-End-Checklist

AI 评分90分/ 100 查看安装方法

适用场景

检查现有网站的图标设置
为新项目配置网站图标
排查搜索结果不显示图标的原因
添加iOS主屏幕图标

中文介绍

功能

检查浏览器标签页、书签和搜索结果使用的网站图标设置，协助新增或修正配置。检查范围包括<head>中的<link rel="icon">、引用的图片文件，以及图片尺寸和格式。还会确认图片URL是否返回HTTP 200、能否通过HTTPS获取，以及robots.txt是否阻止访问。

适用场景

适合为新网站准备图标，或排查已配置图标却无法显示的原因。可按用途检查所需文件及HTML声明，包括用于兼容的ICO文件、SVG或PNG图片，以及iOS主屏幕图标，核对各类图标的配置。

使用示例

“检查各页面的网站图标声明和图片URL，告诉我缺少哪些配置。”
“放置favicon.ico、favicon.svg和apple-touch-icon.png，并添加所需标签。”

注意事项

资料规定，Google Search使用的图片至少为48×48px，iOS图标为180×180px。针对Google的验证步骤包括使用Search Console中的网址检查工具。

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

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确用于现有网站检查和新配置，并列出图标声明与访问条件的检查。
步骤具体性步骤、输入输出和示例是否具体: A良好列出三个待创建文件、放置位置、HTML示例和HTTP 200验证步骤。
安全性发送数据、删除文件、执行命令等是否有说明: A良好明确新增文件和标签的范围，并要求检查响应与访问限制。
安装难易度所需工具和 API 密钥是否少且有说明: B部分不足验证包括使用Search Console，但未说明启用及权限准备。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

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

包含的文件（2）

SKILL.md2.9 KB
references/rule.md3.5 KB

SKILL.md（原文）

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

Add a favicon to every page

Google displays favicons next to search results on mobile devices, making your brand immediately recognisable in the SERP. A missing or inaccessible favicon prevents Google from showing it, reducing visual brand presence in search.

Quick Reference

Provide a <link rel="icon"> pointing to a favicon file; Google uses it to identify your site in search results
Serve the favicon via HTTPS, ensure it is publicly accessible (not blocked by robots.txt), and at least 48×48px for Google's use
Include both an ICO fallback and SVG/PNG versions for broad browser and device compatibility

Check

In the page <head>, look for <link rel="icon"> or <link rel="shortcut icon"> elements. Verify: (1) The href points to an accessible URL (returns 200, not blocked by robots.txt). (2) The file is at least 48×48px (for Google Search use). (3) A PNG or SVG version is provided alongside the ICO fallback. (4) The favicon is accessible over HTTPS.

Fix

Create favicon files:
- favicon.ico (16×16 and 32×32, ICO format) — legacy browser fallback
- favicon.svg (scalable, modern browsers)
- apple-touch-icon.png (180×180 PNG) — iOS home screen
Place them in the root or /public directory.

Add to <head>:

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

Verify the favicon URL returns a 200 response (not 404).
Check that /robots.txt does not block the favicon path.
Test Google's display using the URL Inspection tool in Search Console.

Explain

Favicons appear next to your site's name in browser tabs, bookmarks, and Google Search mobile results. Google explicitly states it uses the favicon from <link rel='icon'> for display in search results. A missing, blocked, or too-small favicon means Google cannot show your brand icon, reducing search result click-through rate.

Code Review

Check the <head> for <link rel='icon'> and <link rel='apple-touch-icon'>. Verify the href values are valid relative or absolute paths. Confirm the favicon files exist and return HTTP 200. Flag if only favicon.ico at site root is used without an explicit <link> element (relying on browser default discovery is less reliable).

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

Rule page: https://frontendchecklist.io/rules/seo/favicon

评价

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

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

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

同一仓库的技能