网站图标 Favicon 制作教程：从 PNG 到 ICO 完整流程
给网站换上自己的小图标，说难不难，但步骤比想象中多一步：设计、转换、部署、验证，每一步都有小坑。这篇按顺序讲一遍，你照着走，十分钟搞定。
第一步：准备素材
找一张或画一张你的 logo 图。几个建议：
- 方形。图标显示区域永远是正方形，横图竖图都会被裁。
- 主体居中、四周留白，别让元素贴边。
- PNG 带透明背景最好，深浅色主题下都好看。
第二步：设计上注意"小尺寸可读性"
16×16 像素下，你的 logo 会被压缩到一枚硬币的指甲盖大小。所以：去掉过细的线条、过小的文字，颜色对比拉大，主体尽量简化。看着大图挺美、缩小后成一团墨的 logo 太多了。
第三步：转成多尺寸 ICO
用图片转ICO工具，把 PNG 拖进去，尺寸模式选"Favicon 套装"（16+32+48）或"完整套装"（6 个尺寸），下载 favicon.ico。工具在浏览器本地跑，图片不上传，透明背景自动保留。
第四步：部署到网站
两种方式，推荐都做：
- 把 favicon.ico 放到网站根目录，浏览器找不到图标时会自动来这里找。
- 在 HTML 的
<head>里加上：<link rel="icon" href="/favicon.ico">，显式声明。
第五步：验证 + 多平台补充
刷新页面看标签页图标，没变就强刷（Ctrl+F5），还不行检查文件是否真的部署到位、路径对不对。换浏览器、换设备各看一遍，确认 16px 小图和收藏夹里都正常。
进阶一步：iPhone/iPad 的"添加到主屏幕"用的是 apple-touch-icon，可以额外准备一张 180×180 的 PNG：<link rel="apple-touch-icon" href="/apple-touch-icon.png">。这个属于锦上添花，先用 favicon.ico 把基础打牢。
常见问题速查
- 图标是白底？源图没透明通道，或用了老式 BMP 打包，重新用现代 PNG 内嵌方式生成。
- 非正方形图片？用居中裁剪，别用拉伸。
- 标签页不显示？浏览器缓存了旧图标，强刷或换个浏览器验证。