网页标题和图标由与唯一决定：标题必须置于内且无属性，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"，浏览器直接忽略）
• ❌ 错误假设：把图标放在 或 css 背景里 —— 那只是页面元素，不是 favicon
• ⚠️ 注意：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 的强制命名逻辑 —— 它们不报错，但不按规范写，就等于没设。