Colore del tema e icone dell’app

Il tag <meta name="theme-color" content="#1f2937"> imposta il colore della barra degli indirizzi del browser sui dispositivi mobili e quello della barra del titolo sulle PWA desktop. Conferisce alla pagina un aspetto curato e simile a quello di un'app senza modificarne il contenuto.

Fornisca colori distinti per le modalità chiara e scura: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> e un secondo tag con il colore scuro. I browser scelgono quello corrispondente in base alla preferenza del sistema operativo dell'utente.

La proprietà theme_color del manifest imposta il colore quando l'app viene eseguita come PWA installata (barra del titolo della finestra standalone). Lo abbini al meta theme-color della pagina per garantire coerenza: tra esecuzione nel browser e app installata, l'identità visiva rimane la stessa.

<link rel="icon" href="/favicon.ico"> è l'icona intramontabile della scheda del browser. Nonostante il nome, i browser moderni preferiscono PNG o SVG a ICO. Fornisca un PNG 32x32 tramite <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> per ottenere un rendering più nitido.

I browser moderni accettano favicon SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Nitida a qualsiasi dimensione e con file di dimensioni ridotte. La usi per i loghi vettoriali e la abbini a un fallback PNG per i browser che non supportano le favicon SVG.

La schermata Home di iOS utilizza apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Fornisca un PNG 180x180. iOS non legge le icone del web manifest per l'installazione nella schermata Home; il link apple-touch-icon è obbligatorio.

Le installazioni Android leggono le icone dall'array icons del manifest. Includa PNG da 192x192 (schermata Home) e 512x512 (schermata di avvio e cassetto delle app). Aggiunga una copia con purpose "maskable", così Android può applicare una maschera all'icona per adattarla alla forma dell'icona della schermata Home (cerchio, squircle o quadrato).

Le icone maskable dovrebbero contenere gli elementi principali nell'area sicura centrale dell'80%; il 20% esterno potrebbe essere ritagliato in base alla forma della maschera del dispositivo. Durante la progettazione, usi strumenti come maskable.app per visualizzare un'anteprima dell'icona con diverse forme di maschera.

Per un riquadro fissato di Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> e <meta name="msapplication-TileColor" content="#1f2937">. Oggi hanno una priorità inferiore rispetto alle altre piattaforme, ma sono comunque apprezzate dagli utenti Windows che fissano i siti.

Per i vecchi IE/Edge: <meta name="msapplication-config" content="/browserconfig.xml"> rimanda a un file XML contenente icone dei riquadri in più dimensioni. Oggi è in gran parte irrilevante; i nuovi siti possono omettere browserconfig.xml senza conseguenze.

Scheda fissata di Safari per macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. L'SVG dovrebbe essere un'icona monocromatica; il colore viene sovrascritto dall'attributo color. Viene usata esclusivamente dalla funzione delle schede fissate di Safari per macOS.

Usi realfavicongenerator.net per generare ogni variante delle icone a partire da un'unica sorgente. Esegua i test su un dispositivo iOS reale (Aggiungi alla schermata Home) e su Android (installi l'app dal menu del browser) per verificare che le icone vengano ritagliate correttamente e non risultino pixelate.

Qual è lo scopo del valore purpose "maskable" nel manifest di un'app web?

theme-color (con varianti media-query) colora la barra degli indirizzi; theme_color del manifest colora la barra del titolo dell'app installata. Le icone includono favicon (SVG + PNG), apple-touch-icon (iOS, 180x180), icone del manifest (Android, 192 + 512 + maskable), mask-icon di Safari (SVG monocromatico) e msapplication-TileImage (riquadri Windows fissati). Usi realfavicongenerator.net per generare tutte le varianti a partire da un'unica sorgente.