Come si usa
- Scegli Lettere e digita uno o due caratteri con i tuoi colori, oppure scegli Immagine e seleziona un logo (preferibilmente quadrato e di almeno 512 px).
- Controlla le anteprime di tutte le dimensioni, soprattutto quelle da 16 e 32 px, che appaiono nelle schede del browser.
- Scarica il file ZIP e caricane i file nella cartella principale del sito.
- Incolla i tag HTML nella sezione head delle tue pagine e, se necessario, modifica il nome in site.webmanifest.
Come funziona
Browser e dispositivi cercano le icone in posizioni diverse. Il set generato qui copre i casi più comuni: favicon.ico con immagini da 16, 32 e 48 px per schede del browser, segnalibri e software meno recenti che richiedono automaticamente /favicon.ico; file PNG da 16 e 32 px richiamati con tag link; un apple-touch-icon da 180 × 180 usato quando qualcuno aggiunge il sito alla schermata Home di un iPhone o iPad; e icone da 192 e 512 px richiamate da site.webmanifest per le schermate Home Android e le web app installabili.
Il file favicon.ico contiene le icone come immagini PNG all’interno di un contenitore ICO, leggibile da tutti i browser attuali e da Windows Vista o versioni successive. I file ICO e ZIP vengono assemblati dal codice di questa pagina; non viene inviato nulla a un server.
Per le dimensioni ridotte serve un design semplice: a 16 × 16 pixel, le linee sottili e il testo piccolo scompaiono, quindi una lettera in grassetto o un logo semplificato funzionano meglio di un logo completo con testo. L’immagine viene ridotta in più passaggi di alta qualità. All’apple-touch-icon viene sempre assegnato un colore di sfondo uniforme, perché iOS riempie di nero le aree trasparenti; inoltre, iOS arrotonda gli angoli autonomamente.
Dopo aver caricato nuove icone, i browser potrebbero continuare a mostrare per un po’ la vecchia favicon, perché la memorizzano nella cache in modo aggressivo. Di solito è sufficiente forzare l’aggiornamento o aprire direttamente /favicon.ico.
Esempi
Icona con lettere per un nuovo progetto
Digitare «TG» in lettere bianche su un quadrato verde scuro con angoli arrotondati crea un’icona pulita, leggibile anche a 16 × 16 px in una scheda del browser, senza bisogno di un logo progettato.
Icona da un logo esistente
Un logo PNG da 1024 × 1024 con sfondo trasparente, impostato su Adatta l’intera immagine, genera icone per le schede trasparenti e un apple-touch-icon sul colore del tuo brand.
Logo largo
Con un logotipo da 1200 × 300, Ritaglia al centro conserva solo le lettere centrali. Adattare l’intera immagine mantiene tutto, ma la rende minuscola; di solito è meglio usare un logo quadrato separato.
Domande frequenti
Ho ancora bisogno di favicon.ico?
È ancora utile. Alcuni browser, lettori di feed e strumenti richiedono /favicon.ico dalla cartella principale del sito anche senza un tag link. I browser moderni usano anche le icone PNG richiamate nell’HTML.
Dove devo mettere i file?
Caricali nella cartella principale del sito, accanto alla home page, così /favicon.ico e gli altri percorsi nell’HTML funzioneranno. Se usi una sottocartella, modifica i percorsi nei tag link e in site.webmanifest.
Perché vedo ancora la vecchia favicon?
I browser memorizzano le favicon in una cache separata e per molto tempo. Prova a forzare l’aggiornamento, ad aprire /favicon.ico in una nuova scheda o a controllare in una finestra privata. Anche rinominare i file, per esempio favicon-v2.ico, forza un nuovo caricamento.
Crea una favicon SVG?
No. Crea file PNG e ICO, compatibili ovunque. Se hai già un logo SVG, puoi aggiungerlo tu con un tag link di tipo image/svg+xml, oltre a questi file.
Privacy
Le icone, il file ICO e il file ZIP vengono creati nel browser. L’immagine e il testo non vengono caricati, memorizzati né inclusi nelle statistiche.