favicon制作 css
favicon 制作与 CSS 引用方法
制作 favicon 的基本方法
使用在线工具或设计软件（如 Photoshop、Figma）创建 favicon 图像，推荐尺寸为 16x16、32x32 或 64x64 像素。保存为 .ico 格式（兼容性最佳）或 .png 格式（现代浏览器支持）。
通过 HTML 引用 favicon
在 HTML 的 <head> 部分添加以下代码，引用 favicon 文件：
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">使用 CSS 控制 favicon 显示
虽然无法直接通过 CSS 修改 favicon，但可以通过伪元素或背景图像模拟类似效果。例如，为特定元素添加自定义图标：
.custom-icon::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('custom-favicon.png');
background-size: contain;
}动态切换 favicon 的 JavaScript 方法
通过 JavaScript 动态修改 favicon 的 href 属性，实现不同场景下的图标切换：
document.querySelector("link[rel='icon']").href = "new-favicon.ico";响应式 favicon 的实现
通过 media 属性为不同设备或主题提供不同的 favicon：
<link rel="icon" href="light.ico" media="(prefers-color-scheme: light)">
<link rel="icon" href="dark.ico" media="(prefers-color-scheme: dark)">使用 SVG 格式的 favicon
现代浏览器支持 SVG 格式的 favicon，文件更小且可缩放：
<link rel="icon" href="favicon.svg" type="image/svg+xml">多平台图标适配
为不同平台（如 Apple 设备）提供专用图标：
<link rel="apple-touch-icon" href="apple-touch-icon.png">验证 favicon 的正确性
使用浏览器开发者工具检查 favicon 是否加载成功，或通过在线验证工具检测多平台兼容性。
