Per-Subdomain Favicons on Nginx

Here at YSFHQ, we run our Dev, QA, and Production environments on the same machine, so we can save money (in addition to doing local development). But it becomes hard to differentiate between the different environments when you have about 15 tabs of YSFHQ stuff open. The page titles are all the same, so that makes it even harder. How do we know which is which?


The answer: Favicons. When you have a large number of tabs open, they become the differentiating symbol between one website and another. We created 3 different favicons, one blue, one green, and one red. The blue is our production/default favicon, green is staging/QA, and red is development. We have these environments on different subdomains of YSFHQ, so it is easy to create a favicon filter using our subdomain naming convention. Environment identifiers must be the leftmost subdomain, such as dev.forum.ysfhq.com and qa.ysfhq.com. We can then use regex to detect a match to our naming convention, and apply the appropriate favicon.

Here's a snippet of our Nginx config that does just that.

	location ~* /favicon(.*) {
	log_not_found off;
	access_log off;
	root /var/www/default;
	}
	location = /favicon.ico {
	if ($host ~* ^dev\.) {
	rewrite ^/favicon\.ico$ /favicon-red.ico last;
	}
	if ($host ~* ^qa\.) {
	rewrite ^/favicon\.ico$ /favicon-green.ico last;
	}
	}

view raw favicon-colors hosted with ❤ by GitHub

Nginx rewrite config for colored favicons, based on subdomain. If you have your dev. codebase, staging/qa. codebase, and your prod. codebase on the same server, you can give them different favicons to differentiate between the different branches. All subdomains that start with dev (such as dev.example.com and dev.app.example.com) would get the red favicon (favicon-red.ico), and so on. This assumes your favicon selection is in /var/www/default.

I hope to post more in the next week or two, covering our transition and first month on cloud hosting, provisioning servers, how we handle maintenance, and much more.

Until next time,
Eric Tendian
Chief Technology Officer
YSFlight Headquarters — YSFHQ.com