Favicon 是出现在浏览器标签上你的网站标题前的 标志。你可以使用任何你喜欢的图片作为你的网站图标。它的作用是使你的 网站具有吸引力，而不是在浏览器窗口上显示一个空白的文件图标。添加一个图标也有助于在一个浏览器窗口中打开的标签数量之间 识别 你的 网站。
任何类型的图像都可以作为一个图标，或者你可以使用不同的免费标志制作工具来创建你的图标，然后在HTML的标题标签中添加你的网站标题。此外，在使用图片作为图标时，你应该记住，小图片往往效果更好。
在本指南中，我们将简要地讨论在 HTML 中 添加 一个 图标 的问题。所以，让我们开始吧!
一、favicon 极简方案
在HTML中为你的网站添加一个图标
要在HTML中添加一个图标到你的网站，请遵循以下步骤。
第1步：将图片转换为”.ico “或”.png “文件
添加favicon，需要使用.png或.ico文件格式。如果你没有.png或.ico文件，那么先用不同的免费在线可用工具，如 ICO转换，进行转换。下一步是将favicon添加到网站上。
第2步：将转换后的图片添加到项目目录中
将转换后的favicon图片添加到你的网站项目目录中，你的主要”index.html “文件位于该目录中。例如，我们在”PROJECT1 “目录下添加了我们的”favicon.ico “文件。
下面的片段显示了HTML中网站标题的基本代码。favicon将被添加到“title”元素之后。
在这一点上，我们还没有将添加的”favicon.ico “链接到我们的HTML文件。所以它将显示以下输出。
第三步：在链接标签中提供图片的路径
第一种方法：放在根目录
这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。
第二种方法：link标签
使用“title”元素并提供图片的路径，如下面代码块所示。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
在添加了”title”元素后，我们将保存该文件并在网络浏览器上访问该文件以查看结果。
上面给出的图片显示，我们添加的favicon图片被成功地设置为网站的图标。
历史上的 favicon 问题
favicon.ico 服务旧式浏览器
ICO 文件其实有个目录结构可以打包不同分辨率的文件。我建议仅使用单张 32×32 的图片，除非你的图片不能很好的缩放到 16×16（比如变得更模糊）。在这种情况下，你可以要求你的设计师制作一个特殊版本的 Logo 以适应小像素网格。
不要自作聪明地用文件夹结构存放静态文件和 cache busters。网站 https://example.com 应该有一个 favicon 位于 https://example.com/favicon.ico 。 有些工具，例如 RSS 阅读器只会从服务器请求 /favicon.ico，而不会去其他地方请求了。
具有明暗版本的单个 SVG 图标服务现代浏览器
SVG 是一种描述曲线而不是像素点的矢量格式。在大尺寸图片中，它比栅格图片更高效。在本文写作时，有 72% 的浏览器支持 SVG 格式。
你的 HTML 页面 <head> 中应该有个 <link> 标签，标签的属性是 rel="icon"，type="image/svg+xml" 且 href 指向 SVG 文件的链接。
SVG 是一种可以包含 <style> 标签来描述 CSS 的 XML 格式。和任何的 CSS 一样，它可以包含媒体查询，比如 @media (prefers-color-scheme: dark)。这样允许你使用同个图标在浅色和深色系统主题之间切换。
180×180 PNG 图片服务 Apple 设备
Apple touch icon 是一个 Apple 设备会在你添加网页到 iPhone 或 iPad 屏幕快捷方式时使用的图片。你的 HTML 页面 head 中应该有个<link rel="apple-touch-icon" href="apple-touch-icon.png> 标签。
iPad 自 iOS 8 之后要求 180×180 的分辨率。其他设备会对图片进行缩放，但如果我们提供的质量够高的源文件，缩放便不会对终端用户造成伤害（后面我会再讲）。
小笔记： 如果你添加为 Apple touch icon 添加 20px 的 padding 和添加背景色，它观感会更好。你可以使用任何图片编辑器做到这点。
192×192 和 512×512 的 PNG 图片在 Web app manifest 中服务 Android 设备
Web app manifest 是一个 JSON 文件，其中包含浏览器将你的网站安装为系统应用的所有细节。该格式最初来自 Google 的 PWA 计划。
你的 HTML 页面应该有个
<link rel="manifest" href="path.webmanifest">标签链接到 manifest 文件。Manifest 应该有个 icon 字段链接到两个图标。
192×192显示在屏幕上，512×512将作为PWA加载时的界面使用。
{
"icons": [
{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}
二、favicon 终极解决方案
步骤1 准备 SVG
确保你的 SVG 图像是正方形，用图片浏览器打开你的源文件检查图像的长宽。SVG 的大小可以轻易地通过 SVG 编辑器调整。在 [Inkscape] 中，你可以在文件 → 文档属性中修改文件大小，可以在对象 → 对齐与分散中使 logo 居中放置。
用 icon.svg 保存你的文件。现在让我们来折腾一下我们的 SVG，让它更好地适应现代的系统主题。问一下你的设计师，在深色主题下颜色要如何反转（如果是黑白色的 Logo，你只需要把黑色改成白色）。
现在用文本编辑器打开你的 SVG 文件。找到暗色的或者没有 fill 的 <path>。添加在主题变化时触发的 CSS 媒体查询并且修改 fill 为你想要的颜色：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
@media (prefers-color-scheme: dark) {
.a { fill: #f0f0f0 }
}
</style>
<path class="a" fill="#0f0f0f" d="…" />
</svg>
步骤2 创建 ICO 文件
在栅格图像编辑器中打开你的 SVG 文件。我推荐使用 GIMP；它免费开源且支持多平台。
在导入时将 SVG 渲染为光栅图像。设置宽度和高度为 32px。将文件导出为 favicon.ico，导出的图标细节选择 32bpp，8 位 alpha，无调色板选项。
如果你没有 GIMP 的话可以安装 Inkscape 和 ImageMagick，然后在终端里将 SVG 转为 ico：
inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png
将图片缩放到 16×16 并检查图标是否清晰。如果变得太模糊，最好是去找你的设计师制作一个微缩版本的 logo。
将另外的 16×16 版本包含进图标里：
打开 32×32 的 favicon.ico。
创建一个 16×16 的新图层。
将 16×16 版本的图标放到图层里面。
导出文件。GIMP会保存每个大小布局并作为一个单独的图标输出。
或者你可以通过 ImageMagick 做一样的事情：
convert ./icon32.png ./icon16.png ./favicon.ico
步骤3 创建 PNG 图像
再一次在栅格图像编辑器中打开你的 SVG 原文件，并且创建一个 512×512 的图片并导出为 icon-512.png。再将图片缩放到 192×192 并导出为 icon-192.png。最后将图片本身缩放到 140×140 并将画布设置为 180×180，将它导出为 apple-touch-icon.png。
或者你可以用 Inkscape 做一样的事情：
inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"
步骤4 优化 PNG 和 SVG
优化 SVG 的最好工具是 SVGO。使用方法：
npx svgo --multipass icon.svg
Squoosh 是一个强大的栅格图片网页优化工具。
在 Squoosh 中打开你的 icon-512.png。
将压缩设置修改为 OxiPNG。
启用 “Reduce palette”
设置 64 色。
通过移动滑块对比转换前/后的效果。如果看到前后肉眼可见的差别时便提高颜色数量以到看不出差别。
保存文件。
为 icon-192.png 和 apple-touch-icon.png重复以上步骤。
步骤5 添加图标到 HTML
你需要将 favicon.ico 和 apple-touch-icon.png 用 link 添加到你的 HTML 中。
静态 HTML：
<title>My website</title>
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
但是，我们更推荐使用 bundler 生成 cache busters（将文件的 hash 包含在名称中作为指纹）。如果你使用 Webpack 和 [html-webpack-plugin]:
创建 index.html 模板
添加模板到插件的设置：
new HtmlWebpackPlugin({ template: "./view/index.html" });用
links在 HTML 模板中声明（例子使用 ERB 来引用文件，但你可以使用你选择的模板语言）：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My website</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" href="<%= require('./icon.svg').default %>"> <link rel="apple-touch-icon" href="<%= require('./apple-touch-icon.png').default %>" > </head> <body></body> </html>使用 copy-webpack-plugin 来复制 favicon 而不添加 hash 到它的名称上。
步骤6 创建一个 web app manifest
对于静态 HTML，创建个 JSON 文件并命名为 manifest.webmanifest 即可：
{
"name": "My website",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
链接到 HTML 中：
<title>My website</title>
+ <link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
使用 Webpack 的话，你可以使用 webpack-pwa-manifest 插件：
plugins: [
…,
new WebpackPwaManifest({
name: 'My website',
icons: [
{ src: resolve('./icon-192.png'), sizes: '192x192' },
{ src: resolve('./icon512.png'), sizes: '512x512 }
]
})
]
谢谢你阅读这篇文章！如你所见，使用现代的 web 标准后，创建一个终极 favicon 集的任务也变得相当直接了。即使你跟着上面的步骤动手制作也不会花多少时间，但如果有个自动化工具会让这件事更加 amazing！如果你愿意制作这样子的工具的话请通过 Twitter 与我联系；我会非常高兴帮助你！
总结
要在HTML中添加一个图标，首先要选择一个图像，并使用任何在线图像转换工具（如 ICO转换）将其转换为”.ico”或”.png”格式。
之后，将转换后的图片添加到你的项目目录中，然后利用”link rel="shortcut icon" href="favicon.ico" type="image/x-icon“标签将其与HTML文件链接。本指南演示了如何使用HTML将favicon添加到你的网站。