网页标题和图标由与唯一决定：标题必须置于内且无属性，favicon需指定type与sizes，iOS需额外声明apple-touch-icon并用纯色PNG。
网页标题和图标不是靠“教程感”堆出来的，而是由 两个标签决定的，其他写法多数无效或被忽略。
标题必须用
浏览器标签页显示的文字、SEO 抓取的主标题、微信内嵌浏览器的分享标题，全部依赖这个标签。它不接受属性（比如 lang 或 class），也不支持 HTML 标签嵌套。
- ✅ 正确写法：
我的个人主页 - ❌ 常见错误：把
里（部分浏览器会渲染，但不符合标准，SEO 失效） - ❌ 错误假设：用
或document.title = "..."替代 —— 这些只影响页面内容或运行时，不替代 HTML 结构中的声明 - ⚠️ 注意：中文、符号、空格都允许，但长度建议控制在 60 字符内，超出可能被搜索引擎截断
Favicon 图标必须用
图标不是“加个图片就行”，浏览器对 rel="icon" 的解析非常严格：默认只认 .ico 格式（尤其旧版 IE），现代浏览器虽支持 .png，但必须显式声明 type 且尺寸合理。
- ✅ 推荐写法（兼顾兼容与现代）：
- ❌ 常见错误：只写
（缺rel="icon"，浏览器直接忽略） - ❌ 错误假设：把图标放在
- ⚠️ 注意：
sizes属性仅对rel="icon"有效；rel="shortcut icon"是历史写法，已不必要；/favicon.ico会被浏览器自动请求，即使没写，所以务必确保该路径存在或返回 404（否则 404 日志刷屏）
移动端图标（Apple Touch Icon）要单独声明，不能复用 favicon
iOS Safari 添加到主屏幕时，不会读取 ，而只找 rel="apple-touch-icon"，且默认期望 PNG、无透明边框、带圆角（系统自动加）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须写法：
- ✅ 建议提供多尺寸（iOS 会按需选取）：
- ❌ 不要指望
favicon.ico自动适配 —— iOS 完全不识别 .ico 作为 touch icon - ⚠️ 注意：图标背景必须是纯色（推荐 #000000 或 #FFFFFF），避免透明底导致灰色模糊；文件名不能随意改，除非同步更新所有
href
HTML5 中没有“新头部标签”能替代
所谓“HTML5 头部增强”是误导。HTML5 规范并未新增标题或图标声明方式， 仍是唯一标准方案。所谓“meta 标题”（如 ）只用于社交平台分享，不影响浏览器标签页。
- ✅ 社交优化可补充：
- ❌ 混淆用途：把
og:title当作页面标题写，会导致 SEO 和实际体验脱节 - ⚠️ 注意：
og:title可微调适配社交场景，但不要偏离核心信息
最容易被忽略的是 favicon 的自动请求行为和 Apple Touch Icon 的强制命名逻辑 —— 它们不报错，但不按规范写，就等于没设。
