把画布固定在网格上
网站图标的真实考试是在浏览器标签栏进行的，在那里只有16×16像素的空间。很多图标在大背景下很好看，但是在小尺寸下就会变得模糊不清，大部分的问题都是因为网格没有对齐造成的。
可靠的方法是选用24px或者32px作为基础网格来绘制，重要的位置坐标都是整数，斜线只有45度、30度和60度，其他角度都会出现半个像素的锯齿状边缘。笔画宽度控制在网格的整数分之一，在24格的网格中最好的选择就是2像素，再细在小屏上会断。四周留有一定的安全距离，并且不能碰到画布边缘，否则在裁剪圆形头像的时候会被切掉一部分。
不用大小来调整平衡
同一种图标，形状大小相同的情况下，给人的感觉是不一样的，有的很重，有的很轻。原因在于视觉上的重量不同：实心的方框要比圆形的重一些，颜色深的要比颜色浅的重一些，复杂的图案要比简单的图案重一些。
改正的方法是把圆形、三角形等“轻”的形状放大2%到4%，而正方形则相应地缩小一些，在并排的时候使整体感觉差不多。不用尺子量一量的话，把图标全部缩小成16像素，然后眯着眼睛看，就会发现那个需要修改的就是它了。
不要追求过多的色彩，首先要保证对比度达标
最常见的翻车情况就是深色模式下，浅色底上设计的深蓝图标，切到深色标签栏就整个消失。
配色范围在1-2种主色调和一种中性色之间，渐变不超过一层，在16px以下的大跨度渐变会呈现出脏兮兮的效果。图形与背景之间的对比度至少要达到3:1，白色背景下用浅灰色勾勒出来的线条最容易被忽视掉。提交之前要把图标分别放在纯白、纯黑以及深灰色这三种不同的背景上查看一遍，如果不符合要求的话就调整亮度来改善它。
整体协调比单品精美更加重要
圆角半径、端点样式、描边宽度以及透视角度，其中任何一项如果出现差异的话，整个网页就会出现拼接的感觉。
在开始画画之前要先写好四组数据：圆角为2px或者3px、端点统一圆头或平头、描边粗细为1.5px或者2px、透视要么全部正面看要么全部45°俯视。之后添加的新图标也按照这个标准来，整个界面的精美程度靠的是整体的一致性，并非单个图标有多么出色。
多次运行之后再进行交付
favicon应该包含16、32、48三种PNG格式以及一个SVG和一个favicon.ico文件，在移动设备上要考虑iOS系统会自动给图标加圆角并遮挡一部分的情况，以及Android系统的自适应图标安全区域问题，主体内容要放在中心80%的位置上，PWA的maskable图标也一样。
在浏览器标签页、书签列表、手机桌面以及分享卡片缩略图这四个地方分别截取一张图片，并且把图片放大到200%来查看边缘是否有毛边或者模糊的地方。这个过程只需要大约十分钟就可以完成，并且可以防止上线之后出现80%的返工情况。
网站图标是整个网站中最容易被忽视却又最容易被发现的元素之一，在每次标签切换、每一条书签、每一张分享卡片上都会出现，并且对界面美观程度的评判也常常取决于这样一个只有几十像素大小的图形。栅格定位准确、视觉重量分配合理、颜色搭配可以承受深色模式、风格一致、上线之前完成各种测试，那么质感就会提升一个档次。