将 Favicon 添加到 HTML

Favicon是指网站上显示在浏览器标签页、书签栏或任务栏上的小图标。它是网站的标识符，也有助于提升网站的可识别性和专业性。下面是添加Favicon的方法。

1. 创建 Favicon 图标

在添加Favicon之前，你需要创建一个ico格式的图片。可以使用在线工具或Photoshop等软件创建。

2. 把 Favicon 图标放到服务器上

将ico格式的Favicon图片放在网站根目录或子目录下，确保Favicon可以访问。

3. 添加 Favicon 到 HTML 页面

在HTML页面的头部添加如下代码：

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

这行代码会从服务器根目录下访问favicon.ico文件，并显示在浏览器标签页上。

如果你的Favicon图片不在根目录，需要通过href指定文件路径：

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

以上代码会从服务器images文件夹下访问favicon.ico文件，并显示在浏览器标签页上。

4. 添加苹果 Touch 图标

对于苹果设备，你还需要添加苹果Touch图标以提高用户体验。在头部添加如下代码：

<!-- iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<!-- iPad Retina -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<!-- iPhone Retina -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<!-- iPad -->
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<!-- iPhone, iPod Touch and Android 2.1+ -->
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">

以上代码向苹果设备展示多个Touch图标，以便在不同设备上最大化用户体验。

总结：以上就是如何将 Favicon 图标添加到 HTML 页面的方法，要点是创建Favicon图标、放到服务器上、并在HTML页面添加<link>标签。