Costruisci l'icona dell'app di Windows

  • Articolo

Diagramma che mostra diverse posizioni delle icone in Windows 11.

Una volta progettata l'icona della tua applicazione, devi creare i file dell'icona stessa. Poiché Windows supporta diversi temi, risoluzioni di visualizzazione e fattori di scala, dovresti fornire più versioni della tua icona per assicurarti che appaia bene su ogni dispositivo, a qualsiasi dimensione.

Dimensioni delle icone (WPF, UWP, WinUI)

Windows visualizzerà l'icona della tua applicazione in diverse dimensioni a seconda del punto in cui l'icona viene visualizzata e delle impostazioni di scala del display dell'utente. La seguente tabella elenca tutte le possibili dimensioni che Windows può utilizzare per visualizzare la tua icona.

Dimensioni delle icone (Win32)

I file ICO di Windows esistono da molto tempo. Ci sono delle misure standard che vengono utilizzate, che sono un sottoinsieme del set completo di cui sopra.

Scala delle icone

Quando Windows visualizza l'icona della tua applicazione, cerca innanzitutto una corrispondenza esatta delle dimensioni. Se non c'è una corrispondenza esatta, cercherà la taglia superiore e la ridurrà. Includere più dimensioni di icone nella tua applicazione significa che Windows avrà più spesso una corrispondenza perfetta al pixel e ridurrà la quantità di scalature applicate alle icone in scala.

Fattore di scala di Windows 11 100% 125% 150% 200% 250% 300% 400%
Menu contestuale, barra del titolo, barra delle applicazioni 16px 20px 24px 32px 40px 48px 64px
Barra delle applicazioni, risultati della ricerca, elenco di avvio di tutte le applicazioni 24px 30px 36px 48px 60px 72px 96px
Spine di partenza 32px 40px 48px 64px 80px 96px 256px

Nota

Le applicazioni dovrebbero avere, come minimo, un'interfaccia di tipo "atipico": 16x16, 24x24, 32x32, 48x48 e 256x256. Questo copre le dimensioni più comuni delle icone e, fornendo un'icona di 256px, garantisce che Windows possa scalare la tua icona solo verso il basso e mai verso l'alto.

Sfondi trasparenti

Le icone hanno un aspetto migliore con uno sfondo trasparente. Se il branding della tua applicazione richiede che l'icona sia posizionata su uno sfondo, va bene lo stesso. Tuttavia, dovrai reimplementare alcune funzionalità di tematizzazione che le icone trasparenti ottengono gratuitamente. Ad esempio, potresti fornire una versione dell'icona della tua applicazione placcata su due sfondi diversi, uno più adatto a un tema chiaro e l'altro a un tema scuro.

Elenco completo di icone e varianti

Windows utilizza diverse risorse di icone in diversi contesti dell'interfaccia utente. L'utilizzo è leggermente cambiato tra Windows 10 & Windows 11.

Gli elenchi seguenti definiscono i nomi dei file specifici che Windows si aspetta che contengano l'icona corrispondente.

Icona app

In Windows 10 e 11, l'icona AppList è l'icona principale dell'applicazione. Verrà utilizzato in diversi punti, tra cui la barra delle applicazioni, i pin di avvio, l'elenco di tutte le app e l'elenco dei risultati della ricerca. Windows 11 seleziona un'icona appropriata per l'elenco di tutte le app in base al fattore di scala corrente, ma Windows 10 utilizza icone specifiche ed esplicitamente definite se fornite dall'utente.

Sono necessari file separati per tutte e tre le varianti del tema (predefinito, tema chiaro, tema scuro), anche se l'icona è la stessa. Se non fornisci questi file, la tua icona apparirà su una piastra di icone di sistema per garantire un rapporto di contrasto minimo.

