html 中 favicon 不显示，通常是因为使用了浏览器不支持的图片格式（如 heic），需改用 png、ico 或 jpeg 等标准格式，并确保路径和标签属性正确。
html 中 favicon 不显示，通常是因为使用了浏览器不支持的图片格式（如 heic），需改用 png、ico 或 jpeg 等标准格式，并确保路径和标签属性正确。
Favicon（网站图标）是出现在浏览器标签页、书签栏和地址栏左侧的小图标，对品牌识别和用户体验至关重要。但许多开发者在首次配置时会遇到图标不显示的问题——正如示例中所见：虽然 <link> 标签已正确声明，但浏览器仍显示默认地球图标。根本原因在于当前使用的 favicon.heic 和 apple-touch-icon.heic 文件格式不被任何主流浏览器支持。
✅ 正确做法如下：
-
转换图标格式：
将.heic文件导出为广泛兼容的格式：- 推荐首选
.ico（支持多尺寸、向后兼容性最佳，尤其适用于 Windows 和旧版浏览器）； - 其次推荐
.png（简洁通用，支持透明度，适合现代浏览器）； - 避免使用
.heic、.webp（部分旧浏览器不支持）、.svg（仅 Chrome/Firefox 较新版本支持，且不推荐用于传统 favicon）。
- 推荐首选
-
更新 HTML 中的链接标签：
<!-- 标准 favicon（ICO 格式，兼容性最强） --> <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon"><!-- 可选：高分辨率 PNG favicon（现代浏览器友好） --><link rel="icon" href="assets/img/favicon-32x32.png" sizes="32x32" type="image/png"><link rel="icon" href="assets/img/favicon-16x16.png" sizes="16x16" type="image/png"><!-- Apple 设备触控图标（必须为 PNG，且需指定尺寸） --><link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" sizes="180x180">
-
关键注意事项：
- ✅
rel="icon"是必填项；type属性建议显式声明（如image/x-icon或image/png），有助于浏览器快速解析； - ✅ Apple 图标必须为 PNG 格式，且不能是
.heic或带透明底的非标准尺寸（推荐 180×180 像素）； - ⚠️ 浏览器会缓存 favicon，修改后请强制刷新（Ctrl+Shift+R / Cmd+Shift+R）或清空浏览器图标缓存；
- ⚠️ 确保文件路径真实存在，且服务器允许静态资源访问（检查浏览器开发者工具 → Network 标签页中 favicon 请求是否返回 200）；
- ? 进阶建议：可生成包含多尺寸的
.ico文件（如 16×16、32×32、48×48），单个文件即可适配不同场景。
- ✅
完成以上步骤后，保存并重新加载页面，favicon 即可正常显示。记住：格式兼容性永远优先于图像质量——再精美的 HEIC 图标，也无法在浏览器中渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
