eleventy-favicon
v1.1.3
Published
Generate just the perfect amount of favicons for your static website
Downloads
438
Readme
eleventy-favicon
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
:wink:
Installation
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);
};
Options
| Key | Default | description |
| ------------- | ----------- | --------------------------------------------------------------------------------- |
| destination
| './_site'
| Where your site is being built (this is where the icon files will be copied over) |
Usage
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>
Under the hood
This plugin heavily relies on sharp package and on to-ico
Limitations
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.