怎样做出在Retina显示屏上不模糊的favicon

过去，一个小小的favicon.ico就够整个网络用了。这种日子早已过去多年，而许多图标看起来模糊，正是因为人们还把它当成够用。

作者：PulsarKit · 发布于2026年9月8日 · 更新于2026年10月16日

一个小图标文件从来不可能适配所有屏幕

浏览器标签页、手机主屏幕上的快捷方式、高密度笔记本电脑屏幕上的应用图标，各自需要不同的像素尺寸。把同一个小图标拉伸去适配所有这些地方，结果只在其中一处清晰，在其余地方都发虚。浏览器至今仍会到网站根目录请求传统的favicon.ico，它仍然是答案的一部分。但它诞生时，屏幕的分辨率远比现在低，而且它从一开始就不是要独自承担全部任务的那个文件。

为什么一整套图标要分这么多个文件

一套合格的图标，也就是Favicon生成器用一张源图生成的那种，同时满足好几种用途，而不只是同一种用途的几种尺寸。16和32像素的PNG用于普通和高像素密度下的浏览器标签页；180像素的图标用于有人把网站添加到iPhone主屏幕的时候；192和512像素的图标则必须写进渐进式Web应用（PWA）的清单，应用才能安装。每种尺寸存在，都是因为有某个地方需要这个尺寸，并不是为了冗余而冗余。少了其中一个，对应的那个位置就会退而使用一个更模糊的替代品，或者干脆什么都不显示。

唯一一个故意不能保持透明的文件

有人把网站添加到手机主屏幕时，iOS不会把透明图标合成到什么合适的底色上。它会把所有透明区域填成纯黑色，于是透明背景上的干净标志一落到主屏幕上，就变成一块又暗又难看的方块。用于这个位置的图标，需要事先有意把透明部分合并到一种真实的背景色上，而不是像这套图标里的其他尺寸那样保留透明。其他图标都可以在源图透明的地方保持透明，因为浏览器标签页和桌面快捷方式都能正确显示透明效果。

为什么用矢量源图做出的16像素图标更清晰

做成SVG的标志（扁平的位图标志可以用PNG转SVG矢量化成SVG）可以根据矢量形状，在每个目标尺寸上重新渲染，而不是先生成一张大图，再为每个更小的版本反复缩小。这种差别在这套图标里最小的尺寸上最明显。从一张大尺寸位图母版缩小得到的标志，到16像素时往往糊成一团，细线条和细节都消失了。而在同样小的尺寸上直接从矢量路径渲染出来的版本，线条依然清晰，因为它从来不是一张被缩小的大图，而是一开始就按这个尺寸画出来的。这也是为什么手工渲染单个图标时，要用SVG转PNG按精确的像素尺寸输出，而不是交给图片缩放工具。对于带细字标或细轮廓的标志来说，这就是标签栏里一个认得出的图标和一团灰色污迹之间的区别。

maskable图标之所以存在，是因为Android不尊重图标原本的形状

Android会把已安装应用的图标裁剪成设备或启动器选定的形状：圆形、圆角方形、超椭圆。不管图标原本画成什么形状，它都会这样裁，所以一个普通的方形图标可能恰好在边缘处丢掉重要内容，丢掉多少只取决于碰巧套用了哪种形状。maskable图标（可遮罩图标）把所有有意义的内容都放在图像中间大约百分之八十的范围内，从而避开这个问题。这样每条边周围都留出了安全边距，任何形状都可以把这部分裁掉，而不会丢掉设计里任何重要的东西。

常见错误：源图太小，以及生成的图标从没链接到页面

图标模糊，问题很少出在生成器上。每种尺寸都从一张512像素的母版生成，所以任何更小的源图都要先拉伸到这个尺寸；源图小于大约260像素时，必须放大到两倍甚至更多，大尺寸的图标就会发虚。源图至少要512 × 512，最好用SVG；小于32像素的源图会被直接拒绝。第二个决定是非方形的标志怎样变成方形：从中心裁剪能让标志保持够大，但可能切掉较宽的字标；完整放入整张图并用一种颜色填充两侧，能让所有内容都可见，代价是标志变小。对于宽度远大于高度的标志，只含图形符号的方形版本通常比完整的组合标志更适合做源图。第三个错误发生在生成之后。这八个文件（加上maskable图标是九个）要放在网站根目录，head-snippet.html里的标签要放进每个页面的head；如果文件放在子文件夹里，就要相应修改代码片段里的href值，否则这些标签指向的是不存在的文件。最后，要在真实的浏览器标签页里检查16像素的图标，而不是在看图软件里看：在这个尺寸下，细轮廓或字标会变成一团灰色污迹，解决办法是换一个更简单的标志，而不是导出得更清晰。

本文用到的工具

Favicon生成器把一个Logo变成整套favicon：所有尺寸的PNG、多尺寸ICO、manifest文件，以及可以粘贴到head里的HTML标签。

PNG转SVG在浏览器中把PNG矢量化为可缩放的SVG。适合颜色不多的Logo和扁平图标，不适合照片。

SVG转PNG直接在浏览器中把SVG文件渲染成PNG，可按任意倍数或精确像素尺寸输出。绘制之前，脚本和外部链接会先被移除。