[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:it:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-it-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Dimensioni Favicon: Quali Ti Servono Veramente nel 2025","Una guida in italiano alle dimensioni favicon: 16x16, 32x32, 180x180, 192 e 512, quali vengono utilizzate dai browser moderni, e l'HTML da inserire.","2026-10-12","favicon size","favicon-generator","\u003Cp>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 \u003Ca href=\"\u002Fit\u002Ffavicon-generator\">generatore favicon\u003C\u002Fa> — funziona interamente nel tuo browser, quindi il tuo logo non lascia mai il tuo computer.\u003C\u002Fp>\n\u003Cp>Ecco a cosa serve effettivamente ogni dimensione, e cosa puoi tranquillamente saltare.\u003C\u002Fp>\n\u003Ch2>Le dimensioni che contano ancora\u003C\u002Fh2>\n\u003Ch3>16x16 e 32x32 — schede browser e segnalibri\u003C\u002Fh3>\n\u003Cp>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 \u003Ccode>favicon.ico\u003C\u002Fcode>, che può contenere più risoluzioni contemporaneamente. Windows estrae anche 48x48 dallo stesso \u003Ccode>.ico\u003C\u002Fcode> per i collegamento sul desktop, quindi includerlo non costa quasi nulla.\u003C\u002Fp>\n\u003Ch3>180x180 — icona di tocco Apple\u003C\u002Fh3>\n\u003Cp>Quando qualcuno tocca "Aggiungi alla schermata iniziale" su un iPhone o iPad, Safari cerca \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> 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à.\u003C\u002Fp>\n\u003Ch3>192x192 e 512x512 — Android e PWA\u003C\u002Fh3>\n\u003Cp>Android Chrome e le app web installabili leggono le icone dal tuo \u003Ccode>site.webmanifest\u003C\u002Fcode>. 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.\u003C\u002Fp>\n\u003Ch3>SVG — opzionale ma utile\u003C\u002Fh3>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>Cosa puoi saltare\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, l'intera serie di immagini di tile di Windows, e i dozzina di file legacy \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>. Erano necessari per dispositivi ormai quasi scomparsi. Spedire venti file di icone gonfia il tuo repository e non guadagna nulla di misurabile.\u003C\u002Fp>\n\u003Ch2>L'HTML\u003C\u002Fh2>\n\u003Cp>Posita i file nella root del tuo sito e aggiungi questo a \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>E nel manifest:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Progettazione per 16 pixel\u003C\u002Fh2>\n\u003Cp>La parte difficile non è l'esportazione, ma che un logo completo diventa indistinto a 16x16. Alcune cose che aiutano:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Usa un frammento, non il logo intero.\u003C\u002Fstrong> Una lettera, un glifo, una forma. I wordmark sono illeggibili a dimensione di scheda.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Inizia quadrato.\u003C\u002Fstrong> Se la tua fonte è un logo ampio, \u003Ca href=\"\u002Fit\u002Fcrop-image\">ritaglialo in un quadrato\u003C\u002Fa> prima in modo che il generatore non lo stia inscatolando con spazio vuoto.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mantieni il contrasto alto.\u003C\u002Fstrong> I contorni sottili scompaiono. Le forme solide sopravvivono.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Decidi lo sfondo.\u003C\u002Fstrong> 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 \u003Ca href=\"\u002Fit\u002Fremove-background\">rimuovere lo sfondo\u003C\u002Fa> da uno screenshot del logo in pochi secondi se hai solo un JPG piatto.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Fai attenzione all'area sicura.\u003C\u002Fstrong> Android maschera le icone in cerchi e squircle, quindi lascia approssimativamente il 10% di padding intorno al bordo della tua opera di 512.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Se stai abbinando lo sfondo del favicon al colore del brand del tuo sito, il \u003Ca href=\"\u002Fit\u002Fcolor-picker\">selettore di colori per immagini\u003C\u002Fa> estrarrà l'hex esatto da uno screenshot esistente — utile anche per il tag meta \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Genera l'intero set in una sola volta\u003C\u002Fh2>\n\u003Cp>Non caricare nulla: rilascia un PNG o SVG quadrato nel \u003Ca href=\"\u002Fit\u002Ffavicon-generator\">generatore favicon gratuito basato su browser\u003C\u002Fa> e produce \u003Ccode>.ico\u003C\u002Fcode>, l'icona di tocco Apple e i PNG 192\u002F512 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.\u003C\u002Fp>\n\u003Cp>Poi rimpicciolisci il browser, guarda la scheda, e fai l'unica domanda che importa: riesci a dire di cosa si tratta?\u003C\u002Fp>\n",1791831529829]