giovedì 21 febbraio 2013

Creare favicons multi-risoluzione con GIMP

Favicon è un termine inglese, contrazione di favorites icon. In informatica indica un'icona associata a una particolare pagina web. Solitamente la favicon è una piccola immagine di dimensione 16 x 16 pixel, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell'URL nella barra degli indirizzi di un browser, nel momento in cui si naviga su un sito che ne è provvisto. L'icona è inoltre visualizzata nel menu dei preferiti di un browser. (Wikipedia)

Oggigiorno le favicons si stanno evolvendo passando da semplici immagini 16 x 16 pixels ad immagini multi-risoluzione utilizzabili per molti altri scopi. A questo proposito oggi vi parlo di come creare moderne favicons multi-risoluzione. Prima di iniziare, in ogni modo, ci sono alcune cose che mi sento in dovere di specificare:
  • Le favicons multi-risoluzione potrebbero non funzionare correttamente nei vecchi browsers. Se sai (o credi) che una significativa minoranza dei tuoi utenti utilizzano vecchi browsers, probabilmente vorrai continuare ad utilizzare favicons tradizionali.
  • Per quanto ne so l'unico software multi-piattaforma capace di creare favicons multi-risoluzione è GIMP.
Ciò detto, passiamo ai fatti.

Passo 1: crea la tua immagine in alta risoluzione

Immagine in alta risoluzione
Immagine in alta risoluzione
Crea la tua immagine in alta risoluzione utilizzando lo strumento software che preferisci. Personalmente suggerirei un'immagine di almeno 256 x 256 pixel. Tieni in mente che questa immagine è destinata ad essere ridimensionata a 16 x 16 pixel, quindi è generalmente una buona idea mantenere un design semplice, pulito, e chiaro. Quella mostrata in figura, ad esempio, è la versione in alta risoluzione della favicon dell'ultimo sito a cui WeBox Studio sta lavorando.

Passo 2: scala l'immagine in diverse risoluzioni

Riduci la risoluzione della tua immagine per ottenere una serie di immagini di dimensioni differenti. Io suggerirei le seguenti risoluzioni:

Dimensione
Nome file
Scopo
114 x 114apple-touch-icon-precomposed.pngUtilizzata da iPhone, iPod Touch, iPad, e device Android
110 x 110facebook.pngUtilizzata per facebook shares e likes
64 x 64favicon64.pngAttualmente utilizzata da IE; in un futuro prossimo sarà utilizzata dai browsers su display ad alta risoluzione
48 x 48favicon48.pngAttualmente utilizzata da IE; in un futuro prossimo sarà utilizzata dai browsers su display ad alta risoluzione
32 x 32favicon32.pngAttualmente utilizzata da IE; in un futuro prossimo sarà utilizzata dai browsers su display ad alta risoluzione
24 x 24favicon24.pngAttualmente utilizzata da IE; in un futuro prossimo sarà utilizzata dai browsers su display ad alta risoluzione
16 x 16favicon16.pngAttualmente utilizzata come misura standard

Ovviamente consiglio di partire dall'immagine in alta risoluzione e scalarla man a mano a seconda delle misure indicate in tabella. Ogni versione deve essere esportata in un file a parte. Le versioni apple-touch-icon-precomposed.png e facebook.png non verranno utilizzate nei seguenti step; esse sono infatti riservate ai dispositivi mobili ed ai social networks.
Cerca di ottimizzare le png il più possibile. Le png possono contenere, come opzione, una trasparenza alpha.

Passo 3: importa le immagini create come livelli

A questo punto apri l'immagine favicon64.png in GIMP. Una volta aperta l'immagine, clicca su File / Open as Layers... . A questo punto seleziona le altre favicons, dalla più grande alla più piccola, proprio come in figura. Aiutati col tasto Shift della tua tastiera per la selezione multipla.

Apri immagini come livelli
Apri immagini come livelli

Passo 4: esporta l'immagine come favicon

Una volta aperta l'immagine favicon64.png ed importate le altre immagini come livelli, non ci resta che esportare l'immagine come favicon. A questo scopo clicca su File / Export... , seleziona come formato Microsoft Windows icon (*.ico) ed esporta l'immagine col nome favicon.ico.

Esporta immagine come favicon.ico
Esporta immagine come favicon.ico

Step 5: inserisci la favicon nella tua pagina Web

Una volta creata la tua favicon non ti resta che includerla nella tua pagina Web. A tal proposito ti basta uploadare la favicon nella directory principale del tuo server Web ed inserire il seguente codice nell'head delle tue pagine HTML:



<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">


Conclusione

Et voilà, ora il tuo sito Internet può godere di una moderna favicon multi-risoluzione. Alla prossima!

Nessun commento :

Posta un commento