精选HTML网页收藏夹图标标签的编写代码-html教程-PHP中文网

最稳妥做法是将 favicon.ico 放在网站根目录，因浏览器默认自动请求 /favicon.ico；若放其他路径，须显式声明 link 标签并确保路径、mime 类型（image/x-icon）及服务器配置均正确。

精选html网页收藏夹图标标签的编写代码

favicon.ico 文件路径必须放在根目录才最稳妥

浏览器对 favicon.ico 的默认查找行为是：不声明标签时，自动向网站根目录发起 GET 请求获取 /favicon.ico。哪怕你写了 <link rel="icon">，如果路径写错或服务器没配好，仍可能 404 或 fallback 到根路径请求——结果还是失败。

最省心做法：把图标文件命名为 favicon.ico，直接丢到网站根目录（如 https://example.com/favicon.ico）
若放其他路径（比如 /assets/favicon.ico），必须显式声明，且确保路径可访问、MIME 类型正确（image/x-icon）
Nginx/Apache 若未配置 .ico 类型，可能返回 text/plain，导致 Chrome 等浏览器拒绝加载

HTML 中用比老式 rel="shortcut icon" 更可靠

旧写法 <link rel="shortcut icon" href="favicon.ico"> 是 IE 时代遗留，现代浏览器已不依赖它。当前标准推荐统一用 rel="icon"，并支持多种格式和尺寸。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

基础写法：<link rel="icon" href="/favicon.ico">
支持 PNG（推荐高清屏）：<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
支持多尺寸可选（如 PWA 场景）：<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
不要混用多个 rel="icon" 且未指定 sizes，否则某些浏览器（如 Safari）可能随机选一个

Safari iOS 收藏夹图标必须用 apple-touch-icon

iOS Safari 添加网页到主屏幕时，完全忽略 rel="icon"，只认 rel="apple-touch-icon"。没这个标签，就显示网页截图——模糊、无圆角、不能自定义。

必须提供至少一个：<link rel="apple-touch-icon" href="/apple-touch-icon.png">
推荐尺寸：180×180 像素（iPhone X 及更新机型），文件名无关，但路径要准确
别加 sizes 属性——iOS 不识别，反而可能干扰；Safari 会自动缩放，但原始图越清晰越好
如果用了 Web App Manifest（manifest.json），其中的 icons 数组优先级高于 apple-touch-icon，但 iOS 仍只读后者

Chrome 和 Edge 新版对 manifest.json 的依赖越来越强

桌面端 Chrome 从 v93 起，收藏夹里显示的图标来源优先级是：Web App Manifest > rel="icon" > favicon.ico。没 manifest.json，就退化到传统方式；有但没配 icons，也可能回退失败。

最小可用 manifest：

{
  "name": "My Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

HTML 中必须挂载：<link rel="manifest" href="/manifest.json">，且响应头需含 Content-Type: application/manifest+json
注意：manifest 文件路径必须同源，不能跨域；JSON 格式错误会导致整个图标链失效

实际项目里最容易被忽略的是服务器配置和 MIME 类型——图标文件存在、路径正确、HTML 标签也写了，但因为 Nginx 没配 types { image/x-icon ico; }，或者 Express 没设 res.set('Content-Type', 'image/x-icon')，结果图标静默失效。