Ecco una breve guida che spiega come usare la funzione integrata di Ionic framework per creare in automatico tutte le icone per le piattaforme del progetto e le relative splashscreen
Prima di tutto, aggiorniamo il nostro framework Ionic con
sudo npm install -g ionic
Inseriamo 2 immagini chiamate ad esempio icon.png e splash.png nella directory ./resources. I forumati supportati sono file immagine .png, file Photoshop .psd o file Illustrator .ai.
Si occuperà lo Ionic CLI di gestire il resizing, il cropping e la creazione delle risorse per le varie piattaforme del progetto.
Affinchè i file vengano generati nel modo giusto, dobbiamo assicurarci che l’icona sia minimo 192×192, mentre la splash screen almeno 2208×2208px, con il disegno o il logo centrato all’interno del quadrato.
Tramite questo template PSD, potrete avere un’idea dell’area utilizzabile.
Per usare icone differenti per Android ed iOS, è necessario posizionare il file icon.png in path separate:
iOS: posizionare icon.png in resources/ios/
Android: posizionare icon.png in resources/android/
In questo modo potremo avere le icone con background trasparente per Android e quelle con bordo arrotondato per iOS.
Dopo aver posizionato i file nelle directory, possiamo avviare la generazione di icone e splashscreens con il comando
ionic resources
E’ possibile generare anche separatamente
ionic resources --icon
ionic resources --splash