zen/start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat(icons): support PNG as fallback source for favicon generation

Browse Source 
Add PNG source file detection in `make-favicon.js` so the script can
use either `favicon.svg` or `favicon.png` as input. Previously, only
SVG was supported, causing failures when no SVG was present.

- Introduce `detectSourceFile()` to check for SVG first, then PNG
- Rename variables to avoid shadowing (`pngPath` → `outPath`, loop var)
- Log detected source type for better visibility during generation
- Update generated `favicon.ico` accordingly
This commit is contained in:
Hyko
2026-04-13 13:23:05 -04:00
parent 3df841897d
commit 59a33380df
4 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 101 KiB

templates/dev/icons/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

templates/dev/icons/favicon.svg
-6
View File
@@ -1,6 +0,0 @@
<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="800" rx="400" fill="black"/>
<path d="M522.238 354.534C506.987 341.387 505.281 318.366 518.424 303.114C531.571 287.862 554.591 286.155 569.845 299.301L614.561 337.843L615.914 339.01L615.937 339.03C624.133 346.089 632.84 353.589 639.207 360.783C646.415 368.924 655.417 381.845 655.417 399.833C655.417 417.822 646.415 430.743 639.207 438.884C632.834 446.084 624.121 453.591 615.914 460.657L614.561 461.823L569.845 500.367C554.591 513.514 531.571 511.804 518.424 496.554C505.281 481.303 506.987 458.28 522.238 445.136L566.958 406.593L567.186 406.396C570.061 403.916 572.554 401.766 574.756 399.833C572.74 398.064 570.48 396.115 567.906 393.895L566.958 393.078L522.238 354.534Z" fill="white"/>
<path d="M471.266 301.997C477.631 282.895 467.306 262.248 448.206 255.881C429.105 249.513 408.455 259.837 402.09 278.939L329.173 497.687C322.805 516.792 333.129 537.438 352.229 543.807C371.333 550.173 391.98 539.848 398.349 520.747L471.266 301.997Z" fill="white"/>
<path d="M281.991 303.114C295.137 318.366 293.43 341.387 278.178 354.534L233.46 393.078L233.422 393.111C230.464 395.66 227.913 397.859 225.661 399.833C227.923 401.817 230.486 404.03 233.46 406.593L278.178 445.136C293.43 458.28 295.137 481.303 281.991 496.554C268.845 511.804 245.824 513.514 230.572 500.367L185.854 461.823L184.504 460.66C176.3 453.595 167.582 446.084 161.209 438.884C154.002 430.743 145 417.822 145 399.833C145 381.845 154.002 368.924 161.209 360.783C167.583 353.582 176.299 346.075 184.504 339.01L185.854 337.843L230.572 299.301C245.824 286.155 268.845 287.862 281.991 303.114Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

templates/dev/icons/make-favicon.js
+19 -9
View File
@@ -2,11 +2,18 @@ const fs = require('fs');
const path = require('path'); const path = require('path');
const sharp = require('sharp'); // npm install sharp --save-dev const sharp = require('sharp'); // npm install sharp --save-dev
const faviconSvgPath = path.join(__dirname, 'favicon.svg'); const svgPath = path.join(__dirname, 'favicon.svg');
const pngPath = path.join(__dirname, 'favicon.png');
const appOutputDir = path.join(__dirname, '..', '..', 'app'); const appOutputDir = path.join(__dirname, '..', '..', 'app');
const faviconSizes = [16, 24, 32, 48, 64, 128, 256]; const faviconSizes = [16, 24, 32, 48, 64, 128, 256];
function detectSourceFile() {
if (fs.existsSync(svgPath)) return { filePath: svgPath, type: 'svg' };
if (fs.existsSync(pngPath)) return { filePath: pngPath, type: 'png' };
throw new Error('Aucun fichier favicon.svg ou favicon.png trouvé dans dev/icons/');
}
function ensureDirectoryExists(directory) { function ensureDirectoryExists(directory) {
if (!fs.existsSync(directory)) { if (!fs.existsSync(directory)) {
fs.mkdirSync(directory, { recursive: true }); fs.mkdirSync(directory, { recursive: true });
@@ -15,26 +22,29 @@ function ensureDirectoryExists(directory) {
async function generateFavicon() { async function generateFavicon() {
try { try {
const { filePath, type } = detectSourceFile();
console.log(`Source détectée : ${type.toUpperCase()} (${path.basename(filePath)})`);
ensureDirectoryExists(appOutputDir); ensureDirectoryExists(appOutputDir);
const tempPngs = []; const tempPngs = [];
for (const size of faviconSizes) { for (const size of faviconSizes) {
const pngPath = path.join(appOutputDir, `favicon-${size}.png`); const outPath = path.join(appOutputDir, `favicon-${size}.png`);
await sharp(faviconSvgPath) await sharp(filePath)
.resize(size, size) .resize(size, size)
.png() .png()
.toFile(pngPath); .toFile(outPath);
console.log(`SVG → PNG (${size}x${size}) ✅`); console.log(`${type.toUpperCase()} → PNG (${size}x${size}) ✅`);
tempPngs.push(pngPath); tempPngs.push(outPath);
} }
await sharp(faviconSvgPath) await sharp(filePath)
.resize(256, 256) .resize(256, 256)
.toFile(path.join(appOutputDir, 'favicon.ico')); .toFile(path.join(appOutputDir, 'favicon.ico'));
console.log('favicon.ico créé ✅'); console.log('favicon.ico créé ✅');
for (const pngPath of tempPngs) { for (const p of tempPngs) {
fs.unlinkSync(pngPath); fs.unlinkSync(p);
} }
console.log('Génération du favicon terminée !'); console.log('Génération du favicon terminée !');