I got frustrated of not being able to tell the tabs apart as I was working on stuff. So this is my so-dumb-it’s-smart solution.

The only hitch in my gittyup was that I had to add it to .gitignore, which untracked the file, which deletes it, and had to manually slip it back onto the server. Although it looks like there are smarter ways.
I use stylish extension in chrome/firefox
include some stylesheets on the production servers (so i don’t mess around in the CMS there)
best solution so far is just a border around the content.
/*production */
html: {border:3px solid red}
It can lead to disasters in particular cases :P
Great idea, thanks!
I’ve added something of this sort
Another option is a lightweight Chrome extension I wrote called Development Favicon. Source here.
There are some open issues. It’d be sweet if any of your readers were up for submitting a PR or 2.
Awesome Brad. This really helps me not doing things at the wrong location.
Given you use webpack, you can use favicons-webpack-plugin and put the route of your editing favicon in the development configuration file and the route of the production favicon in the production configuration file.
When I read this it sounds as a good idea, and it works nice to me this way!
I just throw a large png file and the plugin create all the necesary files, and injects the necesary link[rel] in the html