diff --git a/package.json b/package.json index e67ff9e..7349191 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "scripts": { "clean": "rimraf dist src/_includes/css src/_includes/scripts", + "favicons": "node ./src/_config/setup/generate-favicons.js", "screenshots": "node ./src/_config/setup/generate-screenshots.js", "dev:11ty": "cross-env ELEVENTY_ENV=development eleventy --serve --watch", "build:11ty": "cross-env ELEVENTY_ENV=production eleventy", diff --git a/src/_config/setup/generate-favicons.js b/src/_config/setup/generate-favicons.js new file mode 100644 index 0000000..0074c04 --- /dev/null +++ b/src/_config/setup/generate-favicons.js @@ -0,0 +1,40 @@ +import fs from 'node:fs'; +import sharp from 'sharp'; +import {sharpsToIco} from 'sharp-ico'; +import {pathToSvgLogo} from '../../_data/meta.js'; + +async function createFavicons() { + const outputDir = 'src/assets/images/favicon'; + fs.mkdirSync(outputDir, {recursive: true}); + + // Get the SVG logo + const svgBuffer = fs.readFileSync(pathToSvgLogo); + + // SVG icon + fs.writeFileSync(`${outputDir}/favicon.svg`, svgBuffer); + + // PNG icons + await sharp(svgBuffer).resize(192, 192).toFile(`${outputDir}/icon-192x192.png`); + await sharp(svgBuffer).resize(512, 512).toFile(`${outputDir}/icon-512x512.png`); + await sharp(svgBuffer).resize(180, 180).toFile(`${outputDir}/apple-touch-icon.png`); + + // maskable icon + await sharp(svgBuffer) + .resize(512, 512) + .extend({ + top: 50, + bottom: 50, + left: 50, + right: 50, + background: {r: 0, g: 0, b: 0, alpha: 0} // Transparent padding + }) + .toFile(`${outputDir}/maskable-icon.png`); + + // ICO icon + const iconSharp = sharp(svgBuffer).resize(16, 16); + await sharpsToIco([iconSharp], `${outputDir}/favicon.ico`, {sizes: [16]}); + + console.log('All favicons generated.'); +} + +createFavicons();