Crea i file favicons come descritto in How to Favicon in 2024.
I file da elaborare devono essere in formato SVG, mentre quelli generati sono in formato SVG (favicon), PNG (apple-touch-icon e altri file per android), e ICO (altro favicon per compatibilità con i browser meno recenti). Vengono inoltre genrati i file manifest.webmanifest
e uno snippet html, opzionale, con i tag link
per l'inserimento degli elementi generati.
Le immagini sono generate con Sharp, SVGO e sharp-ico.
npx create-favicons init
npx create-favicons [--dir=./path/to/dir]
Lo script agisce normalmente nella directory corrente, ma, utilizzando il parametro opzionale --dir
,
è possibile specificare una directory alternativa (percorso relativo alla dir di esecuzione).
Lo script in prima battuta cerca nella dir di lavoro il file create-favicons-cfg.mjs
che contiene un oggetto
con tutti i parametri necessari (vedi di seguito).
In sua assenza, cerca il file favicon-src.svg
da utilizzare come sorgente per tutte le immagini, e assumendo i valori di default (vedi dopo) per tutti gli altri parametri.
Tra gli altri, è possibile spcificare il parametro small_src_img
nel caso sia necessario specificare un'immagine ottimizzata per le piccole dimensioni (32px).
Il formato migliore per i file sorgenti è SVG, o in alternativa PNG.
In assenza di entrambi i file viene restituito un errore.
I parametri di default sono elencati in dettaglio nel file src/create-favicons/src/default-params.mjs
,
e possono essere personalizzati nel file di configurazione, che deve avere questa forma:
// file create-favicons-cfg.mjs
const params = [{ /* ... */ }];
export default params;
params
può essere un oggetto o un array. In quest'ultimo caso, ogni elemento dell'array corrisponde ad un diverso set di favicons.
Per creare un file di cfg di esempio nella directory corrente (con tutti i valori di default e la loro descrizione), utilizzare il comando:
npx create-favicons init
I comandi possono essere eseguiti anche senza installare preventivamente il package:
npx --package=@massimo-cassandro/dev-utilities create-favicons init
npx --package=@massimo-cassandro/dev-utilities create-favicons [--dir=...]
Lo script produce le varie immagini png ed svg, il file manifest.webmanifest
e uno snippet html (o nel linguaggio indicato nel parametro snippet_language
).
Tutte le immagini vengono ottimizzate con SVGO e imagemin.
Tutti file vengono salvati nella dir indicata in output_dir
(default: directory corrente).
Opzionalmente il file snippet può essere salvato in una directory differente (snippet_path
) o si può decidere di non crearlo,
impostando il valore snippet_name
a null
.
Nel file di configurazione è anche possibile impostare il parametro webmanifest_extra
, che permette di aggiungere voci aggiuntive al file manifest.
Per ulteriori info: https://developer.mozilla.org/en-US/docs/Web/Manifest
File generati:
<link rel="icon" href="/favicon.ico" sizes="any"> <!-- 32×32 + 16x16 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Vedi anche esempio in https://github.com/massimo-cassandro/dev-utilities/tree/main/test/test/create-favicons-test.