11ty logo

I have added favicon generation to the site using svg as input.

This is implemented using sharp to generate 96x96 png favicon when running eleventy.

  // Generate favicon from svg input
  eleventyConfig.on('eleventy.before', async () => {
    await sharp('src/_media/favicon.svg')
      .png()
      .resize(96, 96)
      .toFile('public/img/icon-96x96.png')
      .catch(function (err) {
        console.log('[11ty] ERROR Generating favicon')
        console.log(err)
      })
  })
  eleventyConfig.watchIgnores.add('public/img/icon-96x96.png')

Reference in head of base.njk.

<link rel="icon" type="image/png" sizes="96x96" href="/img/icon-96x96.png">

Source Code #

The source for my 11ty blog is available on github.

11ty-equk