我敢肯定，我们许多人倾向于同时打开生产网站和开发网站。在这一点上，对开发者来说，这是一个典型的做法：进行一些本地更改，刷新，刷新，刷新，刷新，但没有看到更改，最后发现你正在查看生产网站，而不是你的本地开发网站。
这最初挺好笑的，但如果经常发生就会很令人沮丧。可以通过在两个网站之间设置明显的视觉¹差异来完全避免这种情况。简单的方法是什么？使用不同的 favicon。
这里没有真正的技巧。我只是在开发环境中使用了一个与生产环境不同的 favicon.ico 文件。在这个（WordPress）网站上，我只 版本控制和部署 wp-content 文件夹，它不是 favicon 所在的网站根目录。根目录中的任何文件都需要手动通过 SFTP 更改。我只是更改了本地版本，它就存在了，并且与其他版本不同。
其他技巧
- 不要使用本地 favicon，这样就会显示浏览器的默认徽标。已经足够不同了。
- 一个显示分支名称的 动态 SVG 文件（什么？）
- Chrome 有一个 实验性的“标签组”功能。为开发和生产创建不同的标签组。
- 使用 浏览器扩展 添加 标题前缀。
- 使用 浏览器扩展 根据 URL 匹配自动对 favicon 进行着色。
说到 favicon...
这让我开始思考，2020 年 favicon 的最佳实践是什么，至少对于像这样的普通内容网站来说。
我不想说，但当有人在 iPad 上将这个网站添加到主屏幕时，我真的不在乎图标是什么，你知道吗？除了一个想要获得整个数据库副本以离线使用这个网站来教囚犯的人之外，没有人曾经问我有关“安装”CSS-Tricks 的问题。
我也不会关心 Windows 8 平板电脑上的磁贴颜色或自定义 Android 上浏览器 chrome 的颜色。这类东西通常是“生成”favicon 过程的一部分。
我确实关心 favicon 在高分辨率显示器上的外观（一个 32×32 的图形并不算什么奢侈）。我喜欢 SVG favicon 的想法。我喜欢确保处理深色模式的想法。我喜欢用尽可能少的代码和文件来做到这一点的想法。最近有人深入研究过这个问题，想告诉我吗？
- “视觉”差异。嗯。我想知道对于视觉障碍的开发者可以做些什么？有什么想法吗？
使用浏览器插件更改标签可能有效，并且在开发构建过程中将开发指示器添加到页面标题中绝对有效，适用于我们 VI 开发人员。
我真的很高兴发现不仅仅是我这样做。☺️
RealFaviconGenerator 发言！:)
几周以来，RealFavicon 显示了你的 favicon 在桌面浏览器上的外观，包括深色模式。此外，你可以快速添加图标背景，以便深色徽标在浅色和深色模式下都能很好地显示。不错。
即将推出的功能
– 使 SVG favicon 成为 favicon 包的一部分。
– 允许为浅色和深色模式使用两种不同的设计。
这会成为 2020 年 favicon 的一个好解决方案吗？
作为 RealFaviconGenerator 用户，这听起来不错。
哈哈！我遇到过这种情况。做了重大更改，直到几个小时后才意识到是在生产网站上进行的。那简直是灾难。
我只使用不同的标题... 我添加了 ENVIRONMENT 前缀，所以我可以看到类似“Dev – MySite.com”的内容。即使标签很小，我仍然可以看到 Dev 前缀。
假设开发者会不时查看浏览器开发者面板的控制台选项卡，并且假设视觉障碍者也可以管理开发者面板，你可以使用一些 javascript 添加自动控制台消息。例如，如果你给 favicon 一个 ID，类似于
if (location.href.indexOf("http") == -1 ) {document.getElementById("favicon").setAttribute("href", "technix/favicon-development.png");console.log("ATTENTION: this is the development site!");}
然后本地存储的页面将显示消息。 - 如果开发网站也位于其他服务器上，则需要用生产网站的其他标识（例如，地图名称、子域等）替换 indexOf(“…”) 中的“http”。
“然后本地存储的页面将显示消息”...当然还有不同的开发 favicon。:-)
如果你打开了两个实例，你就无法轻松地看出哪个是哪个...
只需要两行脚本就可以更改标题，为什么要费心使用扩展？我只需检查 URL 是否不以 file 开头
在 WordPress 网站上，我根据需要编写一些 CSS 来定位当前 URL，并根据 URL 为 WP 管理栏分配不同的背景颜色... 因此 staging.domain.com 为蓝色，http://www.domain.com 为红色，SB.domain.com 为灰色等等。该 CSS 是项目的一部分，因此可以与 git 等一起正常工作。