CMake 07: Un’icona per Windows

Cosa devo fare per inserire un’icona per Windows? Una volta era semplicissimo, bastava una icona 32×32 e il lavoro era fatto.

Ma con Windows 10 non basta mettere una icona 32×32, servono risoluzioni diverse per coprire svariate situazioni, che purtroppo sono molto meno standardizzate che per il caso macOS.

Prima di iniziare vi ricordo che trovate il codice su GitHub, e la lista di tutti gli altri episodi alla pagina CMake is the future.

Quali dimensioni deve avere l’icona

Un file .ico non è altro che un pacchetto di immagini con diversi formati e dimensioni. Le diverse dimensioni vengono usate a seconda del contesto. Per esempio la barra di stato richiede una icona con dimensioni diverse che non la visualizzazione come file in una cartella.

Inoltre dobbiamo tenere conto che, a seconda del parametro “Ridimensionamento e Layout”, le dimensioni degli oggetti grafici, come per esempio la barra delle applicazioni cambiano, quindi cambia anche il numero di pixel destinati all’icona del programma.

L’ultima considerazione va fatta circa l’uso del desktop remoto. In questo caso la profondità di colore dello schermo viene abbassata per ridurre la banda necessaria. Pertanto le icone possono essere rappresentate a 8 o 16 bit per pixel al posto di 24 bit.

Pertanto, dopo aver passato ore ad analizzare i vari riferimenti in rete, sono giunto alla seguente sintesi:

  1. Se l’icona è semplice e non avete tempo da perdere, allora createne una 256×256 e siete sicuri che almeno ad alta risoluzione la vostra applicazione apparirà di buona qualità. Certo non ci sono garanzie di risultato quando l’icona viene scalata a 16×16 dal sistema operativo.
  • Se invece volte fare un lavoro decente, allora dovete mettere almeno questi formati:
    • 16×16 pixel 24 bit: usata nella barra del titolo e nell’elenco di file
    • 32×32 pixel 24 bit: usata nelle icone sul desktop
    • 48×48 pixel 24 bit
    • 128×128 pixel 24 bit: usata nella finestra di dialogo dove confermo la cancellazione di un file.
    • 256×256 pixel 24 bit: usata quando visualizzo l’anteprima della cartella attivando: “icone molto grandi”.
  1. Se invece volete essere sicuri che l’icona della vostra applicazione sarà sempre perfetta, allora considerate tutti i seguenti formati: 16, 20, 24, 28, 30, 31, 32, 40, 42, 47, 48, 56, 60, 63, 84, 128, 256.
  2. Se poi volete controllare come appare la vostra applicazione durante una connessione in desktop remoto, abbiate cura di aggiungere, almeno per 16×16 e 32×32 anche la versione con palette a 4 bit (16 colori) e a 8 bit (256 colori).

Creare l’icona con Visual Studio

Il modo più semplice per creare una icona in Windows 10, senza installare applicativi aggiuntivi, è ricorrere all’editor di icone di Visual Studio.

Usando Visual Studio 2019, basta aprire il programma, selezionare “Continua senza codice” e poi selezionare dal menù File – Nuovo – Nuovo File – File Icona.

Il file si apre con due formati pre-impostati ovvero 16×16 4 bit (ovvero 16 x 16 pixel, 16 colori) e 32×32 4 bit ovvero 32 x 32 pixel e 16 colori.

Facendo click con tasto destro sulla barra delle icone, selezioniamo “Nuovo tipo di immagine” per aggiungere:

  • 16×16, 24 bit
  • 32×32, 24 bit
  • 48×48, 24 bit
  • 64×64, 24 bit
  • 128×128, 24 bit
  • 256×256, 24 bit
Preparazione dei vari formati con varie risoluzioni

Creazione dell’icona

Per prima cosa cerchiamo una immagine da usare che sia almeno 256 x 256 pixel.

Io ho cercato “satellite” sul sito www.flaticons.com, ho scaricato l’immagine seguente e l’ho chiamata satellite.png. Le sue dimensioni sono 512×512 pixel, 32 bit:

È la stessa icona che ho usato per il caso macOS, solo che in questo caso il formato è PNG.

Ho aperto l’immagine con l’applicativo Paint e manualmente ho creato le varie dimensioni, partendo da 256 e progressivamente campionando con il comando “Ridimensiona”:

Una volta creata l’immagine basta: selezionarla in Paint (Ctrl+A, Seleziona Tutto), copiarla (Ctrl+C) e poi incollarla nell’immagine corrispondente in Visual Studio (Ctrl+V).

Un poco laborioso, va ripetuto per ogni icona, ma ci si riesce velocemente.

Per quanto riguarda le due immagini a 4 bit, vale lo stesso procedimento e la conversione dei colori da 24 bit a 4 viene fatta in automatico.

Una volta completate tutte le immagini, salviamo il nostro file come Satellite.ico nella cartella icons del progetto.

Inserire l’icona nel programma

Ormai il lavoro è praticamente finito. L’icona si inserisce semplicemente definendo in CMakeLists.txt la variabile APPLICATION_ICON, da valorizzare con il percorso dell’icona che vogliamo usare:

set(WIN_APPLICATION_ICON "icons/satellite.ico")

e poi aggiungendo al template del file delle risorse: WinResources.rc.in

La seguente riga

IDI_ICON1       ICON    DISCARDABLE   "@WIN_APPLICATION_ICON@"

Ecco il risultato finale, sia in esplora risorse che nella barra del titolo della finestra di dialogo:

Ed è visibile (ma non bellissima…) anche nella barra delle applicazioni:

Attenzione: L’immagine precedente è stata ingrandita per mettere in luce come la scarsa qualità sia dovuta alla trasparenza, che sul nero della barra delle applicazioni non rende bene. Il problema l’ho risolto, applicando uno sfondo bianco, all’icona 32×32 24 bit, e solo a quella. Ecco il nuovo risultato.

Trovate l’icona modificata nel file satellite.ico su GitHub.

Controllare le icone

Se provo a cancellare l’eseguibile vedo l’icona a 128×128

Per finire, impostando la visualizzazione: “Icone Molto Grandi”, in esplora risorse, vedo l’icona a 256×256

Conclusioni

Anche l’icona per Windows 10 è a posto, mi spiace per il caso Linux, ma non ho capito bene se esiste un modo univoco per gestire le icone, pertanto non lo affronterò.

La prossima volta vedremo come passare le informazioni da CMake al codice, creando una finestra About.

Newsletter QtQb

Se vuoi ricevere i miei post e le mie notizie via mail, iscriviti!

Autore: Gianbattista

Appassionato di tecnologia, sono l'autore di Qt5 Quanto Basta. Per lavoro mi occupo di elaborazione delle immagini per applicazioni industriali, ma nel tempo libero adoro creare applicazioni con Qt (www.qt.io)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *