7. title 标签与 favicon

本节目标：理解 <title> 的作用和 SEO 意义，学会设置 favicon 小图标。

<head> 里最重要的一个标签就是 <title>。它不只是”写个标题”那么简单。

title 标签

<title>码上学 - HTML5 入门教程</title>

<title> 的内容会出现在三个地方：

浏览器标签页：你打开的每个页面，标签上显示的就是 title
搜索引擎结果：搜索结果的蓝色可点击标题
收藏夹：你收藏页面时，默认名字就是 title

Tip

title 是 SEO 的重要元素。写一个准确、有描述性的标题，能让你的页面更容易被搜到。

title 怎么写

几个建议：

标题控制在 50-60 个字符以内
包含核心关键词，但不要堆砌
每个页面的 title 应该不同
格式：本页标题 - 网站名

<!-- 好的写法 -->
<title>什么是 HTML？- 码上学</title>

<!-- 不好的写法 -->
<title>首页</title>
<title>码上学 码上学 码上学 HTML CSS JS 前端教程</title>

h1 和 title 的区别

初学者容易混淆这两个：

<title>：显示在浏览器标签和搜索结果里，用户不一定在页面里看到
<h1>：页面内容的标题，用户直接在页面里看到

一个页面通常只有一个 <h1>，它和 <title> 内容往往相似但不完全相同。

favicon：浏览器标签上的小图标

你在浏览器标签页上看到的那个小图标，就是 favicon。

设置方式：

<link rel="icon" href="favicon.ico" type="image/x-icon">

把 favicon.ico 文件放在网站根目录，大多数浏览器会自动读取。如果想显式声明：

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png">

支持的格式

格式	说明
`.ico`	传统格式，兼容性最好
`.png`	现代浏览器都支持，推荐
`.svg`	矢量，清晰度高，现代浏览器支持
`.gif`	不推荐，除非做动画 favicon

尺寸建议

常用尺寸：16x16、32x32、48x48 像素
iOS 设备：180x180（apple-touch-icon）

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Note

favicon 改了之后，浏览器可能有缓存。如果看不到新图标，试试 Ctrl+F5 强制刷新，或者换个浏览器测试。

完整 head 示例

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 是什么？- 码上学</title>
  <meta name="description" content="HTML5 入门教程">
  <link rel="icon" href="/favicon.png" type="image/png">
</head>

小结

<title> 影响 SEO 和浏览器标签显示
每个页面写一个独特的 title
<h1> 是页面内标题，<title> 是浏览器标签标题
favicon 用 <link rel="icon"> 引入
推荐用 PNG 或 ICO 格式

下一节，我们讲 <style> 和 <link> 标签。