eleventy-plugin-favicon-factory

A plugin for Eleventy that, starting from an SVG file, generates favicons in various sizes and, if requested, also creates the manifest file. The plugin also takes care of injecting the generated HTML code into your pages.

Installation

Available on npm:

npm install @saiballo/eleventy-plugin-favicon-factory --save

Add the plugin to your eleventy.config.js:

const favicon = require("@saiballo/eleventy-plugin-favicon-factory");

module.exports =  function(eleventyConfig) {

	eleventyConfig.addPlugin(favicon);
};

Options Parameters

You can add an options object to the plugin configuration. Below is the complete list of default available parameters.

module.exports =  function(eleventyConfig) {

	eleventyConfig.addPlugin(favicon, {
		"outputFolder": "favicon",
		"prefixName": "favicon",
		"imgPathHref": "",
		"manifestGenerate": true,
		"manifestName": "manifest",
		"manifestOutputFolder": "",
		"manifestData": {
			"name": "MyApp",
			"shortName": "MyApp but short",
			"description": "Progressive Web App",
			"startUrl": "/",
			"display": "standalone",
			"backgroundColor": "#ffffff",
			"themeColor": "#000000"
		},
		"sizeList": [16, 32, 48, 57, 72, 76, 96, 114, 120, 144, 152, 180, 192, 256, 512],
		"runOnlyDevMode": true,
		"tabIndent": 2
	});
};

Parameters

// output folder for image files. path is relative to "dist" project folder. e.g. this html value for links will be set to "/dist/assets/img/favicon/favicon.[png,ico,svg]"
// if folder structure does not exsist it will be created
"outputFolder": "assets/img/favicon"

// image name used for the generated favicons
"prefixName": "favicon",

// usually left empty. if not, it overrides the default HTML href value. e.g. for "https://www.site.com" it will be se to https://www.site.com/favicon.[png,ico,svg]
"imgPathHref": ""

// true | false. if "true", a manifest file will be generated
"manifestGenerate": true

// manifest filename to use in the generated HTML snippet
"manifestName": "manifest"

// output folder for the manifest file. path is relative to "dist" project folder. leave empty to place it in the root "dist" folder
"manifestOutputFolder": ""

// set your main manifest data (icon entries will be added by the plugin)
"manifestData": {
	"name": "MyApp",
	"shortName": "MyApp but short",
	"description": "Progressive Web App",
	"startUrl": "/",
	"display": "standalone",
	"backgroundColor": "#ffffff",
	"themeColor": "#000000"
},

// choose which icon sizes to generate. these are the recommended values
"sizeList": [16, 32, 48, 57, 72, 76, 96, 114, 120, 144, 152, 180, 192, 256, 512]

// true | false. if set to "true" favicons (and optionally the manifest) are generated only once in dev mode. if "false" favicons are regenerated even in production
"runOnlyDevMode": true

// set the number of tab indentations for the generated HTML snippet
"tabIndent": 2

Usage

In your template you can add a shortcut (the example below is for Nunjucks). The Favicon file must be in svg format and it will be copied into "outputFolder" folder:

{% favicon "path/to/your/image/favicon.svg" %}

Note

If an error occurred or you want to regenerate all the icons, always remember to delete the destination folder "outputFolder" if it has already been created — otherwise, the icons will not be generated.

Team ARMADA 429

• Lorenzo "Saibal" Forti

License