favicon制作 css
使用CSS制作Favicon
Favicon通常通过<link>标签引入外部ICO或PNG文件，但纯CSS方法可以利用Emoji或Unicode字符作为替代方案。以下是几种实现方式：
通过Emoji作为Favicon
在HTML的<head>部分添加以下代码，将Emoji直接设为Favicon：
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔍</text></svg>">- 替换
🔍为任意Emoji（如⭐、❤️等）。 - 此方法生成SVG格式的Favicon，兼容现代浏览器。
使用CSS自定义形状
通过伪元素和CSS绘制简单图形（需配合HTML占位）：
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23FF0000'/></svg>">- 示例绘制了一个红色圆形，修改
fill颜色或路径可调整图形。 - SVG支持
circle、rect、path等基础绘图元素。
动态Favicon（结合JavaScript）
通过JavaScript动态修改Favicon的CSS样式（如颜色变化）：
<link id="dynamic-favicon" rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23000000'/></svg>">
<script>
document.getElementById('dynamic-favicon').href =
"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23" +
Math.floor(Math.random()*16777215).toString(16) + "'/></svg>";
</script>- 此代码随机生成一个彩色圆形Favicon。
- 颜色值通过十六进制随机生成（
16777215为#FFFFFF的十进制值）。
注意事项
- 传统Favicon仍推荐使用ICO或PNG格式（尺寸建议16x16或32x32）。
- 纯CSS/SVG方法适用于快速原型或动态需求，但复杂图标仍需设计工具生成。
- 测试时清除浏览器缓存以确保更新生效。
