https://github.com/atomrc/eleventy-favicon

Generate the perfect set of favicons for your eleventy static site
https://github.com/atomrc/eleventy-favicon

eleventy eleventy-plugin favicon favicons-generators png svg

Last synced: about 1 month ago
JSON representation

Generate the perfect set of favicons for your eleventy static site

• Host: GitHub
• URL: https://github.com/atomrc/eleventy-favicon
• Owner: atomrc
• Created: 2021-06-16T16:38:29.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-18T22:37:51.000Z (11 months ago)
• Last Synced: 2024-10-07T23:10:49.073Z (about 1 month ago)
• Topics: eleventy, eleventy-plugin, favicon, favicons-generators, png, svg
• Language: JavaScript
• Homepage:
• Size: 115 KB
• Stars: 7
• Watchers: 2
• Forks: 4
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs).

**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 `` will also be added to your `html` :wink:

## Installation

```

npm i eleventy-favicon

```

In your eleventy config file (`.eleventy.js`) add:

```js

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:

```html

  

  {% favicon './favicon.svg' %}

  

```

## Under the hood

This plugin heavily relies on [sharp](https://github.com/lovell/sharp) package and on [to-ico](https://github.com/kevva/to-ico#readme)

## Limitations

As of now, the plugin does not generate the `manifest.json` suggested by [this article](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs).

Feel free to raise an issue or propose a PR if you need it.