做一个圆形 logo 的网站图标，转完却发现原本透明的地方变成白底或黑底，放在深色浏览器标签栏里格外扎眼。这个问题我踩过，根因几乎都是同一件事：透明通道在转换过程中没被保留。下面讲清原因和做法。
透明通道到底是什么
PNG 支持 alpha 透明通道，也就是每个像素除了颜色还有「透明度」。ICO 格式本身支持透明（用 32 位含 alpha 的方式），所以透明图标在技术上完全可行——前提是转换工具真的把 alpha 带过去了。
而 JPG 天生没有透明通道。如果你拿一张 JPG 当源图，它本来就没有透明信息，转出来的 ICO 自然只能用白或黑填满那些「空」的地方。
怎么做出透明背景的 ICO
用 NBTools 的 图片转 ICO 工具，浏览器本地处理、文件不上传：
- 源图必须是带透明背景的 PNG（在 Photoshop / Figma / 截图去背后导出）
- 上传 PNG，勾选需要的尺寸档（如 16/32/48/256）
- 直接点转换，工具会保留 PNG 的透明通道生成 ICO
- 下载后放到网站根目录，深色背景下也能看到干净的镂空效果
我实测一张带透明背景的圆形 logo PNG 转成 ICO 后，在浏览器标签栏和文件管理器里透明区域都正常显示，没有白底。
背景变白/变黑的常见原因
| 现象 | 最可能的原因 | 解决办法 |
|---|---|---|
| 透明处变白 | 源图是 JPG，本身无透明；或工具丢弃了 alpha | 改用带透明通道的 PNG 源图，并用会保留透明的工具 |
| 透明处变黑 | 某些旧环境把未定义 alpha 的像素当黑色填充 | 确保源图 alpha 完整，且导出的是 32 位 ICO |
| 边缘有灰边/杂色 | 源图去背不干净，半透明边缘残留 | 在源图阶段把边缘处理干净再转换 |
透明图标的小提醒
- 深色背景测试：在深色浏览器标签栏或文件夹里看一眼，确保镂空正常
- 边缘保留一点余量：小尺寸（16×16）下，半透明羽化边缘容易被吃掉，主体尽量往中间放
- 圆角效果可选：如果需要更现代的观感，工具还提供圆角选项，但透明镂空本身与圆角无关，是源图决定的
常见问题
为什么我用别的工具转完是白底
有些工具在转换时会先把图垫一层白底再写 ICO，等于主动丢掉了透明信息。换用能保留 alpha 通道的工具（如 NBTools）即可避免。
JPG 能做出透明图标吗
不能。JPG 格式不包含透明通道，任何工具都没法凭空还原透明。请先用 PNG 源图。
透明 ICO 在所有浏览器都正常吗
现代桌面浏览器对 32 位含 alpha 的 ICO 支持都比较好；个别很老的环境可能显示异常，发布前用目标环境预览确认即可。