Create all favicons needed automatically using a svg file as the source

Options See on deno.land

input string

The input file to generate the favicons Accepted formats are SVG, PNG, JPG, GIF, BMP, TIFF, WEBP

cache string boolean

The cache folder

favicons object[]

The generated favicons By default it follows the recommendations from: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

  { url: "/favicon.ico", size: [ 48 ], rel: "icon", format: "ico" },
    url: "/apple-touch-icon.png",
    size: [ 180 ],
    rel: "apple-touch-icon",
    format: "png"


This plugin reads a file (by default /favicon.svg) and generates the following files:

  • /favicon.ico
  • /apple-touch-icon.png

It also add the <link> elements to all HTML pages to configure the favicons properly, following the Definitive edition of "How to Favicon" in 2023 article to give priority to SVG format.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import favicon from "lume/plugins/favicon.ts";

const site = lume();

site.use(favicon(/* Options */));

export default site;

Note that you need the /favicon.svg file in your source folder with a 1/1 aspect ratio. You can set another filename or image format in the configuration:

  input: "/my-custom-favicon.png",