Support output of SVG favicons

src/helpers.ts

@@ -235,6 +235,26 @@ function toPng(pipeline: sharp.Sharp): Promise<Buffer> {
   return pipeline.png().toBuffer();
 }
 
+async function createSvg(
+  sourceset: SourceImage[],
+  options: IconPlaneOptions
+): Promise<Buffer> {
+  const { width, height } = options;
+  const source = bestSource(sourceset, width, height);
+  if (source.metadata.format === "svg") {
+    return source.data;
+  } else {
+    const pipeline = await createPlane(sourceset, options);
+    const png = await toPng(pipeline);
+    const encodedPng = png.toString("base64");
+    return Buffer.from(
+      `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+  <image width="${width}" height="${height}" xlink:href="data:image/png;base64,${encodedPng}"/>
+</svg>`
+    );
+  }
+}
+
 export async function createFavicon(
   sourceset: SourceImage[],
   name: string,
@@ -248,6 +268,9 @@ export async function createFavicon(
     );
     const contents = toIco(images);
     return { name, contents };
+  } else if (path.extname(name) === ".svg") {
+    const contents = await createSvg(sourceset, properties[0]);
+    return { name, contents };
   } else {
     const contents = await createPlane(sourceset, properties[0]).then(toPng);
     return { name, contents };

src/platforms/base.ts

@@ -11,14 +11,18 @@ import {
 } from "../config/defaults";
 import { asString, createFavicon, relativeTo, SourceImage } from "../helpers";
 
+export interface OptionalMixin {
+  readonly optional?: boolean;
+}
+
 export function uniformIconOptions<T extends NamedIconOptions>(
   options: FaviconOptions,
   iconsChoice:
     | IconOptions
     | boolean
     | (string | NamedIconOptions)[]
     | undefined,
-  platformConfig: T[]
+  platformConfig: (T & OptionalMixin)[]
 ): T[] {
   let result = [];
   if (Array.isArray(iconsChoice)) {
@@ -36,12 +40,14 @@ export function uniformIconOptions<T extends NamedIconOptions>(
         ...iconsChoices[iconOptions.name],
       }));
   } else if (typeof iconsChoice === "object") {
-    result = platformConfig.map((iconOptions) => ({
-      ...iconOptions,
-      ...iconsChoice,
-    }));
+    result = platformConfig
+      .filter((iconOptions) => !iconOptions.optional)
+      .map((iconOptions) => ({
+        ...iconOptions,
+        ...iconsChoice,
+      }));
   } else {
-    result = platformConfig;
+    result = platformConfig.filter((iconOptions) => !iconOptions.optional);
   }
 
   return result.map((iconOptions) => ({

src/platforms/favicons.ts

@@ -1,13 +1,14 @@
 import { FaviconHtmlElement } from "../index";
 import { FaviconOptions, NamedIconOptions } from "../config/defaults";
 import { transparentIcon, transparentIcons } from "../config/icons";
-import { Platform, uniformIconOptions } from "./base";
+import { OptionalMixin, Platform, uniformIconOptions } from "./base";
 
-const ICONS_OPTIONS: NamedIconOptions[] = [
+const ICONS_OPTIONS: (NamedIconOptions & OptionalMixin)[] = [
   { name: "favicon.ico", ...transparentIcons(16, 24, 32, 48, 64) },
   { name: "favicon-16x16.png", ...transparentIcon(16) },
   { name: "favicon-32x32.png", ...transparentIcon(32) },
   { name: "favicon-48x48.png", ...transparentIcon(48) },
+  { name: "favicon.svg", ...transparentIcon(1024), optional: true }, // arbitrary size. if more than one svg source is given, the closest to this size will be picked.
 ];
 
 export class FaviconsPlatform extends Platform {
@@ -23,6 +24,9 @@ export class FaviconsPlatform extends Platform {
       if (name.endsWith(".ico")) {
         // prettier-ignore
         return `<link rel="icon" type="image/x-icon" href="${this.relative(name)}">`;
+      } else if (name.endsWith(".svg")) {
+        // prettier-ignore
+        return `<link rel="icon" type="image/svg+xml" href="${this.relative(name)}">`;
       }
 
       const { width, height } = options.sizes[0];

test/setup.js

@@ -24,9 +24,17 @@ async function imagePlanes(image) {
   return result;
 }
 
+function isSvg(image) {
+  return path.extname(image.name) === ".svg";
+}
+
 expect.extend({
   async toMatchFaviconsSnapshot(received) {
     for (const image of received.images) {
+      if (isSvg(image)) {
+        continue;
+      }
+
       const planes = await imagePlanes(image);
 
       for (const plane of planes) {
@@ -46,7 +54,7 @@ expect.extend({
       ...received,
       images: received.images.map((image) => ({
         ...image,
-        contents: null,
+        contents: isSvg(image) ? image.contents.toString("utf-8") : null,
       })),
     };
 

test/svgOutput.test.js

@@ -0,0 +1,36 @@
+import favicons from "../src";
+import { logo_png, logo_svg } from "./util";
+
+test("should reuse svg as a favicon", async () => {
+  expect.assertions(1);
+
+  const result = await favicons(logo_svg, {
+    icons: {
+      favicons: ["favicon.svg"],
+      android: false,
+      appleIcon: false,
+      appleStartup: false,
+      windows: false,
+      yandex: false,
+    },
+  });
+
+  await expect(result).toMatchFaviconsSnapshot();
+});
+
+test("should generate svg favicon", async () => {
+  expect.assertions(1);
+
+  const result = await favicons(logo_png, {
+    icons: {
+      favicons: ["favicon.svg"],
+      android: false,
+      appleIcon: false,
+      appleStartup: false,
+      windows: false,
+      yandex: false,
+    },
+  });
+
+  await expect(result).toMatchFaviconsSnapshot();
+});