Dimensioni delle favicon e il codice per aggiungerle
Dimensioni e codice delle favicon
Dimensioni delle favicon e codice HTML (2026): l'elenco essenziale | We.Inc
I file favicon di cui un sito ha davvero bisogno nel 2026: favicon.ico, un SVG, una Apple touch icon da 180px e icone da 192 e 512 per il manifest, con tag head da copiare e un generatore di manifest.
Cinque file coprono quasi tutti i browser e dispositivi: una favicon.ico da 32 per 32, un'icona SVG per i browser moderni, una apple-touch-icon PNG da 180 per 180 per le schermate home di iPhone, e PNG da 192 per 192 più 512 per 512 elencati in un web app manifest. La Ricerca Google vuole un'icona quadrata, idealmente più grande di 48 pixel.
Il set di favicon che vale la pena pubblicare
File
Dimensione
Usato da
Qualsiasi (vettoriale)
Schede dei browser moderni, nitida a ogni dimensione
Schermata home di iPhone e iPad
Web app manifest, schermata home di Android
Web app manifest, schermate di installazione e di avvio
Le vecchie guide sulle favicon elencano venti o più dimensioni per dispositivi che nessuno usa. Oggi il browser ridimensiona a partire da pochi buoni file sorgente, quindi il lavoro consiste nello scegliere i cinque giusti, scrivere correttamente i tag head e assicurarsi che Google possa scansionarli. Usa il generatore qui sotto per creare i tag e il manifest del tuo sito.
Disegna un unico originale quadrato da 512 per 512 con il marchio centrato e un po' di margine.
Esporta i cinque file della tabella, oppure creali con il nostro generatore di favicon.
Compila il generatore con il nome e il colore del sito, poi copia i tag head e il manifest.
Carica i file nella radice del sito, incolla i tag nell'head di ogni pagina e fai un aggiornamento forzato per verificare.
Prova da sola la versione da 16 pixel; testi sottili e linee fini spariscono alla dimensione di una scheda, quindi semplifica il marchio.
Dai all'SVG una media query per la modalità scura, così un logo scuro resta visibile sulle schede scure del browser.
Tieni la parte importante di un'icona maskable dentro il cerchio centrale, con raggio pari al 40% della larghezza, perché Android potrebbe ritagliare il resto.
Non bloccare i file delle icone o la tua home page in robots.txt; Google deve scansionarli entrambi per mostrare la tua favicon nei risultati.
I browser mettono le favicon in cache in modo aggressivo, quindi rinomina il file o aggiungi un parametro di versione quando lo sostituisci.
Domande frequenti
Qual è la dimensione migliore per una favicon?
Non esiste un'unica dimensione migliore. Pubblica un ICO da 32 per 32 per la compatibilità e un SVG per schede moderne nitide, poi aggiungi l'icona Apple da 180 pixel e le icone del manifest da 192 e 512 per le schermate home. La Ricerca Google chiede un'immagine quadrata, di almeno 8 pixel e preferibilmente più grande di 48 per 48.
Come aggiungo una favicon a un sito web?
Metti i file nella radice del sito e aggiungi i tag link nell'head di ogni pagina: rel icon per l'ICO e l'SVG, rel apple-touch-icon per il PNG da 180 pixel e rel manifest che punta a un file JSON con le icone da 192 e 512. Il generatore in questa pagina scrive queste righe per te.
Perché la mia favicon non compare su Google?
Google deve poter scansionare sia la home page sia il file dell'icona, l'icona deve essere quadrata e il link deve trovarsi nell'head della home page. Gli aggiornamenti possono richiedere un po' di tempo, perché Google riscansiona le favicon secondo i propri tempi.
Mi serve ancora favicon.ico?
Vale la pena tenerlo. Alcuni strumenti, lettori di feed e browser più vecchi chiedono /favicon.ico direttamente senza leggere il tuo HTML, e un piccolo ICO nella radice risponde a loro.
Cos'è un'icona maskable?
Un'icona del manifest con purpose maskable, disegnata con margine extra così Android può ritagliarla a cerchio, squircle o altra forma. Tieni il logo dentro la zona sicura centrale e riempi lo sfondo da bordo a bordo.
Perché l'elenco si è accorciato
Oggi i browser scelgono l'icona più vicina e la ridimensionano, e il formato SVG permette a un solo file di servire ogni dimensione di scheda. Le tante vecchie dimensioni per le tile di Windows e per Apple erano pensate per piattaforme che nel frattempo sono andate oltre.
La documentazione di Safari di Apple descrive ancora touch icon per ogni dispositivo, ma iOS ripiega su un'icona più grande quando non trova una corrispondenza esatta, quindi un solo PNG da 180 pixel copre bene gli iPhone e gli iPad attuali.
Le icone del manifest
Secondo web.dev, i browser Chromium hanno bisogno almeno di un'icona da 192 pixel e una da 512 pixel nel manifest prima che un sito possa essere installato. Con queste due, Chrome si adatta automaticamente alle altre densità.
Ogni icona del manifest può avere un purpose any, maskable o monochrome. Usa un file separato per maskable, perché il margine adatto a una forma ritagliata appare troppo piccolo quando l'icona è mostrata quadrata.
Portare la favicon nei risultati di ricerca
La Ricerca Google mostra una favicon accanto ai risultati quando ne trova una nella tua home page. I valori rel supportati sono icon, shortcut icon, apple-touch-icon e apple-touch-icon-precomposed.
Google accetta anche diversi formati, tra cui ICO, PNG, GIF e JPEG. Il file dell'icona può perfino stare su un altro dominio, purché Googlebot possa recuperarlo.