Creare una favicon: dimensioni e file di cui il Suo sito ha davvero bisogno

In breve: un sito moderno ha bisogno di un favicon.ico da 16, 32 e 48 pixel (o almeno di un PNG da 32 pixel) per la scheda del browser, facoltativamente di una favicon SVG nitida a ogni dimensione, di un’icona touch da 180 × 180 per smartphone e tablet che salvano il sito nella schermata Home, e di un manifest della web app che elenca icone da 192 × 192 e 512 × 512 pixel, idealmente con una versione mascherabile (maskable). Ogni file si collega con una sola riga nel <head> della pagina.

Questa guida spiega a cosa serve ogni file, come disegnare un segno ancora leggibile a 16 pixel, perché le icone mascherabili richiedono più margine e come creare l’intero set da un’unica immagine nel Suo browser con Favicon e icone app — tag HTML e manifest compresi. Si chiude con il controllo del risultato e con il motivo per cui i browser a volte mostrano ancora la vecchia icona.

Quali dimensioni di favicon servono a un sito?

Browser, sistemi operativi e schermate Home scelgono ciascuno, tra ciò che la pagina offre, l’icona più adatta. Un set completo e attuale si presenta così:

Il manifest della web app è un piccolo file JSON (site.webmanifest) con il nome del sito, le sue icone, un colore del tema e il modo in cui si apre una volta installato. Il suo formato è una specifica del W3C. Anche se non prevede mai una web app installabile, i browser lo leggono per le icone della schermata Home.

ICO, PNG o SVG: quale formato per la favicon?

• ICO è il formato più vecchio e ancora il più robusto: un solo file contiene più dimensioni e funziona dove nient’altro funziona. Lo collochi nella radice del sito.
• Le favicon PNG sono semplici dimensioni singole. I browser moderni le accettano direttamente; offra 16 e 32 pixel.
• Le favicon SVG si ridimensionano senza perdita e sono di solito minuscole. Non tutti i browser le usano: completano ICO e PNG invece di sostituirli.
• Le icone touch e del manifest sono sempre PNG: opaca l’icona touch, trasparenti dove consentito le icone normali del manifest.

Se il Suo logo debba esistere in SVG o in PNG è una questione a sé, messa a confronto in SVG o PNG per il logo.

Disegnare una favicon leggibile a 16 pixel

Su 16 × 16 pixel ci sono 256 punti a disposizione. Un logo completo di scritta diventa una macchia grigia. Cosa funziona:

• Il simbolo, non tutto il logo. Una lettera, due iniziali o il solo pittogramma del logo — mai uno slogan o un testo piccolo.
• Contrasto forte. Un segno chiaro su fondo scuro, o il contrario. La scheda può essere chiara o scura; un segno senza fondo proprio deve funzionare su entrambe.
• Forme spesse, pochi dettagli. Linee sottili e piccoli spazi scompaiono riducendo. Semplifichi invece di rimpicciolire.
• Riempire il quadrato. Un logo largo in un quadrato lascia una striscia sottile al centro; ritagli sul simbolo o lo ridisegni in forma quadrata.
• Partire in grande. Crei le icone da un SVG o da un’immagine di almeno 512 pixel per lato, così ogni dimensione è una vera riduzione e nulla viene ingrandito.

Ancora nessun logo? Una sola lettera o un’emoji sul colore del marchio è un’ottima favicon, leggibile a ogni dimensione.

Icone mascherabili: margine e zona sicura

Alcuni sistemi ritagliano le icone della schermata Home a cerchio, a quadrato arrotondato o in un’altra forma a loro scelta. Un’icona normale perde allora gli angoli — oppure galleggia, piccola, su un fondo bianco. Un’icona mascherabile (maskable) risolve il problema: è opaca fino ai bordi e tutto ciò che conta si trova nella zona sicura, un cerchio centrale il cui raggio è il 40 % della dimensione dell’icona, come definisce la specifica del manifest della web app. Ciò che sta fuori può essere tagliato.

In pratica significa un margine generoso: un segno che riempie l’icona normale da bordo a bordo deve essere sensibilmente più piccolo su quella mascherabile, su un colore di fondo pieno. Anche l’icona touch per smartphone e tablet è opaca, perché le aree trasparenti verrebbero mostrate in nero; i suoi angoli li arrotonda il sistema.

Creare una favicon con Favicon e icone app

