Nella lavorazione di un sito web o di un'applicazione mobile, non bisogna dimenticare la creazione delle icone desktop, ovvero quelle icone che permettono l'accesso diretto al suddetto sito o al software sui diversi supporti, come smartphone e tablet. Inoltre spesso i siti web ricorrono a una favicon da inserire nella barra di navigazione:non è altro che il logo del sito, ridotta a una dimensione di 16x16 pixel e inserita di fianco dell'URL, come illustrato in Figura 1. Inkscape, in qualità di software vettoriale, offre numerose opzioni per la creazione di questi elementi, in particolare per l'esportazione PNG.
Le dimensioni delle icone desktop sono normalmente diverse: questo perché ci sono ormai davvero tanti device in circolazione, di conseguenza produrre un'icona per ognuno di essi sarebbe un lavoro ciclopico.
È inoltre importante sottolineare che il layout dell'icona andrebbe creato pensando a ciascuna delle dimensioni utili, partendo dalla più grande e più dettagliata, solitamente la versione Retina, fino alla più piccola, ovvero la favicon. Questo perché, se il design è molto dettagliato, nelle tipologie più ridotte potrebbe risultare indistinguibile. È quindi best practice eliminare eventuali testi e dettagli troppo elaborati man mano che si diminuisce la dimensione dell'icona.
Vediamo ora come creare le icone desktop partendo da un logo. Per prima cosa bisognerà disegnare il logo e, naturalmente, realizzarlo in vettoriale è la scelta migliore per ovviare a futuri problemi di scalabilità.
Creiamo un nuovo documento. Come possiamo vedere in Figura 2, abbiamo importato gli elementi vettoriali con cui costruire il design del logo.
Apriamo il pannello Riempimento e Contorno, applichiamo quindi un contorno nero e un riempimento azzurro all'oggetto cerchio, come illustrato in Figura 3.
Apriamo il pannello Livelli. Possiamo renderci conto che ogni elemento è posizionato su un livello a sé stante, come evidente in Figura 4.
Spostiamo tutti gli elementi all'interno del cerchio e allineiamoli al centro. Per fare ciò selezioniamo la voce Allinea e Distribuisci del menu Oggetto, che aprirà il pannello omonimo. Selezioniamo tutti gli oggetti sul foglio e clicchiamo sull'icona di allineamento centrato, mostrata in Figura 5.
Aggiungiamo ora un oggetto di testo utilizzando lo strumento adeguato, quindi apriamo il pannello Mostra e Modifica Font e scegliamo un carattere e una dimensione, come dimostrato in Figura 6.
Aggiustiamo la posizione degli elementi e prepariamoci all'esportazione delle icone in formato PNG. Per esportare il logo in questo formato, dobbiamo selezionare la voce Esporta Bitmap del menu File, seguendo i passaggi di Figura 7.
Nella finestra di dialogo che si apre a questo punto, dovremo inserire le dimensioni dell'icona che desideriamo esportare, ad esempio 144x144 pixel. Dopodiché impostiamo il nome del file e il percorso di salvataggio, quindi selezioniamo il tasto Esporta, evidenziato in Figura 8.
Come possiamo notare, la finestra di dialogo di esportazione non si chiude automaticamente, bensì resta visibile, pronta per l'esportazione seguente, di un'icona con dimensioni differenti.
Se diamo uno sguardo al file appena esportato, potremo renderci conto del fatto che la PNG rispetta le dimensioni esportate, per un metodo molto comodo: al posto di disegnare diverse icone di altrettante dimensioni, Inkscape usa sempre lo stesso disegno di partenza e lo salva automaticamente alla larghezza e altezza desiderata, come evidente in Figura 9.
Vediamo ora come creare una favicon. Esportiamo la nostra PNG con una dimensione di 16x16 pixel, come illustrato in Figura 10.
A questo punto abbiamo la favicon in versione PNG, per caricarla sul nostro sito però l'icona deve essere in formato .ico. Per trasformarla basterà avvalersi di una delle tante piattaforme online che mettono a disposizione questa opzione e salvarla. Per questo esempio siamo ricorsi a Favicon.cc: il risultato è visibile in Figura 11.
