favgen 0.0.4 → 0.2.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

package/README.md

@@ -5,21 +5,20 @@ This is a simple CLI tool to generate an optimized set of favicons from a single
 Use it like this: `npx favgen /path/to/input -o /path/to/output`.
 
 You can tweak the following settings by giving additional commands:
-- output directory by providing `-o` option with a path (`__favicon__` by default)
-- icon prefix by providing `--prefix` option with a name (`favicon` by default)
-- colors palette size by providing `--colors` with a number between 2 and 256
-- producing 16x16 .ico file by setting `--include16` flag
+- output directory by providing `-o` option with a path (`__favicons__` by default)
+- colors palette size by providing `--colors` with a number between 2 and 256 (64 by default)
 
 Input file can be in any of the following formats: JPEG, PNG, WebP, GIF, AVIF, TIFF or SVG (anything [sharp library](https://sharp.pixelplumbing.com/) accepts).
 
 By default, the following set of favicons is produced:
-- `favicon.svg` if input file was SVG and `favicon.png` 32x32 otherwise
+- `icon.svg` (only if input file is SVG)
 - `favicon.ico` 32x32
-- `favicon-192.png` 192x192 (for Android devices)
-- `favicon-512.png` 192x192 (for Android devices)
+- `icon-192.png` 192x192 (for Android devices)
+- `icon-512.png` 512x512 (for Android devices)
+- `icon-mask.png` 512x512 with safe padding (for Android maskable icon support)
 - `apple-touch-icon.png` 180x180 (original image is resized to 140x140 and 20px transparent padding is added on each side; rationale for this is given in the article)
 
-Additionally, a sample `manifest.webmanifest` file is produced which shows how favicons for Android devices are supposed to be included.
+Additionally, a sample `manifest.webmanifest` file is produced which includes regular and maskable Android icons.
 
 Besides that, PNG output is optimized by `sharp` (which uses `pngquant`) and SVG output is optimized by [SVGO](https://github.com/svg/svgo).
 Also, color palette is reduced to 64 colors by default in order to reduce assets’ size.
@@ -27,10 +26,8 @@ Also, color palette is reduced to 64 colors by default in order to reduce assets
 The tool can be also used as API:
 ```js
 const { produceIcons } = require("favgen")
-const inputFilePath = "favicon.svg"
+const inputFilePath = "icon.svg"
 const outputDirPath = "__favicons__"
-const prefix = "favicon" // default value
 const paletteSize = 64 // default value
-const include16 = true // default is false
-produceIcons(inputFilePath, outputDirPath, prefix, paletteSize, include16)
+produceIcons(inputFilePath, outputDirPath, paletteSize)
 ```

package/bin/index.js

@@ -15,10 +15,8 @@ program
   .description("Produce a set of favicons from a single input file.")
   .argument("<inputPath>", "Input icon path")
   .option("-o, --output <path>", "Output directory path", "__favicons__")
-  .option("--prefix <name>", "Icon prefix", "favicon")
   .option("--colors <number>", "Color paleete size, between 2 and 256", 64)
-  .option("--include16", "Produce 16x16 .ico file", false)
-  .action((filepath, { output: outputDir, prefix, colors, include16 }) => {
+  .action(async (filepath, { output: outputDir, colors }) => {
     const colorsPaletteSize = parseInt(colors, 10);
     const isValidPaletteSize =
       Number.isNaN(colorsPaletteSize) ||
@@ -30,11 +28,11 @@ program
       );
     }
 
-    const inputPath = path.join(CWD, filepath);
+    const inputPath = path.isAbsolute(filepath) ? filepath : path.join(CWD, filepath);
     const outputPath = path.isAbsolute(outputDir)
       ? outputDir
       : path.join(CWD, outputDir);
-    produceIcons(inputPath, outputPath, prefix, colorsPaletteSize, include16);
+    await produceIcons(inputPath, outputPath, colorsPaletteSize);
   });
 
 program.parse();

package/lib/generator.d.ts

@@ -1,2 +1,2 @@
-declare function produceIcons(inputFilePath: string, outputDirPath: string, prefix?: string, paletteSize?: number, include16?: boolean): Promise<void>;
+declare function produceIcons(inputFilePath: string, outputDirPath: string, paletteSize?: number): Promise<void>;
 export default produceIcons;

package/lib/generator.js

@@ -11,7 +11,7 @@ const svgo_1 = require("svgo");
 const is_svg_1 = __importDefault(require("is-svg"));
 const baseIconConfigs = [
     {
-        name: "favicon.svg",
+        name: "icon.svg",
     },
     {
         // no colors palette size otherwise its color profile is off
@@ -20,15 +20,22 @@ const baseIconConfigs = [
         pxSize: 32,
     },
     {
-        name: "favicon-192.png",
+        name: "icon-192.png",
         pxSize: 192,
         colorsPaletteSize: 64,
     },
     {
-        name: "favicon-512.png",
+        name: "icon-512.png",
         pxSize: 512,
         colorsPaletteSize: 64,
     },
+    {
+        name: "icon-mask.png",
+        pxSize: 512,
+        colorsPaletteSize: 64,
+        // 512 - (52 * 2) = 408 which stays in the recommended 409px safe zone
+        padding: 52,
+    },
     {
         name: "apple-touch-icon.png",
         pxSize: 180,
@@ -37,8 +44,15 @@ const baseIconConfigs = [
     },
 ];
 function buildPng(rawBuffer, { pxSize, colorsPaletteSize, padding }) {
+    if (pxSize === undefined) {
+        throw Error("PNG output size is not defined.");
+    }
+    const resizePxSize = padding ? pxSize - padding * 2 : pxSize;
+    if (resizePxSize <= 0) {
+        throw Error("Padding is too large for the output size.");
+    }
     const outputIcon = (0, sharp_1.default)(rawBuffer)
-        .resize(pxSize, pxSize)
+        .resize(resizePxSize, resizePxSize)
         .png({ compressionLevel: 9, colors: colorsPaletteSize });
     return padding
         ? outputIcon.extend({
@@ -81,60 +95,38 @@ function getIconBuffer(rawBuffer, cfg) {
             throw Error(`Extension ${iconExtension} is not recognized.`);
     }
 }
-async function produceIcons(inputFilePath, outputDirPath, prefix = "favicon", paletteSize = 64, include16 = false) {
+async function produceIcons(inputFilePath, outputDirPath, paletteSize = 64) {
     await promises_1.default.access(inputFilePath);
-    try {
-        await promises_1.default.access(outputDirPath);
-    }
-    catch (e) {
-        if (e instanceof Error && e.message.includes("ENOENT")) {
-            promises_1.default.mkdir(outputDirPath);
-        }
-        else {
-            throw e;
-        }
-    }
+    await promises_1.default.mkdir(outputDirPath, { recursive: true });
     const rawIconBuf = await promises_1.default.readFile(inputFilePath);
     const isSvgBuf = (0, is_svg_1.default)(rawIconBuf);
-    let iconConfigs = baseIconConfigs.map((cfg) => {
+    const iconConfigs = baseIconConfigs
+        .filter((cfg) => isSvgBuf || cfg.name !== "icon.svg")
+        .map((cfg) => {
         const mappedCfg = { ...cfg };
-        if (!isSvgBuf && mappedCfg.name.endsWith(".svg")) {
-            mappedCfg.name = mappedCfg.name.replace(".svg", ".png");
-            mappedCfg.pxSize = 32;
-        }
-        mappedCfg.name = mappedCfg.name.replace("favicon", prefix);
         if (mappedCfg.name.endsWith(".png")) {
             mappedCfg.colorsPaletteSize = paletteSize;
         }
         return mappedCfg;
     });
-    if (include16) {
-        const ico = iconConfigs.find((cfg) => cfg.name.endsWith(".ico"));
-        const icoNameWithoutExt = ico.name.slice(0, -4);
-        iconConfigs.push({ ...ico, name: `${icoNameWithoutExt}-32.ico` });
-        iconConfigs.push({
-            ...ico,
-            name: `${icoNameWithoutExt}-16.ico`,
-            pxSize: 16,
-        });
-        iconConfigs = iconConfigs.filter((cfg) => cfg !== ico);
-    }
     const iconsGenerationSeries = iconConfigs.map(async (cfg) => {
-        const iconName = cfg.name.replace("favicon", prefix);
-        const iconCfg = cfg.name.endsWith("png")
-            ? { ...cfg, colorsPaletteSize: paletteSize, name: iconName }
-            : { ...cfg, name: iconName };
-        const outputBuffer = await getIconBuffer(rawIconBuf, iconCfg);
-        return promises_1.default.writeFile(path_1.default.join(outputDirPath, iconCfg.name), outputBuffer);
+        const outputBuffer = await getIconBuffer(rawIconBuf, cfg);
+        return promises_1.default.writeFile(path_1.default.join(outputDirPath, cfg.name), outputBuffer);
     });
     await Promise.all(iconsGenerationSeries);
     const manifestFile = {
         icons: [
-            { src: `/${prefix}-192.png`, type: "image/png", sizes: "192x192" },
-            { src: `/${prefix}-512.png`, type: "image/png", sizes: "512x512" },
+            { src: "/icon-192.png", type: "image/png", sizes: "192x192" },
+            {
+                src: "/icon-mask.png",
+                type: "image/png",
+                sizes: "512x512",
+                purpose: "maskable",
+            },
+            { src: "/icon-512.png", type: "image/png", sizes: "512x512" },
         ],
     };
     const manifestText = JSON.stringify(manifestFile, null, 2);
-    promises_1.default.writeFile(path_1.default.join(outputDirPath, "manifest.webmanifest"), manifestText);
+    await promises_1.default.writeFile(path_1.default.join(outputDirPath, "manifest.webmanifest"), manifestText);
 }
 exports.default = produceIcons;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "favgen",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "CLI tool to generate a set of favicons from a single input file.",
   "keywords": [
     "favicon"