Favicon

Options

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