Favicon 检测

离线检查粘贴的 <link rel="icon"> 片段或域名路径列表：核对 rel / sizes / type 组合、是否缺 sizes="any"、apple-touch-icon 与 manifest，列出缺失项并给出可直接粘贴的代码。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

粘贴内容

可以粘贴页面的 <link rel="icon"> 片段，也可以一行一个写域名或路径；全部离线分析，不发任何请求。

示例

检查结果

检查依据 W3C Web App Manifest、Apple apple-touch-icon 约定与浏览器对 sizes="any" 的支持；本工具只做静态文本分析，无法验证图标文件是否真的可访问或图片尺寸是否正确。

识别为： HTML 片段解析到 1 个 link 标签评分： 68

缺失项

16 × 16 PNG 标签页图标favicon-16
32 × 32 PNG 高清图标favicon-32
apple-touch-icon（iOS 主屏）apple-touch-icon
192 × 192 PNG（Android / manifest）icon-192
512 × 512 PNG（启动画面）icon-512
site.webmanifest 链接manifest
SVG 图标（sizes="any"）svg-any
maskable 图标maskable

问题

警告缺少：16 × 16 PNG 标签页图标
警告缺少：32 × 32 PNG 高清图标
警告缺少：apple-touch-icon（iOS 主屏）
警告缺少：192 × 192 PNG（Android / manifest）
警告缺少：512 × 512 PNG（启动画面）
警告缺少：site.webmanifest 链接
提示缺少：SVG 图标（sizes="any"）
提示缺少：maskable 图标

建议代码

HTML 片段

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="512x512" href="/maskable-512x512.png">
<link rel="manifest" href="/site.webmanifest">

manifest 片段

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

按上面的缺失项补齐后，主流浏览器与 iOS 主屏都能正常显示。

这个工具能做什么

上线前自查 <head>：把图标相关的那几行 <link> 复制进来，一次看清缺 favicon.ico、缺 apple-touch-icon 还是缺 manifest。
接手别人的项目时核对图标体系：粘贴片段即可知道有没有 sizes="any" 的 SVG、有没有 maskable 图标。
排查「某些浏览器不显示图标」：检测会指出 type 与扩展名不一致、sizes 写法不合法、href 用了相对路径这类常见笔误。
只有一份图标路径清单（没有 HTML）时也能用：一行一个路径，工具按文件名推断哪些标准文件缺了。

示例

输入

<link rel="icon" href="/favicon.ico">

输出

识别为 HTML 片段，解析到 1 个 link 标签；评分 68；缺失项 8 条：16 × 16 PNG、32 × 32 PNG、apple-touch-icon、192 × 192 PNG、512 × 512 PNG、site.webmanifest 链接、SVG 图标（sizes="any"）、maskable 图标；并给出可直接粘贴的完整 HTML 片段。

favicon.ico 已经提供，所以不会出现在缺失项里；其余 6 个必检项按 warning 计分（每个扣 5 分），2 个建议项按提示计分（每个扣 1 分）。

常见问题

这个工具会去访问我的网站吗？

不会。它只分析你粘贴的文本：解析 link 标签、比对 rel / sizes / type 组合，然后给出结论。所有计算都在浏览器里完成，页面不发任何请求，所以它也无法判断图标文件是否真的能打开。

评分是怎么算的？

从 100 分开始，每个错误扣 15 分（例如完全没有图标标签、sizes 写法非法），每个警告扣 5 分（例如缺少 apple-touch-icon、type 与扩展名不一致），每个提示扣 1 分（例如 SVG 没写 sizes="any"）。分数只是粗评，用来快速判断缺口大小。

URL 列表模式为什么不能判断图片尺寸？

因为只有路径，没有声明信息。工具只能按文件名推断：favicon.ico 是否存在、有没有 apple-touch-icon.png、有没有 192/512 的 PNG、有没有 manifest 文件。要精确判断尺寸，请改用 HTML 片段模式。

type 与扩展名不一致要紧吗？

要紧。例如 href 指向 .png 却写 type="image/svg+xml"，部分浏览器会直接忽略这条声明，导致该尺寸的图标不生效。建议删掉 type 让浏览器自行判断，或写成正确的 MIME 类型。

检测通过就说明图标没问题了吗？

不完全是。这里只能确认声明是否齐全、写法是否正确；图片本身是否透明、尺寸是否真的是 180 × 180、路径是否 404，都需要在浏览器里实际打开确认。声明齐全只是必要条件。

关键词：favicon checkerfavicon validatorapple touch icon checkweb manifest iconshead link auditFavicon 检测图标检查离线校验link rel icon缺失项清单

这个工具能做什么

示例

常见问题

同类工具