by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8827
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、纳尼，怎么bug还在那里？

昨晚睡得很早，今天状态很好，谁知测试驾到，登录产品账号，严重bug卧槽，让我马上修好。

打开项目仓库，查看代码思路，发现可疑出处，改正非常迅速，刷新查看屏幕，居然还是错误！

难道其他问题？排查非常努力，想想只能这里，再次修改实例，结果很不顺利，错误还在那里。

真的非常神奇，想想类似经历，不费吹灰之力，现在居然没戏，完全没有道理，究竟问题哪里？

难道缓存还在，F5刷新已烂，抓狂奔溃无奈，后来定睛一看，我去什么鸟蛋，线上地址在玩！

当场吐血三升，为何如此蠢笨，为何如此天真，导致如此蛋疼，仔细思考根本，favicon没有区分。

下图图标线上：

下图不是线上：

单看标题一样：

想要区分够呛！

问题既然弄清，就要设法搞定，有种方法可行，使用不同图形，线上一种图形，本地另外图形。

二、去伪存真，显著区分

线上保持不变，本地代码多点，弄个favicon图片，差别定要明显，PNG base64内嵌，从此问题再见。

例如我的实现：

<?php if ($_SERVER['HTTP_HOST'] == 'localhost') { ?>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFv3EA////ivf3AgAAAD1JREFUeNqMjlEKADAIQn33v/TY+tAJg1VQhmnSb1CQXUZcfUYCHgVSBZpCGQ3dR8Qufa1BpE3Un7xjCTAAHt4AP710jNUAAAAASUVORK5CYII=" sizes="16x16">
<? } ?>

效果可以体验：

线上蓝底白字图片，本地橙底白字图片，本地线上区分明显，低级错误不再出现。改动可以准确体验，不再刷到错误页面，从此告别啪啪打脸，状态饱满真每一天。

其他要点

PNG图片base64内嵌，只是为了减少外链，直接URL地址呈现，favicon也会准确出现。

<link rel="icon" type="image/png" href="https://image.zhangxinxu.com/image/blog/201908/favicon-16.png" sizes="16x16">

最后再说一点，sizes尺寸多变，32×32更为推荐，retina屏清晰可见。

<link rel="icon" type="image/png" href="https://image.zhangxinxu.com/image/blog/201908/favicon-32.png" sizes="32x32">

favicon更多深入要点，这篇文章有所讲解，过了这村就没这店，可以进入见见世面。

三、素质三连，本文小结

本文一点小技巧，内容不长很短小；生怕嫌水被人笑，打油诗才凑热闹。

本文到此不多言，相逢到此即是缘，欢迎转发与留言，祝你八月赚大钱。

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8827

（本篇完）