📅 最后修改于: 2023-12-03 15:23:39.169000 🧑 作者: Mango
如果你正在开发一个网站，并想要添加一个垃圾桶图标 Favicon 到你的网站中，你可以使用 CSS 创建它。
Favicon 是一个网站的标志性图标，通常显示在浏览器的标签和书签栏上。Favicon 的大小通常为 16x16 像素。
要创建 Favicon，你需要先创建一个 16x16 像素的 .png 格式的图标。然后，在 HTML 中添加以下代码：
<link rel="shortcut icon" type="image/png" href="favicon.png">
使用 CSS，你可以将 Favicon 设为垃圾桶图标。以下是 CSS 代码示例：
/* 垃圾桶图标 */
body {
background-color: #f5f5f5;
}
/* 添加垃圾桶背景 */
.favicon {
background-color: #ff6961;
border-radius: 50%;
padding: 2px;
width: 16px;
height: 16px;
}
/* 添加垃圾桶图标 */
.favicon::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 292'%3E%3Cpath d='M229.7,94.5h-23.6V72.6C206.2,32.6,172.6,0,131.8,0c-40.8,0-74.4,32.6-76.6,72.6v21.9H31.2c-3.3,0-6,2.7-6,6s2.7,6,6,6h32.5v120.5c0,33.1,21.1,60.9,50.3,71.7v56.3h74.7v-56.3c29.1-10.8,50.3-38.6,50.3-71.7V106.5h32.5c3.3,0,6-2.7,6-6S233.1,94.5,229.7,94.5z M131.8,28c30.4,0,55.1,24.4,56.4,54.6H75.4C76.7,52.4,101.4,28,131.8,28z M63.2,98.3h165.6c-2,21.5-9.9,41.5-22.5,57.5H85.7C73.1,139.8,65.2,119.9,63.2,98.3z M224.5,226.1c0,13.7-8.8,25.7-21.9,30.2V106.5h21.9V226.1z M107.2,256.3c-13.1-4.4-21.9-16.4-21.9-30.2v-94.8h21.9V256.3z M84.7,79.3h122.6c1.6-18.1,8.6-34.3,19.6-46.9H65C75.9,45,83.1,61.2,84.7,79.3z M128.5,285.7c18,0,32.7-14.6,32.7-32.6s-14.6-32.6-32.7-32.6s-32.7,14.6-32.7,32.6S110.5,285.7,128.5,285.7z'%3E%3C/path%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
以上 CSS 代码将在背景上添加一个垃圾桶图标。要将此代码添加到网站中，你可以将其包含在 style 标签中，或将其保存为外部样式表并在 head 中包含它。
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<style>
/* 将上述 CSS 代码添加到这里 */
</style>
</head>
现在你已经知道如何使用 CSS 创建垃圾桶图标 Favicon 了。记得在创建 Favicon 时，将其大小调整为 16x16 像素，并在 HTML 中添加一个 link 标签。
CSS 代码示例中，我们使用 ::before 为 Favicon 添加图标。你也可以通过 ::after 来添加图标。