Having different favicons for your development and production environments can be extremely useful: you can see in a split second if you are working on the right tab in your browser.

If you already refreshed, refreshed and refreshed again a page for 5 minutes… wondering why your changes don’t show up, and realizing that you were refreshing the live website instead of the local one, raise your hand ✋.

This won’t happen anymore with this quick JavaScript hack to display a different favicon depending on your environment.

1. Create two different favicon images

👉 Note: a favicon image should be square (128x128px is okay), otherwise it will be distorted.

1. Use the following code

// In the Html file header
<link rel="icon" type="image/png" href="favicon.png">

// in your JavaScript file
if (location.hostname === "localhost" 
 || location.hostname === "127.0.0.1" 
 || location.hostname.search("local") != -1) {
    $("link[rel=icon]").attr("href", "favicon_dev.png");
} else {
    $("link[rel=icon]").attr("href", "favicon.png");
}

👉 Note: the following test location.hostname.search("local") != -1 matches the local aliases like http://mywebsite.com.local. Have a look at this article on how to make an alias for a local website for more details.

Of course, using favicons can depend on your working environment (WordPress, Symphony, React, …) and you can also use environment variables to do a cleaner version of this hack 😉

If you found it useful, feel free to buy me a coffee (or tea) to support the blog 🙂