本地开发设置个区分明显的favicon吧~

这篇文章发布于 2019年08月6日,星期二,01:20,归类于 HTML相关。 阅读 24020 次, 今日 8 次 20 条评论

 

本地favicon头图占位图

一、纳尼,怎么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更多深入要点,这篇文章有所讲解,过了这村就没这店,可以进入见见世面。

三、素质三连,本文小结

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

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

(本篇完)

分享到:


发表评论(目前20 条评论)

  1. 某某某说道:

    因为就是恶作剧,到处打游击,所以DevTool的Override一开,一直开一直爽……

  2. hoythan说道:

    我开发环境网页 title 开头是【开发环境】xxx ,更高效。

  3. 鑫哥脑残粉说道:

    鑫哥牛逼

  4. silence0_o说道:

    转型rap了吗

  5. 哈哈说道:

    打油诗,真湿!

  6. tangerine说道:

    skr skr

  7. 你这是php版本的啊说道:

    js的有么?比如vued的或者react

  8. Psilo说道:

    ayo everybody在你头上暴扣!

  9. aSuncat说道:

    本地,测试环境,是比较容易弄错,反应得快还好,反应得慢还是挺浪费时间的,哈哈

  10. meepo说道:

    你看这个favicon它又大又圆

  11. 阿丽塔说道:

    吴亦凡退出群聊

  12. 超超的banana说道:

    很棒

  13. 郭二蛋说道:

    厉害了,旭叔

  14. PromiseX说道:

    建议安装 website-ip 的[浏览器插件](https://chrome.google.com/webstore/detail/website-ip/ghbmhlgniedlklkpimlibbaoomlpacmk) 直接显示ip 减少因为缓存分不清环境的带来的困扰

  15. 超超的banana说道:

    有很多网友留言说想看favicon,今天鑫哥手里就有一套favicon代码,别问落地价,因为知识无价.

  16. 謃空墲语说道:

    这篇文章有声音why?
    读完我会rap信手来!
    原来这错你也会去犯,
    大神是人也吃白米饭!

  17. 大菠萝说道:

    UP!强行打油

  18. .说道:

    押韵很强。前几天也犯了同样错误,弄错线上和测试环境。

  19. wingmeng说道:

    押韵666

  20. xiaosong说道:

    打油诗好评