Favicon

Options

input string record

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

Default:

"/favicon.svg"

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
• /apple-touch-icon.png
• If the input file is SVG, it's also exported

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.

<link href="/favicon.ico" rel="icon" sizes="32x32">
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon.svg" rel="icon" sizes="any" type="image/svg+xml">

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

As of Lume 3.1.2, it's possible to configure different input files for different sizes:

site.use(favicon({
  input: {
    16: "favicon.svg",
    180: "big-favicon.svg",
  },
}));