eleventy-plugin-manifest
This 11ty plugin builds a manifest.webmanifest
file and supports resizing favicons automatically.
NOTE: This project is a work in progress! I make no promises beyond "it works on my machine!" right now. I am using it personally in a few projects, but it doesn't have any automated testing and it may need to expose extra config to be more broadly useful.
Default Options
{
output: 'dist',
name: 'Eleventy',
short_name: 'Eleventy',
start_url: '/',
background_color: '#ffffff',
theme_color: '#222222',
display: 'standalone',
icon: 'assets/favicon.svg',
icons: [
{
src: `icons/icon-48x48.png`,
sizes: `48x48`,
type: `image/png`,
},
{
src: `icons/icon-72x72.png`,
sizes: `72x72`,
type: `image/png`,
},
{
src: `icons/icon-96x96.png`,
sizes: `96x96`,
type: `image/png`,
},
{
src: `icons/icon-144x144.png`,
sizes: `144x144`,
type: `image/png`,
},
{
src: `icons/icon-192x192.png`,
sizes: `192x192`,
type: `image/png`,
},
{
src: `icons/icon-256x256.png`,
sizes: `256x256`,
type: `image/png`,
},
{
src: `icons/icon-384x384.png`,
sizes: `384x384`,
type: `image/png`,
},
{
src: `icons/icon-512x512.png`,
sizes: `512x512`,
type: `image/png`,
},
],
}
Usage
1. Install the Plugin
npm i --save-dev eleventy-plugin-manifest
or
yarn add -D eleventy-plugin-manifest
2. Add the Plugin to Eleventy Config
// .eleventy.js
const pluginManifest = require('eleventy-plugin-manifest')
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pluginManifest)
}
3. Provide Manifest Config
You can override the default config in two different ways.
First, you can provide your own options when adding the plugin to your Eleventy config.
eleventyConfig.addPlugin(pluginManifest, {
name: 'My App',
icon: 'assets/img/uploads/favicon.png'
})
Second, you can provide your own options to the filter itself (see usage below). This can be useful if you use something like Netlify CMS to manage site settings consumed by Eleventy as data.
For example, make a site.json
file in your _data
directory
{
"title": "My Site Title",
"manifest": {
"name": "My App",
"icon": "assets/img/uploads/favicon.png"
}
}
and provide that to the plugin's manifest
filter
{% site.manifest | manifest | safe %}
Both options can be used together. In this case, options passed to the addPlugin
call will override the default plugin config, and data passed to the manifest
filter will override both the default config and addPlugin
options.
Using the Filter
As shown above, the manifest is added to your templates with the provided manifest
filter. Make sure to include this filter in your template head
sections!
This filter will all requested favicons, if an icon
option is provided, then will generate the manifest.webmanifest
to match. Finally, the filter will return the HTML tags needed in the head
to make the browser aware of the favicons and manifest file.
Combine with eleventy-plugin-pwa
If you're looking for the full PWA experience, including service workers and "add to homescreen" support, this plugin pairs well with eleventy-plugin-pwa.