npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@massimo-cassandro/create-favicons

v1.3.6

Published

Favicon files builder

Downloads

10

Readme

Create favicons

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.

Creazione template file di config (vedi più avanti)

npx create-favicons init

Utilizzo

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

Utilizzo da remoto

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=...]

Esecuzione

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.