使用不同的 favicon 图标区分网站开发、生产环境

老牛浏览 36评论 0发表于 2 个月前更新于 2 个月前

一、问题说明

有好几次在本地修改代码后，刷新页面发现没有效果，于是清空缓存、检查环境配置...最终恍然大悟，发现浏览器打开的是线上网站。今天再次碰到，不得不想个办法来避免类似问题，最简单的就是不同环境使用不同网站图标。

二、解决方案

首先准备两套网站图标，比如生产环境使用蓝色，本来开发环境使用橙色。

代码如下：

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        .
        .
        .
        @production
        <link rel="shortcut icon" href="/favicon.ico?t=5d1823e0">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?t=5d1823e0">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?t=5d1823e0">
        @else
        <link rel="shortcut icon" href="/favicon-dev.ico?t=5d1823e0">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-dev-32x32.png?t=5d1823e0">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-dev-16x16.png?t=5d1823e0">
        @endproduction
        .
        .
        .
    </head>
    <body>
        .
        .
        .
    </body>
</html>

效果如下：

除此之外，还有其他方案，比如测试环境页面标题加上 【开发环境】 前缀，自己好分辨即可。

暂无评论，快来发表评论吧~

私信

老牛@ilaoniu

老牛，俗称哞哞。单纯的九零后理工小青年。喜欢折腾，爱玩，爱音乐，爱游戏，爱电影，爱旅游...

最后活跃于 1 天前