favicon不生效首要原因是rel属性必须为"icon"，chrome 90+和firefox 84+已不再响应rel="shortcut icon"；其次需确保href路径正确、服务器返回200状态及正确mime类型（image/x-icon），并注意pwa和移动端需额外配置apple-touch-icon与manifest.json。
favicon 路径没生效？先确认 rel 值必须是 "icon"
浏览器只认 rel="icon"（不是 "shortcut icon"，也不是 "favicon"），旧写法 rel="shortcut icon" 虽然部分浏览器兼容，但 Chrome 90+、Firefox 84+ 已明确只响应 rel="icon"。漏掉这个或拼错，图标根本不会加载。
-
<link rel="icon" href="/favicon.ico">✅ 最简可靠写法 -
<link rel="shortcut icon" href="/favicon.ico">❌ 现代浏览器忽略 -
<link rel="icon" href="favicon.png">⚠️ PNG 可用，但需显式声明type
ICO 还是 PNG？优先用 .ico，多尺寸 PNG 需配 sizes
.ico 文件天然支持多分辨率（16×16、32×32、48×48 等），浏览器自动选最适尺寸；而 .png 必须手动指定 sizes，否则可能在地址栏或书签里显示模糊或拉伸。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 单文件通用：用
favicon.ico放在根目录，<link rel="icon" href="/favicon.ico"> - 想用 PNG：必须加
sizes和type，例如<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"> - 不要只写
<link rel="icon" href="/favicon.png">—— 浏览器会当成 16×16 渲染，小屏设备上糊成一团
Chrome 不显示 favicon？检查 HTTP 状态码和 MIME 类型
即使 link 写对了，如果服务器返回 404、403 或把 .ico 当作 text/plain 发送，Chrome 直接放弃加载，且控制台不报错 —— 只是静默失败。
- 打开开发者工具 → Network → 刷新页面 → 找到
favicon.ico请求，看 Status 是否为 200，Type 是否为image/x-icon（.ico）或image/png（.png） - Nginx 示例配置：
location = /favicon.ico { alias /var/www/static/favicon.ico; }，避免被后端路由拦截 - 本地开发时用 file:// 协议？Chrome 会直接禁用 favicon 加载 —— 必须起本地服务（如
npx serve）
移动端 PWA 图标要单独处理，link[rel="icon"] 不管用
苹果 Safari 的 apple-touch-icon、Android Chrome 的 manifest.json 图标，都不走 rel="icon"。它们是独立机制，漏掉就导致添加到主屏幕时图标为空白或默认浏览器图标。
- 苹果设备：加
<link rel="apple-touch-icon" href="/icon-180x180.png">，建议 180×180 PNG，无圆角、无透明边距 - PWA：必须提供
manifest.json，并在 HTML 中关联：<link rel="manifest" href="/manifest.json"> - 别指望一个
favicon.ico全平台通吃 —— iOS、Android、桌面 Chrome 各自解析不同字段，各自缓存策略也不同
.ico 文件常被忽略或误判类型。宁可多加一行 type="image/x-icon"，也别依赖服务器自动推断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
