Ed Johnson-Williams

CSS Tricks has an article up about using a different favicon for local development and production. That way, when you’ve got both open in tabs, you can easily tell which tab is which.

Here’s a way to have different production and development favicons in Eleventy.

1. Have two folders for your site’s favicons. Keep your favicons for production in one folder. And keep your favicons for development in the other folder.

2. Set the ELEVENTY_ENV environment variable in the scripts section of your package.json. Set ELEVENTY_ENV to “dev” when you’re in development and using eleventy --serve. Set it to “prod” for the build script.

// package.json

"scripts": {
    "dev": "ELEVENTY_ENV=dev eleventy --serve",
    "build": "ELEVENTY_ENV=prod eleventy"
}

3. Pass through the relevant favicons directory. In your eleventy.js file, get the ELEVENTY_ENV variable. Then, if it’s “prod”, pass through your production favicons. If it’s “dev”, pass through your development icons.

//.eleventy.js

module.exports = function (eleventyConfig) {
  let env = process.env.ELEVENTY_ENV;

  if (env === "prod") {
    eleventyConfig.addPassthroughCopy({
      "./src/site/assets/images/favicons_prod": "/",
    });
  } else if (env === "dev") {
    eleventyConfig.addPassthroughCopy({
      "./src/site/assets/images/favicons_dev": "/",
    });
  }
};