一个网页 icon 的创意

浏览器允许你在每个页面都指定一个 icon，然后浏览器会把它显示到需要的地方。一般在收藏夹、tab 标签，都会显示 icon，增加网页的个性。比如百度的 icon 在 chrome 的 tab 标签的效果：

百度的 icon 是一个动物的脚印，可能代表凭足迹去寻找的意思吧。可以肯定的是，给网页指定 icon，可以增加识别度。人对图形的认知比起文字，认得更快，记得更久。

我的工作是写代码，我不会用 PhotoShop。以前试过用 Fireworks 做简单的图片处理，但是毕竟没有美术功底，想象很美好，却无法用键盘鼠标表达出来。所以我给自己的网站设计了一个动态 icon 的方案，用网页 title 的第一个字画在图片上作为网页的 icon：

其实把文字画在图片上，本质上还是文字，而不是图标，不过总比浏览器默认的图标要好，而且这样比较有趣，只要是标题不同的网页，icon 都是不同的。

给动态 icon 地址不同的参数：

http://bibaoke.com/icon?char=我
http://bibaoke.com/icon?char=是
http://bibaoke.com/icon?char=一
http://bibaoke.com/icon?char=个
http://bibaoke.com/icon?char=很
http://bibaoke.com/icon?char=帅
http://bibaoke.com/icon?char=的
http://bibaoke.com/icon?char=程
http://bibaoke.com/icon?char=序
http://bibaoke.com/icon?char=员

会显示指定文字的 icon：

icon 的发展，有三个阶段。第一阶段是完全由用户自定义，比如我们在 QQ，微信，社交网站上上传自己的头像，以前的做法，如果没有上传，显示的就是默认头像，比如 QQ 的企鹅；第二阶段是随机分配，现在注册 QQ，如果不上传自定义的头像，你会得到一个随机分配的头像，也有网站是不完全的随机，比如我在网站填写了年龄，它分配给我一个“中年大叔”的卡通头像；第三个阶段是程序生成，Git 上的项目图标就是这样的，当然了，它比我的做得更好，它有随机的底色，并和文字形成撞色的视觉效果，钉钉上的默认头像也采取了这样的做法。

即使不是程序生成的，也有做成程序生成的效果的，比如 Bootstrap 的项目图标：

至少这样不用想那么多，不是吗？