HTML中link图标设置 HTML中link标签rel="icon"属性

必须用 rel="icon"，不可用 rel="shortcut icon" 或 rel="apple-touch-icon"；需声明 type 属性、使用绝对路径、优先提供 .ico 多尺寸文件并补充 PNG；注意缓存、服务器配置及移动端额外要求。 rel="icon" 的写法和常见错误 必须用 ，不能写成 或 （后者是独立用途）。现代浏览器只认 作为标准 favicon 关联方式；旧写法可能在某些场景下被兼容，但行为不可靠，尤其在 PWA 或桌面安装场景下会失效。 常见错误包括： 漏掉 属性导致 MIME 类型推断失败（比如 .ico 文件没声明 ） 路径写成相对路径但未考虑 HTML 所在层级（如子目录页加载根目录下的 必须用绝对路径） 多个 标签并存时，浏览器按顺序取第一个合法且可加载的，后面即使尺寸更优也忽略 支持的格式和尺寸怎么选 Chrome、Edge、Firefox 支持 、 、 ；Safari 目前不支持 作为 favicon（仅支持 场景）。 推荐组合方案： 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 主图标用 ：兼容所有浏览器，包含 16×16 和 32×32 多尺寸（Windows 任务栏、地址栏小图标都依赖这个） 补充高清 PNG：加一条 ，供 Android PWA 使用 不要只放 而不配 ，否则 IE 和老 Edge 会 fallback 到默认文档图标 为什么加了 link 但图标还是不显示 最常被忽略的是缓存问题：浏览器对 有强缓存策略，哪怕你改了 HTML 中的 ，它仍可能请求旧路径或旧文件。排查顺序如下： 打开开发者工具 → Network 标签页 → 刷新页面 → 筛选 ，看是否返回 404 或 304 检查响应头中是否有 或 过长；本地开发可用 强制刷新 确认服务器是否拦截了 请求（Nginx/Apache 常配置为拒绝非白名单后缀，需显式放开 ） SVG 图标必须是「无交互、无脚本」的静态内容，含 或外部引用的 SVG 会被多数浏览器拒载 移动端和 PWA 场景要额外加什么 单纯 不足以支撑 iOS 添加到主屏幕或 Android 安装 PWA。必须配合： iOS 需要 ，且要求 PNG、无透明边框、尺寸至少 180×180 PWA 必须有 ，其中 字段定义不同尺寸的 PNG，且该文件需通过 声明 注意：iOS 不读取 ，所以 是 iOS 独立必需项，漏掉就无法正确显示添加到主屏幕的图标 实际项目里，一个图标资源往往要导出至少 4 种：16×16.ico、32×32.ico、180×180.png（iOS）、192×192.png（PWA），少一个就可能在某个环境掉链子。