Dimensioni Favicon: Quali Ti Servono Veramente nel 2025

Cerca "dimensioni favicon" e trovi una marea di numeri contrastanti: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. La maggior parte di queste liste è stata scritta un decennio fa e mai aggiornata. In pratica, un sito moderno ha bisogno di circa quattro file, e puoi crearli tutti in una sola passata con il generatore favicon — funziona interamente nel tuo browser, quindi il tuo logo non lascia mai il tuo computer.

Ecco a cosa serve effettivamente ogni dimensione, e cosa puoi tranquillamente saltare.

Le dimensioni che contano ancora

16x16 e 32x32 — schede browser e segnalibri

Questo è il favicon classico. 16x16 è quello che vedi in una striscia di schede affollata; 32x32 viene utilizzato su schermi ad alta DPI, sulla barra dei segnalibri e in alcune interfacce della barra degli indirizzi. Tradizionalmente, entrambi sono raggruppati in un unico file favicon.ico, che può contenere più risoluzioni contemporaneamente. Windows estrae anche 48x48 dallo stesso .ico per i collegamento sul desktop, quindi includerlo non costa quasi nulla.

180x180 — icona di tocco Apple

Quando qualcuno tocca "Aggiungi alla schermata iniziale" su un iPhone o iPad, Safari cerca apple-touch-icon.png a 180x180. Se non c'è, iOS cattura uno screenshot della tua pagina e lo utilizza invece, il che sembra terribile. Questo singolo PNG copre ogni dispositivo iOS attuale perché il sistema ridimensiona secondo necessità.

192x192 e 512x512 — Android e PWA

Android Chrome e le app web installabili leggono le icone dal tuo site.webmanifest. 192 è l'icona della schermata iniziale; 512 viene utilizzato per la splash screen e gli elenchi di app. Se vuoi mai che il tuo sito sia installabile, hai bisogno di entrambi.

SVG — opzionale ma utile

Firefox e Chrome supportano entrambi un favicon SVG, che rimane nitido a qualsiasi dimensione e può rispondere alla modalità scura con una media query all'interno del file. È un bonus, non una sostituzione — Safari e i browser più vecchi vogliono comunque le versioni raster.

Cosa puoi saltare

64x64, 96x96, 128x128, l'intera serie di immagini di tile di Windows, e i dozzina di file legacy apple-touch-icon-76x76. Erano necessari per dispositivi ormai quasi scomparsi. Spedire venti file di icone gonfia il tuo repository e non guadagna nulla di misurabile.

L'HTML

Posita i file nella root del tuo sito e aggiungi questo a <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

E nel manifest:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Progettazione per 16 pixel

La parte difficile non è l'esportazione, ma che un logo completo diventa indistinto a 16x16. Alcune cose che aiutano:

• Usa un frammento, non il logo intero. Una lettera, un glifo, una forma. I wordmark sono illeggibili a dimensione di scheda.
• Inizia quadrato. Se la tua fonte è un logo ampio, ritaglialo in un quadrato prima in modo che il generatore non lo stia inscatolando con spazio vuoto.
• Mantieni il contrasto alto. I contorni sottili scompaiono. Le forme solide sopravvivono.
• Decidi lo sfondo. Un PNG trasparente si adatta al chrome del browser chiaro e scuro; se il tuo marchio è scuro, considera di dargli invece una piastrella di colore solido. Puoi rimuovere lo sfondo da uno screenshot del logo in pochi secondi se hai solo un JPG piatto.
• Fai attenzione all'area sicura. Android maschera le icone in cerchi e squircle, quindi lascia approssimativamente il 10% di padding intorno al bordo della tua opera di 512.

Se stai abbinando lo sfondo del favicon al colore del brand del tuo sito, il selettore di colori per immagini estrarrà l'hex esatto da uno screenshot esistente — utile anche per il tag meta theme-color.

Genera l'intero set in una sola volta

Non caricare nulla: rilascia un PNG o SVG quadrato nel generatore favicon gratuito basato su browser e produce .ico, l'icona di tocco Apple e i PNG 192/512 localmente, nella tua stessa scheda. Nulla viene inviato a un server, non c'è iscrizione, e nessuna copia del tuo logo non ancora rilasciato finisce seduta nel bucket di archiviazione di qualcun altro.

Poi rimpicciolisci il browser, guarda la scheda, e fai l'unica domanda che importa: riesci a dire di cosa si tratta?