Favicon e icone app crea il set completo in un’unica elaborazione, nel Suo browser: l’immagine viene elaborata sul Suo dispositivo e non viene mai caricata da noi (maggiori dettagli nella pagina sulla sicurezza).

1. 1

   Scegliere la sorgente

   Aggiunga un’immagine — idealmente un SVG o un PNG quadrato del Suo segno — oppure imposti «Crea le icone da» su «Testo o un’emoji» e scelga il testo, il suo colore, il colore dietro il testo e un font.

2. 2

   Adattare e distanziare

   Per un’immagine non quadrata scelga «Adatta l’intera immagine» o «Ritaglia un quadrato» e quale parte mantenere. «Spazio attorno all’immagine o al testo» aggiunge margine a ogni icona.

3. 3

   Colori e manifest

   Stabilisca lo sfondo delle icone Apple e mascherabili, se desidera gli angoli arrotondati dell’icona Apple, il nome dell’app, il nome breve sotto l’icona nella schermata Home, il colore del tema e come si apre il sito una volta installato.

4. 4

   Indicare dove saranno i file

   «Dove si troveranno i file sul sito web» viene scritto nei tag HTML e nel manifest — / per la radice del sito, oppure una cartella come /icons/.

5. 5

   Scaricare e aggiungere i tag

   Salvi tutti i file in una volta, li carichi sul Suo sito come di consueto e incolli i tag di snippet.html nel <head> di ogni pagina.

Il risultato: favicon.ico (16, 32 e 48 px), i PNG da 16 e 32 pixel, l’icona touch Apple da 180 pixel, le icone del manifest da 192 e 512 pixel, un’icona mascherabile da 512 pixel il cui contenuto resta nella zona sicura, site.webmanifest e snippet.html. Con una sorgente SVG si aggiunge un icon.svg ripulito, citato nei tag; su richiesta anche browserconfig.xml con un riquadro per i vecchi riquadri Windows. Le dimensioni piccole vengono rese più nitide dopo la riduzione, a meno che Lei non lo disattivi, e compare un avviso se la sorgente ha dovuto essere ingrandita. Con le impostazioni predefinite, lo snippet è il seguente:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

Lo strumento elabora una sorgente per elaborazione, e un’elaborazione è un’operazione. I primi passi nell’app sono descritti in il Suo primo strumento; tutti gli strumenti creativi si trovano in Crea.

Controllare la favicon e svuotare la cache

I browser conservano le favicon a lungo, spesso più a lungo della pagina stessa. Se dopo un aggiornamento compare ancora la vecchia icona, di solito è la cache, non i file:

• Apra il file direttamente, per esempio https://www.example.ch/favicon.ico. Se lì appare la nuova icona, il caricamento è riuscito.
• Ricarichi senza cache o apra la pagina in una finestra privata.
• Modifichi il riferimento al file quando sostituisce un’icona, per esempio /favicon.ico?v=2 nei tag, così i browser la scaricano di nuovo.
• Controlli la scheda con il tema chiaro e scuro e nella schermata Home di uno smartphone — è lì che si notano un contrasto debole o un margine insufficiente.
• Guardi il codice sorgente: i tag vanno nel <head> di ogni pagina, non solo della home page.

Domande frequenti

Quanto deve essere grande una favicon?

Per la scheda del browser 16 e 32 pixel (in un ICO, con in più 48 pixel); per le schermate Home 180 pixel per l’icona touch e 192 e 512 pixel nel manifest. Parta da una sorgente di almeno 512 pixel o da un SVG.

Basta ancora un solo favicon.ico?

Per la scheda del browser, per lo più sì. Le schermate Home e le web app installate cercano però l’icona touch e le icone del manifest; senza di esse mostrano uno screenshot o una lettera generica al posto del Suo segno.

Posso usare un’emoji come favicon?

Sì. In Favicon e icone app scelga «Testo o un’emoji» e un colore di sfondo; l’emoji viene disegnata con i font inclusi e diventa un normale file immagine in ogni dimensione, identico su ogni dispositivo.

Perché la mia nuova favicon non compare?

Di solito per la cache del browser. Apra direttamente l’indirizzo dell’icona, ricarichi senza cache e aggiunga un parametro di versione al riferimento del file. Verifichi anche che il percorso nei tag corrisponda a dove si trovano davvero i file.

Pronto per un’icona nitida in ogni scheda? Apra gli strumenti creativi, veda quali formati di immagine sono supportati, legga come alleggerire le immagini del sito, scopra come le agenzie preparano i file dei clienti, oppure crei un account gratuito.