Elenco applicazioni Dimensione target (obbligatorio)

  • AppList.targetsize-16.png
  • AppList.targetsize-20.png
  • AppList.targetsize-24.png
  • AppList.targetsize-30.png
  • AppList.targetsize-32.png
  • AppList.targetsize-36.png
  • AppList.targetsize-40.png
  • AppList.targetsize-48.png
  • AppList.targetsize-60.png
  • AppList.targetsize-64.png
  • AppList.targetsize-72.png
  • AppList.targetsize-80.png
  • AppList.targetsize-96.png
  • AppList.targetsize-256.png

Tema scuro (Obbligatorio)

  • AppList.targetsize-16_altform-unplated.png
  • AppList.targetsize-20_altform-unplated.png
  • AppList.targetsize-24_altform-unplated.png
  • AppList.targetsize-30_altform-unplated.png
  • AppList.targetsize-32_altform-unplated.png
  • AppList.targetsize-36_altform-unplated.png
  • AppList.targetsize-40_altform-unplated.png
  • AppList.targetsize-48_altform-unplated.png
  • AppList.targetsize-60_altform-unplated.png
  • AppList.targetsize-64_altform-unplated.png
  • AppList.targetsize-72_altform-unplated.png
  • AppList.targetsize-80_altform-unplated.png
  • AppList.targetsize-96_altform-unplated.png
  • AppList.targetsize-256_altform-unplated.png

Tema luminoso (Obbligatorio)

  • AppList.targetsize-16_altform-lightunplated.png
  • AppList.targetsize-20_altform-lightunplated.png
  • AppList.targetsize-24_altform-lightunplated.png
  • AppList.targetsize-30_altform-lightunplated.png
  • AppList.targetsize-32_altform-lightunplated.png
  • AppList.targetsize-36_altform-lightunplated.png
  • AppList.targetsize-40_altform-lightunplated.png
  • AppList.targetsize-48_altform-lightunplated.png
  • AppList.targetsize-60_altform-lightunplated.png
  • AppList.targetsize-64_altform-lightunplated.png
  • AppList.targetsize-72_altform-lightunplated.png
  • AppList.targetsize-80_altform-lightunplated.png
  • AppList.targetsize-96_altform-lightunplated.png
  • AppList.targetsize-256_altform-lightunplated.png

Scala dell'elenco delle app (Windows 10) (Opzionale)

  • AppList.scale-100.png
  • AppList.scale-125.png
  • AppList.scale-150.png
  • AppList.scale-200.png
  • AppList.scale-400.png

Tema luminoso (Windows 10) (Opzionale)

  • AppList.scale-100_altform-colorful_theme-light.png
  • AppList.scale-125_altform-colorful_theme-light.png
  • AppList.scale-150_altform-colorful_theme-light.png
  • AppList.scale-200_altform-colorful_theme-light.png
  • AppList.scale-400_altform-colorful_theme-light.png

Nota

Se non includi gli asset targetsize-*-altform-unplated di cui sopra, l'icona verrà ridimensionata e si formerà un indesiderato backplate dietro l'icona sulla Barra delle applicazioni e su Start.

Sezioni

Windows 10 supporta quattro dimensioni di riquadro: piccolo, medio, ampio e grande.

Tema predefinito/scuro (parzialmente richiesto)

  • SmallTile.scale-100.png
  • SmallTile.scale-125.png
  • SmallTile.scale-150.png
  • SmallTile.scale-200.png
  • SmallTile.scale-400.png
  • MedTile.scale-100.png
  • MedTile.scale-125.png
  • MedTile.scale-150.png
  • MedTile.scale-200.png
  • MedTile.scale-400.png
  • WideTile.scale-100.png
  • WideTile.scale-125.png
  • WideTile.scale-150.png
  • WideTile.scale-200.png
  • WideTile.scale-400.png
  • LargeTile.scale-100.png
  • LargeTile.scale-125.png
  • LargeTile.scale-150.png
  • LargeTile.scale-200.png
  • LargeTile.scale-400.png

