favicon制作 css
favicon制作方法
使用CSS制作favicon通常需要结合HTML和图像处理工具。以下是几种常见方法：
使用Emoji作为favicon
通过CSS和HTML将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>">此方法利用SVG内联数据URI，将Emoji字符渲染为图标。修改🔍为任意Emoji即可更换图标。
使用CSS生成的图形
通过纯CSS生成简单几何图形作为favicon：
<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='%2342b983'/></svg>">示例创建了一个绿色圆形图标。可通过修改SVG代码改变形状和颜色：
circle替换为rect可创建矩形fill属性更改颜色（十六进制需URL编码，如%23代替#）
使用外部工具生成CSS favicon
- 设计16x16或32x32像素的图标
- 通过在线工具（如favicon.io）转换为ICO格式
- 获取生成的代码片段插入HTML头部：
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
响应式favicon实现
根据 prefers-color-scheme 切换亮暗模式图标：
<link rel="icon" href="light.ico" media="(prefers-color-scheme: light)">
<link rel="icon" href="dark.ico" media="(prefers-color-scheme: dark)">注意事项
- 传统favicon标准尺寸为16x16、32x32像素
- 现代浏览器支持PNG/SVG格式，但IE需要ICO格式
- SVG favicon具有矢量缩放优势
- 多平台适配需准备多种尺寸图标文件
以上方法可根据项目需求选择，简易项目推荐Emoji或CSS生成的SVG方案，专业项目建议使用设计工具制作多尺寸图标集。
