Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Diagramma che mostra diverse posizioni delle icone in Windows 11.
Dopo aver progettato l'icona dell'app, è necessario creare i file icona stessi. Poiché Windows supporta più temi, risoluzioni di visualizzazione e fattori di scala, è necessario fornire più versioni dell'icona per assicurarsi che abbia un aspetto ottimale in ogni dispositivo, a qualsiasi dimensione.
Dimensioni delle icone (macchine virtuali Windows, UWP, WinUI)
Windows visualizzerà l'icona dell'app a diverse dimensioni, a seconda della posizione in cui viene visualizzata l'icona e delle impostazioni di scala di visualizzazione dell'utente. Nella tabella seguente sono elencate tutte le dimensioni possibili che Windows possono usare per visualizzare l'icona.
Dimensioni icona (Win32)
I file ICO di Windows esistono da molto tempo. Esistono dimensioni standard usate, ovvero un subset del set completo precedente.
Ridimensionamento delle icone
Quando Windows visualizza l'icona dell'app, cerca prima una corrispondenza esatta delle dimensioni. Se non esiste una corrispondenza esatta, cercherà la dimensione superiore successiva e ridurrà la dimensione. Inclusione di più dimensioni delle icone con la tua app significa che Windows avrà più spesso una corrispondenza perfetta dei pixel e ridurrà la quantità di ridimensionamento applicata alle icone ridimensionate.
| fattore di scala Windows 11 | 100% | 125% | 150% | 200% | 250% | 300% | 400% |
|---|---|---|---|---|---|---|---|
| Menu di scelta rapida, barra del titolo, barra di sistema | 16 px | 20 px | 24 px | 32 px | 40 px | 48 px | 64 px |
| Barra delle applicazioni, risultati della ricerca, elenco di tutte le app nel menu Start | 24 px | 30 px | 36 px | 48 px | 60 px | 72 px | 96 px |
| Pin di avvio | 32 px | 40 px | 48 px | 64 px | 80 px | 96 px | 256 px |
Annotazioni
Le app devono avere almeno: 16x16, 24x24, 32x32, 48x48 e 256x256. Ciò copre le dimensioni più comuni delle icone e, fornendo un'icona di 256 px, garantisce che Windows lo riduca soltanto, mai lo aumenti.
Correlazione delle dimensioni delle icone con il manifesto MSIX
Se hai esaminato il manifesto MSIX (o AppX) dell'app, potresti aver notato voci come Square44x44Logo e Square150x150Logo. Queste sono dimensioni di base, non le uniche dimensioni necessarie per l'app. Windows usa fattori di scala di visualizzazione per determinare le dimensioni effettive richieste in fase di esecuzione. Il manifest fa riferimento a un nome di file di immagine di base (ad esempio, Square44x44Logo.png) e si specificano varianti pre-ridimensionate mediante qualificatori (ad esempio, Square44x44Logo.scale-200.png). Windows quindi seleziona la corrispondenza migliore per le impostazioni di visualizzazione dell'utente.
La tabella seguente mostra come ogni voce del file manifesto corrisponde alle dimensioni effettive in pixel per ogni fattore di scala:
| Voce del manifesto | Dimensioni di base | 100% | 125% | 150% | 200% | 250% | 300% | 400% |
|---|---|---|---|---|---|---|---|---|
| Square44x44Logo | 44 px | 44 px | 55 px | 66 px | 88 px | 110 px | 132 px | 176 px |
| Square150x150Logo | 150 px | 150 px | 188 px | 225 px | 300 px | 375 px | 450 px | 600 px |
| Wide310x150Logo | 310×150 px | 310×150 px | 388×188 px | 465×225 px | 620×300 px | 775×375 px | 930×450 px | 1240×600 px |
| Square310x310Logo | 310 px | 310 px | 388 px | 465 px | 620 px | 775 px | 930 px | 1240 px |
| Square71x71Logo | 71 px | 71 px | 89 px | 107 px | 142 px | 178 px | 213 px | 284 px |
| Logo del Negozio | 50 px | 50 px | 63 px | 75 px | 100 px | 125 px | 150 px | 200 px |
L'icona dell'elenco di app supporta anche varianti di dimensioni di destinazione (elencate nella sezione Icona dell'app di seguito), che Windows usa per le icone della barra delle applicazioni, i menu di scelta rapida e altri elementi dell'interfaccia utente in cui l'icona viene visualizzata senza spaziatura interna del riquadro. Gli asset nelle dimensioni di destinazione vengono specificati in dimensioni esatte in pixel (16, 24, 32, 48, 256 e altri valori), anziché come fattori di scala.
Tip
Non è necessario creare tutte le dimensioni possibili. Come minimo, fornire asset con scala al 100%, 200% e 400% per le voci Square44x44Logo e Square150x150Logo, oltre alle varianti per le dimensioni di destinazione elencate nella sezione Icona dell'app. Windows sceglie l'asset più vicino disponibile per i fattori di scala intermedia (125%, 150%, 250%e 300%).
Per lo schema del manifesto completo, vedere VisualElements.
Sfondi trasparenti
Le icone hanno un aspetto ottimale con uno sfondo trasparente. Se la personalizzazione dell'app richiede che l'icona sia appiata su uno sfondo, va bene anche questo. Tuttavia, dovrai implementare nuovamente alcune funzionalità di tema che le icone trasparenti ottengono gratuitamente. Ad esempio, potresti fornire una versione dell'icona dell'app presentata 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 usa asset di icone diversi in contesti di interfaccia utente diversi. L'utilizzo è cambiato un po 'tra Windows 10 e ; Windows 11.
Gli elenchi seguenti definiscono i nomi file specifici Windows si aspettano di contenere ogni icona corrispondente.
Icona dell'app
In Windows 10 e 11 l'icona AppList è l'icona principale dell'app. Verrà usato in diverse posizioni, tra cui la barra delle applicazioni, i pin Start, 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 usa icone specifiche definite in modo esplicito se vengono fornite.
Sono necessari file separati per tutte e tre le varianti del tema (impostazione predefinita, tema chiaro, tema scuro), anche se l'icona è la stessa. Se questi file non vengono forniti, l'icona verrà visualizzata su una lastra dell'icona di sistema per garantire un rapporto di contrasto minimo.
Dimensioni dell'elenco app di destinazione (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 chiaro (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
App List Scale (Windows 10) (facoltativo)
- AppList.scale-100.png
- AppList.scale-125.png
- AppList.scale-150.png
- AppList.scale-200.png
- AppList.scale-400.png
tema Light (Windows 10) (facoltativo)
- 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
Annotazioni
Se non si includono gli asset targetsize-*-altform-unplated, l'icona verrà ridimensionata a dimensioni inferiori e si otterrà una piastra posteriore indesiderata dietro l'icona sulla barra delle applicazioni e il menu Start.
Riquadri
Windows 10 supporta quattro dimensioni dei riquadri: small, medium, wide e large.
Tema predefinito/scuro (parzialmente obbligatorio)
- 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 chiaro (facoltativo)
- 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
Annotazioni
Windows 11 non usa gli asset di riquadri, ma attualmente sono necessari almeno gli asset di riquadri Medium a 100% per la pubblicazione in Microsoft Store. Se l'app è Windows 10 e 11 compatibile, è consigliabile includere il maggior numero possibile di asset di riquadri.
Schermata iniziale
Le schermate iniziali possono anche essere con tema chiaro e scuro, ad esempio gli asset dell'icona dell'app.
Predefinita
- SplashScreen.scale-100.png
- SplashScreen.scale-125.png
- SplashScreen.scale-150.png
- SplashScreen.scale-200.png
- SplashScreen.scale-400.png
Tema scuro (facoltativo)
- 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 chiaro (facoltativo)
- 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
Logo del badge
Le icone badge vengono usate nella schermata di blocco Windows 10 e per la maggior parte delle app non sono necessarie.
Windows 10 (facoltativo)
- BadgeLogo.scale-100.png
- BadgeLogo.scale-125.png
- BadgeLogo.scale-150.png
- BadgeLogo.scale-200.png
- BadgeLogo.scale-400.png
Logo del pacchetto (logo di Microsoft Store)
Questi asset sono necessari per la pubblicazione in 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 chiaro (facoltativo)
- 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
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
