📅 最后修改于: 2023-12-03 15:09:07.037000 🧑 作者: Mango
当用户在浏览器中打开您的网站时，它们将看到浏览器选项卡中的标题和图标。 添加一个网站图标可以让您的网站在当用户多个标签页面打开多个标签而有助于用户轻松找到您的网站。
在本文中，我们将介绍如何使用CSS将图标添加到您的网站选项卡。
在添加之前，需要准备带有.ico扩展名的图标。 可以使用在线制作工具，也可以使用OS自带的图标编辑器，例如macOS上的预览和Windows上的MS Paint。
请将您的图标文件命名为favicon.ico并将其放置在您的网站根目录中。
在HTML文件的<head>标签中添加以下标记以引用您的图标文件：
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
这将告诉浏览器您的网站的标志是哪一个。
网站图标的大小可以在CSS中进行调整。将以下代码添加到您的CSS文件中以更改图标大小：
/* 此处的 "32" 可更改为所需的大小 */
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="32x32">
刷新您的网站并在浏览器选项卡上查看您的新图标！
使用CSS将图标添加到您的网站选项卡非常容易，只需要几个简单的步骤。 这将提高您的网站的品牌和可见性！