Skip to content

atomrc/eleventy-favicon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 😉

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.

About

Generate the perfect set of favicons for your eleventy static site

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published