网页图标尺寸要分三件事：页面上显示多大、导出的图片有多少像素、用户实际能点到多大范围。比如图标在页面显示为24×24 CSS像素，二倍PNG可以导出48×48像素，但页面不应因此把图标放大一倍。浏览器标签上的favicon、页面功能图标和品牌标识用途不同，不能共用一张“统一尺寸规范表”。
先在完整页面中确定图标与文字、按钮和导航的比例，再处理导出。Pixso 网页设计与响应式原型工具可以帮助把图标放回桌面与手机页面中比较，而不是只在空白画布上看单个图形。
1. 网页图标为什么要先分用途
网页图标可以传达操作含义、辅助导航，也可以帮助识别品牌。例如放大镜经常用于搜索，购物车表示购物入口；但图标是否易懂还取决于上下文，陌生或容易混淆的含义最好配上文字。
- 页面功能图标：出现在搜索、收藏、下载、菜单等位置，重点是与所在控件匹配，在实际显示尺寸下辨认清楚。
- favicon：用于浏览器标签、书签等位置，重点是在很小的空间里保留品牌特征，需要准备浏览器可用的图标资源。
- 品牌或社交标识：说明品牌身份，不等于页面操作按钮的通用图形；比例和使用方式还要遵守对应品牌的规范。
原有社交媒体标识素材展示了不同品牌图形。它们可以用于观察形状与视觉重量，但不能由素材预览推导出“社交图标必须48px”，也不能将品牌标识随意改造为自己的应用Logo。
2. 尺寸选择：显示、资源和点击范围分别确定
2.1 先设页面显示尺寸，再准备高分辨率资源
同一图标在文字按钮、侧栏导航和空状态插画中的角色不同，不必强行设置成同一个尺寸。先选一个适合当前页面的基础规格，再建立少量用途清楚的尺寸档位，避免每个页面随意调整。
以一个24×24 CSS像素的搜索图标为例：如果用PNG并为二倍显示准备资源，可导出48×48像素，再以24×24 CSS像素显示。devicePixelRatio描述的是物理像素与CSS像素之间的比例。屏幕像素更密不意味着用户界面里的按钮也应该更大；还要考虑浏览器缩放与实际渲染效果。
SVG可以在保持矢量路径的情况下适配不同显示尺寸，但复杂细节缩小后仍可能难以辨认。16px、20px、24px、32px可以作为项目中选择的规格示例，而不是所有网站必须遵守的统一标准。尺寸档位确定后，在规范里注明各自用于何处。
2.2 图形尺寸不等于点击范围
用户点击的是控件区域，不是只点中图形的实色像素。一个较小的删除图标可以放在更大的按钮范围中，四周留出操作空间；同时要避免相邻按钮的可点击区域重叠。图标加大也不能代替清楚的按钮名称、焦点状态和危险操作确认。
桌面鼠标、触屏和键盘操作方式不同。在窄屏中，不要为了塞下整排功能就把图标与点击范围一起缩小；低频操作可以收进有名称的更多菜单，核心动作保留清楚的入口。
2.3 统一外框后，再检查视觉大小
同一24px外框中，圆形图标可能显得比方形小，细线图形也可能比实心图形轻。先统一图标的绘制网格、线宽和内边距，再做必要的视觉微调。不要只比较宽高数值，还要把搜索、筛选、下载等图标与相邻文字一起观察。
下方网页模板中，导航、内容卡片和页脚的密度不同。图标尺寸需要服从所在区域的任务：导航帮助定位，卡片图形帮助理解内容，不能为了统一而全部使用相同大小。
2.4 favicon单独交付，不从大Logo直接缩到最小
favicon常在很小的区域展示，应优先保留容易识别的轮廓，去掉无法辨认的细小字或装饰。准备资源时需核对浏览器支持、文件格式与页面引用，HTML 的 icon 资源说明介绍了相关关系。16×16和32×32是常见位图规格，但并不能代表所有浏览器、设备与添加到主屏幕场景的完整要求。
如果开发需要ICO或特定平台资源，应把转换和打包步骤列入交付，而不是假定所有设计工具都能直接导出。需要不同裁切或不同细节的尺寸版本时，保存对应母稿，避免后续更新只改了其中一份。
3. 在Pixso整理图标，再检查实际输出
3.1 用矢量源稿保持可编辑性
矢量图标由路径、线段和曲线等信息描述，适合编辑轮廓、颜色与线宽。Pixso可以用于这类图标的绘制与整理，并导出PNG、JPG、SVG等格式。需要透明背景的位图时选择支持透明的格式，不能指望JPG保留透明区域。
下面的Pixso画布把线性图标按统一网格排列，可以检查整组图形的线宽和视觉大小。整理时为图层起清楚的名称，并区分原始图形、页面实例和最终交付资源。
- 选定一个实际使用位置，如搜索按钮，确定图标显示尺寸和外围操作区域。
- 将同一组图标放进一致的边界，检查是否存在多余透明边距或被裁掉的描边。
- 根据开发需求选择SVG或对应倍率的PNG，明确文件命名、默认颜色和是否需要状态版本。
- 打开导出文件，再放回目标网页背景中，检查清晰度、透明度、颜色和裁切。
3.2 文件体积看内容与编码，不只看长宽
尺寸较大的位图往往需要更多像素数据，但最终文件大小还与颜色、透明度和压缩有关。SVG也不必然比PNG小：复杂路径、滤镜或嵌入位图可能让它变大。优先删除无用对象和多余元数据，压缩后检查细线与阴影，不要只追求最小字节数。
通过CSS调整SVG内部颜色，还取决于资源怎样嵌入和图形本身的写法。内联SVG与普通图片标签引用SVG的控制方式不同，不能承诺导出SVG后任何用法都能直接改内部颜色。
3.3 按职责选择编辑与管理工具
Adobe Illustrator适合精细矢量绘制；Pixso适合把图标与UI页面放在一起设计和协作；IconJar侧重图标资源的整理与查找；Font Awesome提供可用于Web的图标资源及相应使用方式。选择资源时，还要检查对应图标的许可、版本和引用方式，不把“能下载”当作无限制商用。
一组图标交付完成的标志，不是导出了几种尺寸，而是在预定页面里能读懂、点得到、缩放后仍清楚，开发也能知道每份文件应如何使用。
