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 ✋.
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">
👉 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 🙂