I use tabs, lots of them, and usually in more than one browser window. Recently I've found myself hunting for the specific tab that has the site I'm developing/testing locally, testing in a staging environment, or verifying in the production environment, and I’ve gradually been getting more annoyed with the friction.
Last night I had an epiphany: What if I provided a different favicon for each environment instead of the same one for each? A little research and I discovered that I didn’t have to have a file name favicon.ico, I could name it whatever I wanted AND you can use file formats other than .ico.
I grabbed the actual favicon.ico and converted it to a .png. Then I made 2 distinctly different versions for my ‘development’ and ‘staging’ environments and saved with a naming schema that will allow me to quickly figure out which one to use.
These are the 3 I'll be using on one of my current projects:
favicon.png
favicon-staging.png
favicon-development.png
Next, I added this:
<link rel="icon" href="/favicon<%= ("-" + RAILS_ENV) unless RAILS_ENV == "production" %>.png" type="image/png">
to the HEAD block in the /views/layouts/application.rb file. So now, when the site is loaded from production it uses favicon.png, but favicon-development.png and favicon-staging.png for the development and staging environments, respectively.
In hindsight it seems obvious, but this little hack reduced my tab hunting time drastically.