Favicon Face/Off

Save Time and Stay in Flow by Differentiating Environments with Different Favicons

Sally has been asked to improve a web app’s commenting feature. As she adjusts the code, she collects an unprecedented number of browser tabs—some open to the production site and others to her development environment. In many of them, she has enabled “super-user” mode so she can more freely play with the app while making changes.

So she goes on coding and messing with the data. She’s about ready to wrap up and head home for the evening when her boss walks in and asks, “Sally, lots of comments have gone missing. Do you know what happened?” Sally feels like she has swallowed a sack of doorknobs. In the midst of her coding spree, she mixed up some of her browser tabs and accidentally deleted live data. A lot of live data.

At work, I often have a lot of tabs open. Much like Sally, many of these are pointed at my development or production environment. While I haven’t caused a catastrophe in production, I noticed that I was spending a fair amount of time searching through my tabs for the one I wanted. And, when pairing with my colleagues, I noticed that they were spending a good amount of time doing the same thing. Although it wasn’t a serious time-sink, I could feel that it slowed us down regularly. And sometimes it was a big enough speed bump to take us out of flow. I really wanted to improve this situation.

The browser gives you two pieces of information in the tab: the page title and the favicon. This needs to be enough for you to decide which tab you want.

Since page titles are often the same between environments, that’s not a very useful way to differentiate between these types of tabs out of the box. I considered adding a prefix to the page title in development, as you might see with subject lines on email lists, but page titles are often completely hidden when you have lots of tabs open. Additionally, page titles feel like page-specific content, and we typically want things like that to be as similar as possible between development and production.

Then I realized that we could pack this information into our favicon. The favicon is the perfect semantic place to put this because favicons often indicate information about a domain, not a page. Additionally, favicons are the last piece of information to be hidden when opening definitely way too many tabs.

I hit the command line and simply inverted the colors on our production favicon using ImageMagick:

convert icons/favicon.png -negate icons/favicon-inverted.png

After adding some configuration to our development environment to use the inverted image, I was up and running. Now it is much easier to find the tab I am looking for.

In a Rails environment, you can make this magic happen by first defining a variable in your application configuration that points to the location of your production favicon file. In config/application.rb:

# In most environments, use the normal favicon.
config.favicon_path = 'icons/favicon.png'

And in your development environment configuration, override this config to point to a different favicon file. In config/environments/development.rb:

# In development, use the inverted favicon so we can
# distinguish it from production.
config.favicon_path = 'icons/favicon-inverted.png'

Then simply consume the config variable in your layouts and you should be good to go.

%link{ rel: 'icon', type: 'image/png',
       href: image_path(config.favicon_path) }

If you are looking for something a bit fancier, the Rails Env Favicon gem will display the Rails environment on the favicon using the Tinycon JavaScript library. This takes the manual image creation step out of the setup process.

This quick adjustment is so easy to do and will make you and your team a little bit faster every single day. It might even prevent some headaches. And, don’t worry about Sally — thankfully she had only soft-deleted the comments. All of the data was easily restored.