网页图标设计PS教程：从零开始做Favicon
打开一个网站，浏览器标签页上那个小小的图标就是Favicon。别看它小，只有16×16或32×32像素，但它是品牌识别的一部分。比如你常去的知乎、微博，一眼就能认出它们的小图标。今天就用Photoshop（简称PS）带你一步步做出属于自己的网页图标。
准备工作：设置画布尺寸
打开PS，新建文件。宽度和高度都设为32像素，分辨率72像素/英寸，颜色模式选RGB。虽然最终图标可以是16×16，但从32×32开始画更方便细节处理，后期再缩小也不会失真太严重。
设计图标的几个实用技巧
小尺寸下图形不能太复杂。比如你想做个书本图标，别画太多褶皱和文字，简化成一个闭合矩形加一条中线就够了。线条尽量粗一点，避免1像素以下的描边，不然缩放后可能看不清。
颜色方面建议控制在3种以内。太多颜色会让小图显得杂乱。可以用取色器参考品牌主色，比如你的网站主色调是蓝色，那就围绕蓝+白或蓝+灰来搭配。
使用形状工具画图标
选择“圆角矩形工具”或“椭圆工具”，在画布中央绘制主体图形。右键图层选择“转换为智能对象”，这样后续缩放不会损失清晰度。双击图层打开“图层样式”，加一点“内阴影”或“渐变叠加”，让图标有点立体感，但别太重，小图上效果容易过头。
导出为ICO格式
PS默认不支持直接保存为.ico格式，需要借助插件或在线转换。推荐先“另存为”PNG格式，文件名比如favicon-32.png。然后去靠谱的在线工具如“convertio.co”上传，转成ico格式，记得选32×32像素选项。
如果你经常做这类设计，可以安装一个叫“IcoFX”的小工具，或者在PS里装个Export as ICO的脚本，以后一键导出。
把图标放到网页中
生成的favicon.ico上传到网站根目录，然后在HTML的<head>里加上这行：
<link rel="icon" type="image/x-icon" href="/favicon.ico">刷新页面，看看标签页上的小图标是不是已经变了？如果没变，试试强制刷新（Ctrl+F5），因为浏览器会缓存旧图标。
一些常见问题
有时候图标显示模糊，大概率是原始设计用了奇数像素边界，比如位置偏移了0.5像素。解决方法是打开“视图”→“对齐到像素网格”，绘图时确保所有边缘都对齐整数坐标。
还有人问能不能做透明背景？可以，但要注意有些老浏览器不支持PNG透明通道，建议在纯色背景上也测试一下显示效果。
其实做网页图标有点像画像素画，越简洁越耐看。刚开始可以模仿大站的设计风格练手，慢慢找到自己的节奏。下次你做个个人博客，首页那个小图标就可以自己搞定了。