上线一个站点或者做一份产品介绍，图标和配图这两件事总是排在最后，又总是最容易做得七零八落：标签页上的小图一片模糊，页面上的配图一张偏黄一张偏蓝，主题色是从设计稿里肉眼取的一个大概值。
这几件事其实有固定的做法和固定的顺序。这篇把它串成一条流水线：先定图标，再从图标反推配色，最后用统一的相框和滤镜处理配图。
一、favicon 到底需要哪些尺寸
favicon 这个词现在已经不只指浏览器标签页上那个小图了，它泛指一整套在不同位置显示的应用图标。网站图标生成 从一张源图一次性导出这几档，各有明确用途：
- 16×16：浏览器标签页。这是最小、最考验设计的一档。
- 32×32：任务栏和书签栏。多数桌面浏览器实际取用的是这一档。
- 48×48：Windows 桌面快捷方式。
- 180×180：iOS 添加到主屏幕时用的图标。
- 192×192：Android 主屏与 PWA 安装。
- 512×512：PWA 的启动画面和应用商店样式的展示位。
简单记：
16 / 32 / 48 → 浏览器与桌面；180 → iOS；192 / 512 → Android 与 PWA
只做网站、不打算被安装成 App，勾「网站常用」那一组就够了。需要支持添加到主屏，就把 180 / 192 / 512 一起带上。工具在生成后会附一段可以直接粘进 HTML head 的引用代码，这一步别省——图标文件放对了但页面没引用，浏览器只会去根目录碰运气找 favicon.ico，其他尺寸一个都不会用到。
二、ICO 是一个容器，不是一种小图
这是最容易误解的一点。**.ico 不是「一张很小的图」，而是一个可以装多张不同尺寸位图的容器文件。**
所以「16 / 32 / 48 打包成一个 favicon.ico」这句话的意思是：这一个文件里同时存着三张图，浏览器或系统需要多大就从里面取对应的那一张，取不到才去缩放。这解释了两个常见现象：
- 为什么只放一个 32×32 的 PNG 改名成
.ico有时能用、有时糊掉：改名不改内容，它本质还是 PNG。部分浏览器宽容，能认；一旦系统需要 48 像素，只能把 32 的那张拉大，边缘就毛了。改扩展名不等于格式转换，这条在任何格式上都成立。 - 为什么多尺寸 ICO 更清晰：因为每个尺寸都是从大源图单独重采样出来的，而不是从某一档缩放两次得到的。
至于 favicon.ico 要不要放在网站根目录：放着最稳妥。即使你在 HTML 里写全了引用，仍然有一些抓取工具、阅读器、老浏览器只认根目录那个固定路径。
三、源图怎么准备，比参数更重要
工具能做适配，但补不回源图本身的问题。
尺寸：建议不低于 512×512，正方形。所有小尺寸都是从它缩下来的，源图不够大，512 那一档就得靠放大凑，一眼能看出来。
源图不是正方形时，工具提供三种适配方式，区别很实在：
- 留白：按原比例缩放后在短边两侧补背景色。图形不变形，代价是图案在图标里占比变小，16×16 那档会显得空。
- 裁剪：填满正方形，超出的部分切掉。图案占比最大，代价是边上的内容会丢，横构图的 Logo 用它可能把文字切掉一半。
- 拉伸：强行拉成正方形。除非源图本来就接近方形，否则不要用，圆会变成椭圆，字会变宽。
一般来说，Logo 优先用留白，照片类源图优先用裁剪。
内边距和圆角这两个参数对应的是平台的二次处理。Android 的自适应图标会按系统主题裁成圆形、方圆形等各种形状，iOS 也会自己套一层圆角，它们裁的是你图片的边缘。所以图案顶到边的图标在这些平台上会被啃掉一圈，给一点内边距（把图案往里收一些）能避免这个问题。反过来，自己在图片里画好圆角，落到会二次裁圆的平台上就是圆角套圆角，反而更奇怪——圆角是给不做二次处理的位置准备的。
16×16 这一档需要单独看一眼。 这是全套里唯一一个「设计必须为它让步」的尺寸：完整的 Logo 缩到 16 像素，细笔画会消失，多色渐变会糊成一团，文字基本不可读。可行的做法是用首字母、一个最有辨识度的图形元素、或者高对比度的单色简化版当图标，而不是硬塞完整 Logo。生成之后把 16 那张放大看一眼，如果自己都认不出来，用户在一排标签页里更认不出来。
四、从图片提主色，反推一套配色
图标定了，主题色就该跟着它走，页面和图标才是一套东西。图片配色提取 就是干这件事的：把图标、海报或设计稿传进去，直接读出主色。
它用的是中位切分量化：把所有像素当成颜色空间里的点，反复挑出色彩跨度最大的那一组，沿最宽的颜色通道按中位数切开。这个做法的好处是不会把名额浪费在几乎一样的渐变色上。如果只是简单统计「哪个颜色出现次数最多」，一张带渐变背景的图会占掉前七八个名额，全是肉眼看不出差别的邻近色，得到的色板毫无用处。
参数上有几个实际经验：
- 颜色数量给 5 到 6 个最好用。太少不够搭配，太多用不上——一套界面配色通常只需要一个主色、一个辅色、一个强调色，再加深浅两档中性色。
- 白底图和截图一定要勾「忽略接近纯白与纯黑的像素」。不勾的话，大片白色背景会理所当然地占掉占比第一名，剩下的名额也被浅灰挤走，最后拿到一串没有信息量的近白色。这是这个工具最值得记住的一个开关。
- 三种排序看的是不同的东西：按占比排，看的是「画面实际上是什么颜色」，第一个通常就该做主色；按色相排，看的是色轮上的分布，方便判断这套色是同色系还是撞色；按明度排，看的是深浅层次够不够，缺中间调的配色用在界面上会显得很跳。
结果会给出每种颜色的十六进制值、RGB 值和在画面中的占比，点色块直接复制色值。要落到代码里，可以直接导出成 CSS 变量、SCSS 变量、JSON 或纯 HEX 列表；要跟人对方案，下载一张带色值标注的色卡图片，比在聊天里贴一串 #RRGGBB 清楚得多。
一句提醒：提取出来的色不能直接全用在文字上。占比高的颜色往往是背景色，拿它当正文色会和背景对比度不足。取色之后，正文和背景之间的明暗差还得单独确认一遍，这一步没有工具能替你判断。
五、相框与滤镜：什么时候加，什么时候别加
配图的问题通常不是「不好看」，而是「不像一套」。这两个工具解决的正是一致性。
图片加边框与样机 提供四种样式，对应四种不同的需求：
- 纯色边框：按短边百分比加一圈等宽留白。按百分比而不是按固定像素，是这里的关键——换一张分辨率不同的图，视觉上的边框比例保持一致，一组图放在一起才齐整。
- 补成正方形：把图补白到 1:1、4:5、3:4 或 16:9。它解决的是平台按固定比例裁图的问题：与其让平台按自己的规则裁掉你的构图，不如自己先补成它要的比例，画面就一点都不会丢。
- 拍立得：四周加白边，底部留出更宽的一块写一行说明文字，支持中文。适合做产品图注、活动回顾这类需要一句话说明的图。
- 手机样机：把图放进带圆角和顶部挖孔的机身里。展示 App 截图、移动端网页设计稿时，套一个机身能立刻让人知道「这是手机上的界面」，比裸截图专业得多。
前两种样式还能加圆角和投影。投影要克制：列表和卡片里的图加轻微投影能分层，但一整页图人人都有投影，等于谁都没有分层。
图片滤镜 提供复古、清新、黑白、冷色调、暖色调等预设，也能手动调亮度、对比度、饱和度，还能调滤镜强度。用它的正确姿势是把强度当主要参数：预设直接拉满往往过火，一眼就是「加了滤镜」；把强度收到一半左右，效果通常是「这组图色调统一」，而后者才是你想要的。
具体取舍：
- 一组来源不同的照片：选同一个预设、同一个强度跑一遍，色调立刻收拢。这是滤镜最有价值的用法。
- 产品图、商品图：不要加色调类滤镜。买家看到的颜色和实物不一样是实打实的麻烦，最多轻微提一点对比度。
- 界面截图：不要加滤镜。截图的价值在于如实，加了反而让人怀疑真实性。
- 需要弱化的配图（背景插图、装饰图）：降低饱和度是最好用的一招，让它退到内容后面去，而不是用透明度硬压。
- 黑白：适合人物、纪实、老照片，也适合统一一组风格实在太杂的图。但黑白只去掉颜色，不去掉内容，别把它当成脱敏手段。
顺序上建议先滤镜再加框：滤镜作用于整张画面，如果先加了白边，白边也会被一起调色，白就不白了。
六、把流水线串起来
一个可以照着做的顺序：
- 准备一张不低于 512×512 的正方形源图，图案离边缘留一点余量。
- 用网站图标生成导出全套尺寸，打包下载，把
favicon.ico放到网站根目录，把附带的 HTML 引用代码粘进head。 - 放大检查 16×16 那一档，认不出来就回去做一版简化图形，重新生成。
- 把源图（或最终定稿的主视觉）丢进配色提取，取 5 到 6 色，勾上忽略纯白纯黑，导出 CSS 变量，定下主色、辅色、强调色。
- 配图统一走一遍滤镜，同一个预设、同一个强度。
- 需要上社交平台的配图用「补成正方形」按平台比例补白；需要展示界面的用手机样机；需要配文字说明的用拍立得。
下次改版时，这条流水线的前三步只要换一张源图就能重跑一遍，第四步的色值也会跟着更新，不用再靠记忆去凑。
这条流水线上的东西——还没发布的 Logo、未公开的界面设计稿、内部产品图——往往都是不方便随手上传到陌生站点的。本站这几个工具全部在浏览器里完成计算，文件不经过服务器，处理完关掉页面就什么都不剩。
常见问题
只放一个 favicon.ico 在根目录够不够？
对纯网站来说基本够用，浏览器会自己去根目录找。但添加到手机主屏的图标取不到，会退化成一张模糊的截图或者系统默认图形。想覆盖移动端就得把 180 / 192 / 512 一起做上并在 HTML 里引用。
换了图标，浏览器还是显示旧的？ 图标的缓存比页面顽固得多，硬刷新也常常不生效。可以先在新标签页里直接打开图标文件的地址确认已经换了，然后清一次站点数据，或者给引用地址加一个版本参数。这属于缓存问题，不是文件生成有误。
提取出来的颜色和我在设计稿里看到的不一样？ 提取的是像素的实际颜色。设计稿里的色块一旦叠了透明度、投影、混合模式，或者截图时经过了色彩空间转换，最终像素值就已经不是你在图层面板里填的那个色值了。要拿到准确色值，用无损格式的原图去提取，别用聊天软件传过一手的截图。
滤镜加过头了能不能撤回？ 处理是基于原图生成新图，本地原文件没有被改动，所以直接把强度调低重新生成一次就行。但要注意不要拿已经加过滤镜的输出文件再加一次——两次调色叠加会把对比度和饱和度推到失真，每次都从原图开始处理。