png网站图标素材

上周帮朋友改一个独立站的站图着陆页，光找图标就折腾了一下午。标素他原本用的站图是某套SVG图标库，结果在Safari上渲染出来边缘发虚，标素换成PNG之后问题立刻消失。站图这不是标素SVG不好，而是站图PNG在图标素材这个场景里，依然有它不可替代的标素位置。

PNG最直接的站图优势是透明通道。做网站导航栏、标素按钮、站图卡片角标，标素图标底下往往压着渐变背景或者照片，站图没有透明底根本没法用。标素JPEG做不到，站图GIF边缘锯齿感人，WebP兼容性又还没到可以闭眼用的程度。PNG的alpha通道是8位的，256级透明度，半透明阴影、羽化边缘都能保留。你去看那些设计精良的电商网站，购物车图标、搜索放大镜、用户头像占位符，大概率还是PNG。

另一个被低估的点是PNG的无损压缩。图标这种大面积纯色、硬边缘的图形，PNG压完体积极小。一个32×32的箭头图标，PNG可能只有几百字节。有人觉得PNG文件大，那是拿照片去存了。图标场景下，PNG反而比很多人想象的轻。

去哪找PNG图标素材？我常用的几个站：

Flaticon——量大，分类细，免费用户需要标注来源。它的PNG下载支持自定义尺寸和颜色，但颜色替换有时候会留下毛边，得手动修。Iconfont（阿里巴巴矢量图标库）——国内项目首选，中文搜索友好，很多图标直接提供PNG格式，质量参差但胜在方便。IconArchive——老牌站点，风格偏拟物和早期扁平化，适合需要复古感的项目。PNGTree——除了图标还有大量PNG素材，免费下载有次数限制，商用要注意授权。

下载PNG图标有几个坑得避开。第一，尺寸别贪大。一个用于16×16显示位置的图标，下512×512的版本纯属浪费，浏览器缩放还容易糊。按实际显示尺寸的2倍下载就够了，适配Retina屏。第二，注意图标的“留白”。有些PNG图标自带大量透明边距，放进按钮里会发现图标偏小或者对不齐，得用图片编辑工具裁掉多余透明区域。第三，颜色模式。网页用RGB，别下成CMYK的，否则某些浏览器颜色会偏。

自己切PNG图标也有讲究。从AI或Sketch导出时，选“导出为PNG”并勾选“透明背景”，分辨率设72dpi就够。如果图标有描边，导出后检查一下边缘有没有半透明杂边，有的话在导出设置里把“背景”设为透明，或者手动在Photoshop里用“消除锯齿”重新处理。

有个细节：PNG-8和PNG-24的区别。PNG-8只支持256色，纯色图标够用，体积更小。PNG-24支持1600万色，适合有渐变或阴影的图标。现在很多工具默认导出PNG-24，其实纯色图标用PNG-8能再省30%体积。TinyPNG这类压缩工具也是基于这个原理做有损压缩的，压完肉眼几乎看不出区别。

说个真实案例。之前做一个后台管理系统，侧边栏图标用了某套线性SVG，结果在低分辨率显示器上线条细得看不清。后来全部换成24×24的PNG，线条加粗到2px，问题解决。SVG适合复杂图形和需要动态变色的场景，PNG适合小尺寸、固定颜色的图标。选哪个，看具体需求，别跟风。

最后提一句版权。免费PNG图标站很多，但授权协议五花八门。CC0最省心，MIT次之，有些要求署名，有些禁止商用。下之前花十秒看一眼License，比事后收到律师函强。