HTML模板怎么配置Favicon图标_品牌识别快速实现【技巧】-html教程-PHP中文网

favicon不显示主因是路径错误、content-type不匹配或缓存问题；必须将favicon.ico置于根目录并返回image/x-icon，html中link需带type和sizes（ico用sizes="any"，png需精确尺寸）。

html模板怎么配置favicon图标_品牌识别快速实现【技巧】

favicon 不显示，90% 的问题出在路径、响应头或缓存上，而不是 <link> 标签写错了。

主流浏览器（Chrome、Firefox、Edge）会无条件发起一次 GET /favicon.ico 请求，不管你的 HTML 里有没有 <link>。如果这个请求返回 404 或 403，图标大概率不显示，甚至可能拖慢首屏渲染。

确保文件真实存在于网站根目录（例如 Nginx 的 /usr/share/nginx/html/favicon.ico，或 Flask 的 static/favicon.ico 并已启用静态路由）
检查服务器是否配置了正确的 MIME 类型：image/x-icon；Nginx 需在 types 块中显式声明：image/x-icon ico;
用 DevTools → Network → 过滤 favicon.ico，点开请求看 Response Headers 中的 Content-Type 是否为 image/x-icon
别把 favicon.ico 放进 /assets/ 或 /images/ —— 即使你在 href 里写了完整路径，浏览器仍会先发一次无意义的根路径请求，404 会影响优先级

现代浏览器（Chrome 94+、Firefox 89+）对 <link rel="icon"> 的校验变严格：漏掉 type 或错误使用 sizes 会导致该条目被直接忽略，连控制台都不报错。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

ICO 文件推荐写法：<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any"> —— sizes="any" 是 Chrome 94+ 强制要求，不加就跳过
PNG 文件必须同时带 type="image/png" 和精确的 sizes（如 sizes="32x32"），不能写成 sizes="32" 或 sizes="32px"
不要写两个 rel="icon" 都指向 PNG 却不带 sizes，部分 Android 浏览器会随机加载失败
避免混用旧写法：rel="shortcut icon" 已被 Chrome 废弃，仅保留 rel="icon" 即可

框架默认行为 ≠ 实际生效行为。public 目录放了文件，不代表它真能被浏览器访问到，更不代表 <link> 能正确解析路径。

Next.js：必须把 favicon.ico 放进 public/，并在 app/layout.tsx 或 pages/_document.tsx 中手动写 <link>；仅靠 public/ 自动挂载无效
Vite：开发时热更新不触发 favicon 刷新，改了图标后必须清浏览器缓存（甚至重启 dev server），否则看到的还是旧图
Create React App：首次 build 后修改 public/favicon.ico，需删掉 build/ 目录重构建，否则旧文件残留
所有框架都要验证：打开 https://yoursite.com/favicon.ico 能否直接下载图标，HTTP 状态码是不是 200

你写一堆 <link>，浏览器不会“从上往下读，第一个有效就用”，而是根据设备像素比、是否是 PWA、是否在 iOS 主屏幕添加等场景，动态匹配最合适的那一条。

apple-touch-icon 只在 iOS 添加到主屏幕时生效，且 sizes="180x180" 必须和 PNG 文件实际分辨率一致，否则 fallback 到模糊版本
mask-icon（用于 Safari 固定标签页）只支持 SVG，且需配 color 属性，rel="icon" 加 SVG 是无效的
多个 rel="icon" 共存没问题，但每条都必须完整：有 href、type、尺寸匹配的 sizes（PNG/SVG）或 sizes="any"（ICO）
HTTPS 页面里不能引用 HTTP 的 favicon 路径，混合内容会被现代浏览器静默屏蔽