Favicon 产生器

一个网站实际需要的东西

只回给你一张 PNG 的产生器并没有把事情做完。一个网站需要的是这一整堆麻烦的东西：

• favicon.ico，同一个文件里包含 16、32、48px。就算你从来没有连结过它，浏览器仍然会照 那个路径去要。
• favicon-96x96.png，给高分辨率显示器。
• apple-touch-icon.png，180px，给 iOS 主画面。
• android-chrome-192x192.png 和 512x512，由 manifest 引用。
• site.webmanifest，里面填好那两个图示。
• <link> 和 <meta> 区块，这是最常写错的部分。

全部打包成一个 zip 输出。

这里做对的两件事

**Apple 图示会填上背景。**Safari 会把 apple-touch-icon 叠在黑色上，所以透明背景的标志到了 别人的主画面上会带着一圈黑。填上背景就是解法，而且默认是开启的。

**缩图是分段做的。**从 512px 一次 drawImage 到 16px，采样太稀疏，结果就是一团糊。反复对半 缩小则会把整张图平均下来，而在 16px 时，这个差别就是「看得懂的符号」和「一团脏污」的差别。

为 16 像素而设计

一个 16px 的 favicon 大约就是 40 个实体像素的空白。完整的标志不可能撑得住。

挑出最强的那一个元素——一个字母、一个字标、一个形状——其余全部舍弃。细的笔画会消失，所以要加粗。 精细的细节会变成杂讯。而且要同时在浅色和深色的浏览器主题下检查，因为透明背景上的深色标志在深色 模式下会直接不见。

请在分页上以实际大小检视，而不是在屏幕上放到 100% 看。

没有任何上传

整组文件都在这个页面里产生，zip 也是在内存里组出来的。