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