Guida
Dimensione favicon: quali misure e formati servono
Una favicon si vede a molte dimensioni, dai 16 pixel di una scheda del browser ai 512 pixel di un'icona per app. Questa guida elenca le misure che contano e come aggiungerle.
Dimensioni favicon per un sito web: l'elenco rapido
| Dimensione | File | Dove si usa |
|---|---|---|
| 16 × 16 px | favicon.ico | Schede del browser e preferiti |
| 32 × 32 px | favicon.ico | Schede su schermi ad alta densità, collegamenti di Windows |
| 48 × 48 px | favicon.ico | Windows e risultati della Ricerca Google |
| 180 × 180 px | apple-touch-icon.png | Schermata Home di iPhone e iPad |
| 192 × 192 px | icon-192.png | Android e web app installate |
| 512 × 512 px | icon-512.png | Schermate di avvio e store per le web app |
Un favicon.ico con 16, 32 e 48 px, più i tre file PNG, copre browser, telefoni e motori di ricerca. Il nostro generatore di favicon li crea tutti da una sola immagine.
Favicon size in pixel per la Ricerca Google
Google mostra le favicon accanto ai risultati di ricerca. Le sue linee guida richiedono una favicon quadrata di almeno 8 × 8 pixel e ne consigliano una più grande di 48 × 48 pixel, così appare bene su superfici diverse (Google Search Central). Un favicon.ico con un'immagine da 48 px, o un PNG collegato da 192 px, rispetta questa raccomandazione.
Formati delle favicon: ICO, PNG e SVG
- ICO contiene più dimensioni in un solo file ed è ciò che i browser richiedono a
/favicon.icoquando non è dichiarata nessuna icona. Tienine uno per compatibilità. - PNG si usa per l'Apple touch icon e per le icone delle app elencate nel web manifest.
- SVG funziona come favicon nei browser moderni e resta nitido a ogni dimensione. Aggiungilo come icona in più, non come unica icona.
Per trasformare un PNG esistente in un .ico con le dimensioni che scegli, usa il convertitore PNG in ICO.
Favicon in HTML: come aggiungere le icone al sito
Carica i file nella radice del sito e aggiungi questi tag dentro il <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Il manifest elenca le icone da 192 e 512 px. Togli la riga dell'SVG se non hai una versione SVG.
Favicon per WordPress, Shopify e Squarespace: che dimensione usare
I sistemi per creare siti chiedono una sola immagine e generano da soli le dimensioni. WordPress la chiama Icona del sito e chiede un'immagine quadrata di almeno 512 × 512 pixel. Anche Shopify e Squarespace accettano un'immagine quadrata nelle impostazioni del brand o del design. Carica un PNG quadrato grande e lascia che la piattaforma lo ridimensioni; poi controlla il risultato in una scheda del browser.