设置favicon的核心是使用<link>标签，答案是在html的<head>部分添加<link rel="icon" href="图标路径" type="图标mime类型">，推荐使用png或ico格式，也可用svg支持矢量缩放，通过在线工具或图像软件生成多尺寸图标并正确配置路径与mime类型，若不显示需排查缓存、路径、格式及服务器配置问题，最终确保浏览器能正确加载并在标签页、收藏夹中正常显示网站小图标。
favicon图标，简单来说，就是浏览器标签页上、收藏夹里，以及一些APP里显示的小图标。它能让你的网站更容易被用户识别，提升品牌形象。设置favicon并不难，核心就在于
<link>标签的使用。
解决方案：
在HTML文档的
<head>部分，使用
<link>标签来指定favicon图标的路径。最常见的做法是使用以下代码：
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel="icon"告诉浏览器这是一个favicon图标。
href="favicon.ico"指定了图标文件的路径。
type="image/x-icon"定义了图标的MIME类型。
当然，favicon不一定是
.ico格式。现在更推荐使用
.png格式，因为
.png格式支持透明度，而且兼容性更好。如果使用
.png格式，代码如下：
<link rel="icon" type="image/png" href="favicon.png">
你还可以根据不同设备设置不同尺寸的favicon，比如：
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
这样，浏览器会根据设备的像素密度选择合适的图标。
为什么我的favicon不显示？常见问题排查
有时候，你按照上述步骤设置了favicon，但浏览器仍然没有显示。这可能是以下原因导致的：
- 缓存问题： 浏览器可能会缓存旧的favicon。尝试清除浏览器缓存，或者使用硬刷新（Ctrl + Shift + R 或 Cmd + Shift + R）。
-
路径错误： 确保
href
属性中的路径是正确的，favicon文件确实存在于该路径下。 -
文件格式问题： 某些浏览器可能不支持特定的favicon格式。建议使用
.ico
或.png
格式。 -
服务器配置问题： 某些服务器可能没有正确配置MIME类型。确保服务器配置了
image/x-icon
或image/png
的MIME类型。 -
favicon.ico放置位置： 有些浏览器（特别是旧版本）会默认在网站根目录下寻找
favicon.ico
文件。如果你的favicon文件不在根目录下，浏览器可能找不到它。
除了ico和png，还可以用什么格式的favicon？
除了
.ico和
.png，你还可以使用
.svg格式的favicon。
.svg格式的优点是矢量图形，可以无损缩放，在高分辨率屏幕上显示效果更好。
使用
.svg格式的favicon，代码如下：
<link rel="icon" href="favicon.svg" type="image/svg+xml">
需要注意的是，并非所有浏览器都支持
.svg格式的favicon。但是，随着浏览器技术的不断发展，
.svg格式的favicon将会越来越普及。
如何生成favicon图标？有哪些工具可以使用？
生成favicon图标有很多工具可以使用。
- 在线favicon生成器： 有很多在线favicon生成器，比如RealFaviconGenerator、Favicon.io等。这些工具可以让你上传一张图片，然后自动生成各种尺寸的favicon图标，并生成相应的HTML代码。
- 图像编辑软件： 你可以使用Photoshop、GIMP等图像编辑软件手动创建favicon图标。
- 命令行工具： 还有一些命令行工具可以用来生成favicon图标，比如imagemagick。
选择哪种工具取决于你的需求和技能水平。如果你只需要快速生成一个简单的favicon图标，在线favicon生成器是一个不错的选择。如果你需要更精细的控制，或者需要创建更复杂的favicon图标，图像编辑软件或命令行工具可能更适合你。
无论使用哪种工具，都要注意favicon图标的尺寸和格式。一般来说，favicon图标的尺寸应该为16x16像素、32x32像素、48x48像素等。格式建议使用
.ico或
.png。
