做网站这么多年，见过太多新手朋友，花大价钱请人设计Logo，结果上传到网站后，浏览器标签页上那个小图标还是默认的空白或者地球仪。客户一看，觉得你不专业，这单子差点黄了。其实，这个让很多新人头疼的“小图标”，也就是我们常说的Favicon，根本不需要什么高深技术，更不用去求爷爷告奶奶找程序员。今天我就把压箱底的干货掏出来，讲讲怎么在网站标头做图标，让你花五分钟，提升网站档次。
很多人第一反应是去PS里抠图，然后直接上传JPG或者PNG。哎，这路子走不通。浏览器对图标格式有严格要求，你得先明白，怎么在网站标头做图标，第一步就是搞定格式。现在最稳妥、兼容性最好的格式是ICO，当然，最新的浏览器也支持SVG和PNG，但为了保险起见，特别是照顾那些还在用老浏览器的用户，ICO格式依然是王道。
具体怎么操作呢？别急，咱们一步步来。
第一步，准备素材。把你做好的Logo拿出来，背景一定要透明。如果Logo背景是白色的，上传后在深色浏览器主题下会显得格格不入。你可以用在线工具把背景去掉，或者在PS里把背景层隐藏。记住，尺寸最好是正方形，比如512x512像素，这样后期缩放才清晰。
第二步，转换格式。这是最关键的一步，也是很多人卡住的地方。你不需要自己写代码转换，太麻烦。去搜“favicon generator”或者“在线ico转换”，有很多免费工具。把刚才那张透明背景的PNG丢进去，它们会自动生成不同尺寸的图标，并打包成一个.ico文件下载下来。这里有个小坑，有些工具生成的图标颜色会失真，建议多试几个网站，或者自己用Photoshop另存为ICO格式，虽然步骤多，但颜色最准。
第三步，上传到服务器。拿到.ico文件后，别急着改代码。把它上传到你网站的根目录，也就是和index.html同一个文件夹里。为了方便管理，建议命名为favicon.ico，这样浏览器默认就会去找这个文件，你甚至不用写代码，只要名字对，它自己就认出来了。这就是为什么我说，怎么在网站标头做图标，有时候最简单的办法最有效。
第四步，强制刷新缓存。这步最容易被人忽略。你上传完了，打开网站一看，怎么还是旧图标？或者还是空白？别慌，这是浏览器在耍赖，它缓存了旧文件。在电脑端，按Ctrl+F5强制刷新；在手机端，可能需要清除缓存或者换个浏览器试试。如果还是不行，那就进入第五步，手动指定路径。
在网站的
标签里，加入下面这行代码：或者更现代的写法：
这几种写法同时写上，能覆盖绝大多数情况。特别是苹果设备，如果不加apple-touch-icon，它可能显示得不好看。
最后，我想说，别小看这个小图标。它是客户记住你品牌的第一印象。很多同行觉得这是小事，随便弄个图就行，但正是这些细节，决定了用户对你的信任度。当你搞定了怎么在网站标头做图标，你会发现，网站的精致感立马就上来了。
有时候，我们太注重宏大的功能，却忽略了这些微小的体验。花点时间，把这个小图标做好，不仅是为了应付客户，更是为了自己心里的那份讲究。毕竟，网站是你的门面，门面上的那个小徽章，得擦得亮亮的。
如果你按照步骤做了还是不行，大概率是缓存没清干净，或者路径写错了。再检查一遍，通常都能解决。别怕麻烦，细节决定成败，这话在建站圈里，永远不过时。
