网页图标设计PS教程：从零开始做Favicon
打开网站的时候，浏览器标签页上那个小小的图标，其实是网页设计里不能忽略的一环。别看它只有16×16像素，但它能增强品牌识别度，甚至影响用户是否愿意再次访问。很多人以为做这个得用专业矢量工具，其实Photoshop就能搞定，而且步骤简单。
准备阶段：设置正确的画布尺寸
新建文件时别直接套用默认设置。网页图标的常见尺寸是16×16、32×32和48×48像素。建议先以512×512像素创建，方便细节绘制，最后再缩放到目标尺寸。分辨率设为72PPI，颜色模式选RGB，背景内容选透明。
设计图标的几个实用技巧
小尺寸下图形容易糊成一团，所以要尽量简化设计。比如你想做个书本图标，不用画出每一页的纹路，用封面加一条斜线就足够传达含义。线条保持整数像素，避免出现模糊的半像素边缘。可以用“对齐像素网格”功能辅助。
颜色选择也有讲究。深色背景配浅色图标更清晰，反之亦然。可以先在32×32的画布上测试显示效果，模拟真实使用场景。
导出为ICO格式的关键步骤
Photoshop默认不支持直接保存为.ico格式，需要借助插件或转换工具。一个简单的方法是：将图层合并后，另存为PNG格式，然后使用在线转换工具转成ICO。如果经常做这类设计，推荐安装“Export As ICO”这类PS插件，能直接导出多尺寸打包的ico文件。
记得把16×16、32×32、48×48三个尺寸都包含进去，这样不同设备加载时才能自动匹配最合适的版本。
插入网页中的代码写法
做好图标后，上传到网站根目录，然后在HTML的<head>部分加入以下代码：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">现代浏览器基本都支持PNG格式图标，如果你想用.png代替.ico，可以这样写：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">部署之后清一下浏览器缓存，刷新页面就能看到新图标生效了。
常见问题处理
有时候图标改了但页面还是显示旧的，大概率是浏览器缓存问题。可以在href后面加个版本号强制更新，比如：favicon.ico?v=2。另外检查文件路径是否正确，大小写也不能出错，尤其在Linux服务器上。
还有一种情况是手机端不显示，可能是缺少apple-touch-icon。虽然这不是PS教程的重点，但顺带提一句：苹果设备偏好180×180像素的PNG图标，单独准备一个放在根目录，加上对应link标签就能解决。