Better living through favicons

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.