Favicon

Options See on deno.land

input string

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

Default:

"/favicon.svg"

cache string boolean

The cache folder

Default:

true

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

Default:

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

Description

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.

Installation

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:

site.use(favicon({
  input: "/my-custom-favicon.png",
}));