Come creare una favicon per il tuo sito web (ICO, PNG, icone Apple e Android)

Risposta breve: parti da una semplice immagine quadrata, passala nel Generatore di favicon di Imgovo, scarica lo ZIP, metti i file nella cartella principale del tuo sito e incolla l’HTML fornito nell’<head> delle tue pagine. I site builder come WordPress, Shopify e Wix di solito hanno un’impostazione «Icona del sito» in cui puoi caricare invece il PNG da 512 px.

A cosa serve una favicon

La favicon è la piccola icona nella scheda del browser. Compare anche nei segnalibri e nella cronologia, e i telefoni usano icone simili quando qualcuno aggiunge il tuo sito alla schermata Home. Un sito senza favicon mostra un segnaposto generico, che dà un’impressione di lavoro incompiuto.

Poiché l’icona viene mostrata molto piccola, il design conta più della risoluzione.

Progetta per dimensioni minuscole

• Mantienila semplice. Una forma decisa o una o due lettere funzionano. Un logo dettagliato diventa una macchia a 16 × 16 pixel.
• Usa un contrasto forte. Le schede possono essere chiare o scure.
• Preferisci una sorgente quadrata. Se il tuo logo è largo, mettilo su una tela quadrata.
• Usa uno sfondo trasparente se vuoi che l’icona si fonda con la scheda. Per le foto, il generatore ritaglia al centro in un quadrato.
• Lascia un po’ di spazio. Le impostazioni di margine interno e angoli arrotondati possono far respirare la forma.

Se il tuo logo ha uno sfondo che non vuoi, Rimuovi sfondo può prima renderlo trasparente. Vedi Come rimuovere lo sfondo da una foto. Per dare a un logo quadrato gli angoli arrotondati o un cerchio, Immagine rotonda salva un PNG trasparente.

Passo dopo passo

1. Apri il Generatore di favicon.
2. Aggiungi la tua immagine. Sono accettati PNG, SVG, JPG, WebP e altri.
3. Scegli come adattarla: ritaglia al centro in un quadrato oppure adatta l’immagine intera.
4. Scegli lo sfondo (trasparente o un colore), il margine interno e gli angoli arrotondati. I valori predefiniti di margine interno e angoli arrotondati sono 0%. Puoi anche inserire un nome app facoltativo.
5. Controlla le anteprime.
6. Scarica lo ZIP.

Annulla e Ripeti funzionano con Ctrl+Z e Ctrl+Maiusc+Z.

Cosa c’è nello ZIP

File	Dimensione	Usato per
favicon.ico	16, 32 e 48 px in un unico file	Schede del browser, browser meno recenti
favicon-16x16.png	16 px	Schede del browser
favicon-32x32.png	32 px	Schede del browser, schermi ad alta densità
apple-touch-icon.png	180 px	Schermate Home di iPhone e iPad
android-chrome-192x192.png	192 px	Android e app web installabili
android-chrome-512x512.png	512 px	Android e app web installabili, caricamenti di icone del sito
site.webmanifest	–	Descrive le icone per le app web installabili

L’icona Apple riceve uno sfondo pieno perché iPhone e iPad mostrano le aree trasparenti come nere.

Aggiungi i file al tuo sito

1. Estrai i file nella cartella principale del tuo sito, accanto al tuo index.html.
2. Copia l’HTML dal riquadro «Copia HTML» del generatore.
3. Incollalo nell’<head> di ogni pagina, oppure nel layout o nel template condiviso del tuo sito.

Un tipico insieme di tag ha questo aspetto. Usa lo snippet esatto fornito dal generatore, perché corrisponde ai nomi dei tuoi file:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

In un website builder, trova l’impostazione «Icona del sito» o «Favicon» e carica il PNG da 512 px. Il builder crea poi da solo le altre dimensioni.

Se la nuova icona non compare

I browser mettono le favicon in cache in modo aggressivo. Dopo aver caricato i nuovi file:

• Ricarica la pagina con un aggiornamento forzato.
• Apri il sito in una finestra privata o in un altro browser.
• Controlla che /favicon.ico si apra direttamente nella barra degli indirizzi.
• Aspetta. I motori di ricerca possono impiegare un po’ per mostrare una nuova icona.

Creare solo un ICO

Se ti serve solo favicon.ico, usa il pulsante «Scarica solo favicon.ico». Per altre dimensioni, Ridimensiona immagine può creare un semplice PNG alle dimensioni esatte che ti servono. Le questioni sui formati sono trattate in JPG, PNG, WebP e AVIF a confronto.

Privacy

Il tuo logo non lascia mai il tuo computer. Le icone vengono create nel tuo browser e anche lo ZIP viene creato lì.

Fallo ora

Apri il Generatore di favicon, aggiungi il tuo logo e scarica l’intero set di icone.