Una favicon non è una sola immagine. È la piccola icona in una scheda del browser, quella più grande che un telefono usa quando un sito viene aggiunto alla schermata Home e quella ancora più grande che un manifesto PWA e i selettori di app si aspettano. Ogni contesto vuole una dimensione diversa, e sbagliarne una si nota: un'icona da 16 pixel stirata per riempire un riquadro della schermata Home appare rotta in un modo che i visitatori percepiscono.
Questo generatore produce l'intero set da una sola immagine. La tua sorgente viene ritagliata al centro in un quadrato, ridimensionata a ogni misura necessaria con il ricampionatore pica anziché con il filtro predefinito del browser — cosa che conta enormemente a 16 pixel, dove un ridimensionamento grossolano trasforma un logo in una macchia — e impacchettata in uno ZIP insieme a un vero file .ico multirisoluzione.
Le icone vengono generate nel browser. Loghi non pubblicati e materiali di marca non vengono caricati su alcun servizio di icone.
<head> delle tue pagine.| File | Dimensione | Usato da |
|---|---|---|
| favicon.ico | 16, 32 e 48 combinati | Schede del browser, segnalibri, compatibilità storica |
| favicon-16x16.png | 16 × 16 | Icona di scheda su schermi a densità standard |
| favicon-32x32.png | 32 × 32 | Icona di scheda su schermi ad alta densità |
| favicon-48x48.png | 48 × 48 | Collegamenti ai siti su Windows |
| apple-touch-icon.png | 180 × 180 | Schermata Home di iOS |
| icon-512.png | 512 × 512 | Schermata Home di Android, manifesto PWA, selettori di app |
Il file .ico è un vero contenitore multirisoluzione che ospita le versioni da 16, 32 e 48 pixel, non un PNG rinominato. Windows e i browser più datati scelgono la dimensione adatta al contesto in cui stanno disegnando.
Estrai lo ZIP nella radice del sito e aggiungi questo all'<head> di ogni pagina:
| Scopo | Tag |
|---|---|
| Favicon classica | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Densità standard | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Alta densità | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| Schermata Home di iOS | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
L'icona da 512 pixel viene referenziata dal manifesto della tua app web e non da un tag link.
Una favicon viene spesso mostrata a 16 pixel di lato, all'incirca la dimensione di un singolo carattere di testo corrente. Un logotipo completo è illeggibile a quella scala; un'illustrazione dettagliata diventa rumore.
Ciò che funziona è una singola lettera, un monogramma semplice o una forma decisa con forte contrasto sia su sfondi di scheda chiari sia scuri. Verifica riducendo il logo a 16 pixel e guardandolo a un braccio di distanza: se non riesci a capire cosa sia, non ci riuscirà nessuno.
Almeno 512 × 512 e possibilmente quadrata. La sorgente viene ritagliata al centro in un quadrato, quindi un logo largo perderà le estremità. Riempilo prima fino a un quadrato con lo strumento Rendi quadrata se questo è un problema.
Sì. È un autentico contenitore ICO multirisoluzione con immagini da 16, 32 e 48 pixel, non un PNG con l'estensione cambiata. Windows e i browser più datati lo leggono correttamente.
Nella directory radice del tuo sito, così da essere raggiungibili a percorsi come /favicon.ico. Poi aggiungi alle pagine i tag link mostrati sopra.
I browser memorizzano le favicon nella cache in modo molto insistente. Fai un ricaricamento forzato, oppure apri direttamente l'URL del file dell'icona per confermare che venga servito, e ricarica la pagina.
Sì per i file PNG, che mantengono il canale alfa. Tieni presente che un'icona trasparente deve funzionare sia su sfondi di scheda chiari sia scuri.
No. Ritaglio, ridimensionamento e composizione dell'ICO avvengono tutti nel browser.