Generatore di favicon

Crea una favicon da qualsiasi immagine

Una favicon è la piccola icona mostrata nelle schede del browser, nei segnalibri e nelle schermate Home dei telefoni. Questo generatore prende un'immagine quadrata e produce icone PNG nitide in tutte le dimensioni che servono ai siti moderni, dall'icona 16×16 della scheda fino all'icona 512×512 per le progressive web app, interamente nel tuo browser.

Carica un logo e vedrai un'anteprima in tempo reale di ogni dimensione, pronta da scaricare singolarmente. Generiamo anche i tag <link> esatti da incollare nell'<head> della tua pagina, quindi collegare la favicon richiede pochi secondi.

Consigli per icone nitide

Parti da un'immagine quadrata di almeno 512×512 pixel. Forme semplici e decise con forte contrasto restano riconoscibili anche ridotte a 16 pixel, mentre i dettagli fini e il testo piccolo diventano una poltiglia. Controlla l'anteprima 16×16: se riesci ancora a capire di cosa si tratta, hai una favicon eccellente.

Quale dimensione viene usata dove

• 16×16 e 32×32 — schede del browser, segnalibri e barre degli indirizzi.
• 48×48 e 64×64 — collegamenti sul desktop e alcune icone nei risultati di ricerca e negli elenchi di siti.
• 128×128 — schede di store e directory in stile estensioni, più grandi.
• 180×180 — l'Apple touch icon usata quando una pagina viene aggiunta alla schermata Home di un iPhone o iPad.
• 192×192 e 512×512 — icone per la schermata Home di Android e per le progressive web app elencate in un web app manifest.

Da sapere

Ogni immagine viene scalata direttamente in un quadrato, quindi usa una sorgente quadrata: un logo rettangolare verrebbe deformato. La trasparenza viene mantenuta nei file PNG, ma iOS non mostra bene le touch icon trasparenti, quindi uno sfondo pieno è una scelta più sicura per la versione 180×180. I file hanno nomi come favicon-32x32.png, in linea con lo snippet generato, quindi mantieni questi nomi quando li copi nella root del tuo sito. Questa pagina produce solo file PNG; se ti serve anche un classico favicon.ico, creane uno dalla tua immagine sorgente con il convertitore da PNG a ICO.

Aggiungere le icone al tuo sito

Scarica le dimensioni che ti servono, mettile nella root pubblica del tuo sito e incolla i tag <link> generati nell'<head>. Se crei un web app manifest, fai puntare il suo elenco di icone ai file 192×192 e 512×512. Dopo la pubblicazione, motori di ricerca e browser possono impiegare un po' ad aggiornare una favicon in cache, quindi testa in una finestra privata e non allarmarti se la vecchia icona resta visibile per un giorno o due.