设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
Favicon 生成器
上传图片或输入字母，生成多尺寸图标与 favicon.ico
工具面板
本地处理关于Favicon 生成器
一次生成 16–512 共八个尺寸，并把 16/32/48 打包成一个 favicon.ico；也可以用字母或 Emoji 生成图标，不必先准备图片。
- 1
一次生成 8 个尺寸（16 / 32 / 48 / 64 / 128 / 180 / 192 / 512），并把 16 / 32 / 48 **打包进一个 `favicon.ico`**——这三个服务于老浏览器、Windows 快捷方式与收藏夹，ICO 里塞更多只是让文件变大。
- 2
源可以是**文字**（首字母或 emoji，可调底色、前景色）或一张图片；文字模式适合还没有 logo 的项目，出图即用。
- 3
附带的 `<link>` 片段就是当前推荐写法：`favicon.ico` 兜兼容、32×32 PNG 给现代浏览器、180×180 给 iOS 主屏、`site.webmanifest` 给 Android/PWA。
- 1
选模式：文字或图片
文字模式填一个字符（字母或 emoji）；图片模式选择一张方形图片效果最好。
- 2
下载 favicon.ico 与各尺寸 PNG
ICO 一个文件、PNG 逐个下载（文件名带尺寸，便于直接放进 public/）。
- 3
把 link 片段贴进 <head>
复制那段 `<link>` 声明，别只放一个 .ico——iOS 与 Android 靠另外两项拿主屏图标。
兼容：老浏览器、Windows 快捷方式、RSS 阅读器与部分爬虫会直接请求 `/favicon.ico`，只提供 PNG 时它们拿不到图标。一个含 16/32/48 的 ICO 就全覆盖了，成本只有几百字节。
不能——本工具从位图或渲染出来的文字生成 PNG。矢量图标需要有源 SVG 文件，然后在 `<head>` 里用 `<link rel="icon" type="image/svg+xml">` 指过去；如果你已经有 SVG，就不需要这个工具了。
相关工具
查看全部设计工具
颜色对比度
检查前背景色对比是否符合的可访问性标准
设计工具
设计工具
渐变色生成器
可视化创建漂亮的 CSS 线性或径向渐变
设计工具
设计工具
CSS 阴影生成器
可视化调节并复制 box-shadow 代码
设计工具
设计工具
单位换算
各领域物理单位的精准换算
设计工具
设计工具
字节转换
在 B, KB, MB, GB, TB 间进行转换
设计工具
设计工具
CSS 圆角生成器
可视化调节四角圆角并复制 border-radius 代码
设计工具
设计工具
CSS 裁剪路径生成器
拖动顶点调整形状，复制 clip-path: polygon() 代码
设计工具