Convertitore di favicon

Crea da una sola immagine raster i file necessari per aggiungere una favicon a un sito. Scegli come adattare la sorgente alla tela quadrata, imposta lo sfondo e scarica uno ZIP contenente un ICO multirisoluzione, sette icone PNG, un manifesto per app web, la configurazione dei riquadri Windows e uno snippet HTML pronto da copiare nell’intestazione. La conversione dell’immagine e la creazione dello ZIP avvengono localmente nel browser.

Come convertire un’immagine in un pacchetto favicon

  1. 1

    Scegli un’immagine raster

    Seleziona un file PNG, JPEG o WebP che rispetti i limiti indicati per dimensione del file e dimensioni dell’immagine. I file SVG, GIF e AVIF non sono accettati.

  2. 2

    Scegli l’adattamento

    Usa Copri per riempire il quadrato ritagliando i bordi, oppure Contieni per mantenere visibile l’intera immagine e aggiungere spazio intorno.

  3. 3

    Imposta lo sfondo

    Scegli un colore di sfondo per i pixel trasparenti e per lo spazio creato dalla modalità Contieni, quindi controlla le anteprime generate.

  4. 4

    Scarica e installa

    Scarica lo ZIP, inserisci nel sito le icone e i file di configurazione, quindi copia nell’intestazione del documento i tag di collegamento forniti.

Contenuto dello ZIP

Elemento del pacchetto Funzione
favicon.ico Un contenitore ICO con versioni da 16, 32, 48 e 256 px per browser e software che richiedono il percorso tradizionale della favicon
favicon-16x16.png PNG compatto per le schede del browser e altri spazi ridotti
favicon-32x32.png Icona a densità maggiore per schede e segnalibri del browser
favicon-48x48.png Dimensione aggiuntiva per desktop e collegamenti
mstile-150x150.png PNG da 150 × 150 richiamato dalla configurazione dei riquadri Windows
apple-touch-icon.png PNG da 180 × 180 per i collegamenti nella schermata Home dei dispositivi Apple
android-chrome-192x192.png Icona dell’app da 192 × 192 richiamata dal manifesto web
android-chrome-512x512.png Icona dell’app da 512 × 512 richiamata dal manifesto web
site.webmanifest Metadati JSON che indicano ai browser compatibili le icone da 192 e 512 px
browserconfig.xml Configurazione dei riquadri Windows che fa riferimento alle icone generate
favicon-head.html Tag pronti da copiare che collegano una pagina all’ICO, ai PNG, all’icona Apple, al manifesto e alla configurazione del browser

I file ICO e PNG sono separati di proposito. Browser e sistemi operativi scelgono le icone in modi diversi, quindi un pacchetto completo supporta sia la richiesta tradizionale /favicon.ico sia le dichiarazioni esplicite delle icone moderne.

Tag HTML per l’intestazione

Il pacchetto scaricato contiene uno snippet di questo tipo:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

Se i file si trovano in una sottocartella o su un host separato per le risorse, modifica i percorsi prima di incollare i tag in <head>. Mantieni allineati i nomi e i percorsi presenti in site.webmanifest e browserconfig.xml con i file che pubblichi.

Copri, contieni e scelta dello sfondo

  • Copri riempie completamente ogni risultato quadrato. Una sorgente larga o alta viene ritagliata in modo uniforme dai bordi opposti, quindi conviene tenere gli elementi importanti vicino al centro.
  • Contieni mantiene visibile l’intera sorgente. Lo spazio inutilizzato diventa un margine nel colore di sfondo selezionato.
  • Sfondo può restare trasparente oppure usare un colore pieno personalizzato. In modalità Contieni, questa scelta controlla anche il margine intorno all’immagine. Prima della pubblicazione, controlla le anteprime su sfondi di pagina chiari e scuri.

Per icone piccole più nitide, parti da un’immagine quadrata semplice di almeno 512 × 512 pixel. Scritte sottili, linee finissime e piccoli dettagli possono sparire nella versione da 16 px anche quando la sorgente è grande.

Limiti di input e posizionamento

Questo convertitore accetta soltanto immagini raster PNG, JPEG e WebP. Verifica la firma dell’immagine e rifiuta SVG, GIF, AVIF e tutti gli altri formati non elencati. La sorgente può avere una dimensione massima di 20 MiB, nessun lato può superare 8.192 pixel e l’immagine non può oltrepassare 24 megapixel complessivi. I limiti delle dimensioni vengono controllati prima della decodifica completa dell’immagine.

Dopo il download, estrai lo ZIP e carica i file generati nei percorsi usati dallo snippet fornito. I percorsi relativi alla radice, come /favicon.ico, presuppongono che i file siano disponibili dalla radice del dominio attuale. Quando sostituisci una favicon esistente, cancella la cache del sito o della CDN, perché i browser spesso conservano le icone più a lungo delle normali risorse di pagina.

Il manifesto incluso fornisce i metadati delle icone, ma un manifesto e un set di icone da soli non rendono un sito un’app web progressiva installabile. L’installazione dipende anche dalla pagina, dalla sicurezza del trasporto e dai requisiti di ciascun browser.

Domande frequenti

Puoi usare PNG, JPEG o WebP. Il convertitore controlla la firma del file anziché fidarsi solo del nome e rifiuta SVG, GIF, AVIF e gli altri formati.

Copri ingrandisce l’immagine fino a riempire il quadrato e ritaglia parti uguali dai bordi quando le proporzioni non sono quadrate. Contieni conserva l’immagine intera e riempie lo spazio restante del quadrato con il colore di sfondo scelto.

ICO è un contenitore che può memorizzare diverse dimensioni ridotte in un solo file favicon tradizionale. I PNG separati offrono a browser e piattaforme risorse con dimensioni precise per schede, collegamenti alla schermata Home e icone delle applicazioni. Mantenerli entrambi migliora la copertura pratica.

No. Il manifesto descrive le icone dell’app generate e i relativi metadati di visualizzazione, ma l’installabilità dipende da ulteriori requisiti del browser e da come il sito viene realizzato e distribuito.

Lo snippet fornito usa percorsi relativi alla radice, quindi la soluzione più semplice è collocare i file estratti nella radice del dominio. Se usi un’altra cartella o un host per le risorse, aggiorna lo snippet e i percorsi nel manifesto e nella configurazione del browser.

No. L’elaborazione dell’immagine e la creazione dello ZIP avvengono nel browser. Nel flusso in più passaggi, una bozza IndexedDB può conservare l’immagine in questo browser per un massimo di 30 minuti per trasferirla tra i passaggi. Questo trasferimento locale non è un caricamento sul server.

Strumenti correlati