Distinguish your environments with favicons

I have to admit it, I’m a real neat freak when it comes to my desktop organization. The same goes with Firefox. I like to keep it clean and minimalistic. That’s why I’m using a few Firefox extensions and scripts to hide bookmarks and tab titles.

When I developed SalsaJungle.com, I was sometimes confusing my development and production websites. I know it doesn’t sound too clever but there are times when I reloaded a page after a fix only to realize that I was looking at the production site. That’s what happen when you multitask between development and client support.

Notice the last two tabs which are running the same application on two different environments

Well I took the matter in hands and simply created a second favicon with a different background color for my development environment. I named it favicon_dev.ico and put it in the same directory as the favicon.ico. Then I added this little snippet of haml code to my application.html.haml template :

- if RAILS_ENV == 'development'
  %link{ :rel => "shortcut icon", :href => "/favicon_dev.ico" }

With this code, I force the path of the favicon to favicon_dev.ico in the development environment.

Et voila! Now I know at a glance that blue is for development and red for production!