Share via

Implementare la FavIcon HigRes per il Pinning con X-Icon Editor

  • Article

In uno dei miei precedenti post ho descritto le nuove API JS che con IE9 permettono di sfruttare l'integrazione con il desktop di Windows 7 e sfruttare il Pinning sulla TaskBar e le nuove JumpList . Uno degli elementi fondamentali per la User Experience nella nuova funzionalità di Pinning è rappresentato dalla possibilità di utilizzare delle FavIcon ad alta risoluzione per portare il logo del nostro sito direttamente sul desktop di Windows 7 e da li metterlo bene in mostra . Per fare questo abbiamo visto nel precedente post come personalizzare il Pinning  e che viene direttamente sfruttata la classica FavIcon in formato .ico e il normale TAG già previsto per questa funzionalità

<link rel="shortcut icon" href="favicon.ico"/>

I file .ico possono contenere Icon a diversa risoluzione e nell'operazione di Pinning se nella nostra FavIcon abbiamo inserito delle Icon a più alta risoluzione, vengono automaticamente usate per gestire il pinning e per l'icona che poi viene mostrata sulla TaskBar una volta completata l'operazione di aggancio del sito.

Per implementare con facilità la nostra FavIcon multirisoluzione, in modo che possa contenere sia la classica 16x16 usata dai browser sulla barra dell'indirizzo e sui Tab , sia le Icon a più alta risoluzione per il Pinning ( 32x32,   64x64) possiamo da oggi usare un nuovo tool online che si chiama X-Icon Editor .  Di seguito un immagine  di come si presenta il tool che tra le altre cose è completamente implementato sfruttando HTML5 per la parte di interfaccia utente:

 Potete dare in input al tool delle immagini partendo da diversi formati (jpg,png,bmp e ico) e caricarle con rapidità nell'applicazione che vi farà subito una preview delle Icon e vi consentirà di selezionare all'interno dell'immagine la porzione che volete inserire nella Icon multi-risoluzione:

 Fatta la selezione dell'elemento da inserire nella nostra Icon multirisoluzione, possiamo selezionare le risoluzioni che vogliamo inserire e procediamo con il tasto OK e il nostro editor ci porta nell'area dell'applicazione che ci consente di ritoccare eventualmente la Icon:

 

Possiamo anche in qualunque momento fare una preview con lo specifico pulsante previsto nell'interfaccia del tool,  di come la nostra Icon multirisoluzione verrà poi inserita sfruttando le differenti risoluzioni disponibili , nelle diverse componenti di utilizzo nel Pinning (taskbar, barra indirizzi, JumpList , Tab, etc):

 

Terminata l'operazione di ritocco possiamo con il pulsante Export far generare la nostra Icon per il download:

 

Terminato il download , possiamo implementarla sul nostro sito con il TAG della FavIcon

<link rel="shortcut icon" href="favicon.ico"/>

 e , personalizzare il resto delle funzionalità del Pinning per avere così un bellissima esperianza utente sul desktop di Windows 7 con Internet Explorer 9 !!!

Ribadisco il suggerimento fatto anche nell'altro articolo di applicare GZIP ed un buon livello di HTTP cache per garantire una migliore esperienza agli utenti che useranno il Pinning sul vostro siti o sulla vostra Web Application.