Rob O'Leary

Eleventy - Differentiate between dev and production builds with unique favicons

An exercept of a screenhot shows 2 tabs of a browser sesssion. The first tab shows a green box as the favicon with the text 'home'. the second tab shows a red box as the favicon with the text 'home'. A title says 'dev favicon'. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

When you are working on a website, you may have the dev version and production version of the website open in the browser. It is easy to mix them up as the appearance of the browser tabs is identical. You end up playing a guessing game when you are switching tabs! 🧐

2 out of focus tabs for roboleary.net showing same titlebar

Let’s make our life easier and make them look unique by having a different favicon for each “build mode”!

showing different favicons on tabs that indicate if website is dev or production version. the dev version has a red square, the production vesion has a green square.

The code

Here is an abbreviated outline of the project:

├─ _data/   
│  ├─ production.js 
├─ _includes/ 
│  ├─ head.njk
├─ img
│  ├─ favicon-dev.svg
│  ├─ favicon.svg
├─ index.md

We will create a different image file for each build mode. SVG is the simplest format to use for a favicon. We will keep it simple and use a square with a different colour for each mode – red for dev, green for production.

SVG
<!-- img/favicon-dev.svg -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<rect width="100" height="100" fill="red"/>
</svg>

I outlined in a previous tutorial how to create a gloabl production flag to determine the build mode. This is found in _data/production.js. This gives us a production boolean variable.

We have a head.njk template that covers the head section of the document – all of a page’s metadata. We will include this template in every page of the website. It is here that we specify a link element to identify our favicon. We use the production variable to reference the file that corresponds to the build mode:

Nunjucks
<!-- _includes/head.njk -->
<head>
 {% if production %}
   <link rel="icon" href="/img/favicon.svg" type="image/svg+xml" sizes="any"/> 
 {% else %}
   <link rel="icon" href="/img/favicon-dev.svg" type="image/svg+xml" sizes="any"/> 
 {% endif %}
 <title>Home</title>
</head>

That’s the highlights of the code!

For your production website, you should include other image files for the favicon to satisfy the requirements of different browsers. The OG file format is ico. You can read this article to ensure your bases are cover.

Source code

You will find the code in the favicon-dev subfolder of the https://github.com/robole/eleventy-tutorials repo.

Can you give the repo a star to indicate that this was a worthwhile tutorial please? 🌟

Conclusion

This favicon trick will make it more obvious which version of a website you are looking at, or looking for in the browser. A boon for your dev experience. 🤓

Tagged