Favicons in root with Eleventy
It occured to me after fiddling around with nonsense and making silly mistakes all day that the cleanest way to keep favicon files together and away from my main image folder would be to put them into their own directory and pass the contents of that directory to root.
Whenever I decide to change my favicon, I can clear out the local directory and replace its contents with the new files, and won't have to worry about things like losing track of files in my image directory or cluttering the main directory in my local repo.
You choose which directories and files to pass through as is within the module.exports in your eleventy.js file. You likely already have a few lines like this for things like the "img" and "css" directories.
Here's a quick and dirty run down of how they work.
Examples:
- Pass the /img/ directory through:
eleventyConfig.addPassthroughCopy("img") - Pass a specific file through:
eleventyConfig.addPassthroughCopy("img/favicon.ico") - Pass something through to a different location:
eleventyConfig.addPassthroughCopy({ "favicon" : "/" } );
This last example takes an object rather than a string and passes the contents of the source directory through to a different destination directory, in this case to root. The "favicon" directory will not appear on the live site, but its contents will be copied to the root directory, which is exactly what I wanted.