Generate the perfect set of favicon icons from a single image file.
It will generate the favicon.ico and apple-touch-icon.png for you and will also generate all the html link tags (based on the recommendations of How to favicon in 2021.
To make the most out of the plugin, you can use an svg file as the source. In which case the file itself will also be copied to the destination folder and a <link rel="icon" type="image/svg+xml" href="/favicon.svg"></link> will also be added to your html 😉
npm i eleventy-favicon
In your eleventy config file (.eleventy.js) add:
const faviconPlugin = require("eleventy-favicon");
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(faviconPlugin, options);
};| Key | Default | description |
|---|---|---|
destination |
'./_site' |
Where your site is being built (this is where the icon files will be copied over) |
Once installed, the eleventy-favicon plugin will add a shortcode that you can use on your sources files.
A classic use-case would be adding the following in your site's default layout:
<head>
<!-- [...] -->
{% favicon './favicon.svg' %}
<!-- [...] -->
</head>This plugin heavily relies on sharp package and on to-ico
As of now, the plugin does not generate the manifest.json suggested by this article.
Feel free to raise an issue or propose a PR if you need it.