Tema luminoso (opzionale)

  • SmallTile.scale-100_altform-colorful_theme-light.png
  • SmallTile.scale-125_altform-colorful_theme-light.png
  • SmallTile.scale-150_altform-colorful_theme-light.png
  • SmallTile.scale-200_altform-colorful_theme-light.png
  • SmallTile.scale-400_altform-colorful_theme-light.png
  • MedTile.scale-100_altform-colorful_theme-light.png
  • MedTile.scale-125_altform-colorful_theme-light.png
  • MedTile.scale-150_altform-colorful_theme-light.png
  • MedTile.scale-200_altform-colorful_theme-light.png
  • MedTile.scale-400_altform-colorful_theme-light.png
  • WideTile.scale-100_altform-colorful_theme-light.png
  • WideTile.scale-125_altform-colorful_theme-light.png
  • WideTile.scale-150_altform-colorful_theme-light.png
  • WideTile.scale-200_altform-colorful_theme-light.png
  • WideTile.scale-400_altform-colorful_theme-light.png
  • LargeTile.scale-100_altform-colorful_theme-light.png
  • LargeTile.scale-125_altform-colorful_theme-light.png
  • LargeTile.scale-150_altform-colorful_theme-light.png
  • LargeTile.scale-200_altform-colorful_theme-light.png
  • LargeTile.scale-400_altform-colorful_theme-light.png

Nota

Windows 11 non utilizza le risorse dei riquadri, ma attualmente per pubblicare sul Microsoft Store sono necessarie almeno le risorse dei riquadri Medium al 100%. Se la tua app è compatibile con Windows 10 & 11, ti consigliamo di includere il maggior numero possibile di risorse di riquadri.

Schermata iniziale

Anche le schermate di emergenza possono essere a tema chiaro e scuro, come le risorse delle icone delle app.

Predefinita

  • SplashScreen.scale-100.png
  • SplashScreen.scale-125.png
  • SplashScreen.scale-150.png
  • SplashScreen.scale-200.png
  • SplashScreen.scale-400.png

Tema scuro (opzionale)

  • SplashScreen.scale-100_altform-colorful_theme-dark.png
  • SplashScreen.scale-125_altform-colorful_theme-dark.png
  • SplashScreen.scale-150_altform-colorful_theme-dark.png
  • SplashScreen.scale-200_altform-colorful_theme-dark.png
  • SplashScreen.scale-400_altform-colorful_theme-dark.png

Tema luminoso (opzionale)

  • SplashScreen.scale-100_altform-colorful_theme-light.png
  • SplashScreen.scale-125_altform-colorful_theme-light.png
  • SplashScreen.scale-150_altform-colorful_theme-light.png
  • SplashScreen.scale-200_altform-colorful_theme-light.png
  • SplashScreen.scale-400_altform-colorful_theme-light.png

Le icone badge sono utilizzate nella schermata di blocco di Windows 10 e per la maggior parte delle app non sono necessarie.

Windows 10 (opzionale)

  • BadgeLogo.scale-100.png
  • BadgeLogo.scale-125.png
  • BadgeLogo.scale-150.png
  • BadgeLogo.scale-200.png
  • BadgeLogo.scale-400.png

Queste risorse sono necessarie per la pubblicazione sul Microsoft Store.

Tema predefinito/scuro (obbligatorio)

  • StoreLogo.scale-100.png
  • StoreLogo.scale-125.png
  • StoreLogo.scale-150.png
  • StoreLogo.scale-200.png
  • StoreLogo.scale-400.png

Tema luminoso (opzionale)

  • StoreLogo.scale-100_altform-colorful_theme-light.png
  • StoreLogo.scale-125_altform-colorful_theme-light.png
  • StoreLogo.scale-150_altform-colorful_theme-light.png
  • StoreLogo.scale-200_altform-colorful_theme-light.png
  • StoreLogo.scale-400_altform-colorful_theme-light.png