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: 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
• /favicon-16.png
• /favicon-32.png
• /apple-touch-icon.png

It also add the <link> elements to all HTML pages to configure the favicons properly.

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",
}));