Segnalo questo tutorial molto ben fatto su come si possano facilmente creare favicon con GIMP. La spiegazione è estremamente dettagliata, quindi ne riporto qui una breve sintesi.
Premesso che le favicon sono sempre più importanti per individuare rapidamente una risorsa web all’interno di un browser, un gestore dei bookmark o anche solo un’applicazione per dispositivi mobile, va detto che realizzare una favicon idonea per tutti questi differentissimi strumenti di lavoro richiede qualche accortezza. Prima fra tutte la multirisoluzione: la favicon deve essere visualizzata correttamente in tutti i più diffusi formati – 16x16px, 32x32px, 64x64px e 128x128px.
Limitarsi al formato minimo per accontentare tutti non è una scelta oculata: avremo infatti molte applicazioni che mostreranno come favicon un incomprensibile riquadro composto da pixeloni stiracchiati. Adottare solo i formati maggiori invece produrrà la totale assenza di favicon nei supporti più datati o che semplicemente non sono in grado di riprodurre l’icona dei preferiti a quelle dimensioni.
Con GIMP – il celeberrimo programma libero e open source di fotoritocco – è possibile creare favicon partendo da immagini preformattate alle varie dimensioni, ottenendo non solo una efficace multirisoluzione ma anche gli effetti di trasparenza caratteristici del formato .png, ecco i semplici step da seguire:
- creare l’immagine in formato .png ad una dimensione di 128x128px e salvarla
- creare una copia della prima immagine, ridurla a 64x64px e salvarla separatamente
- creare una copia della prima immagine, ridurla a 32x32px e salvarla separatamente
- creare una copia della prima immagine, ridurla a 16x16px e salvarla separatamente
- aprire nuovamente la prima immagine a 128x128px
- importare come livello l’immagine a 64x64px
- importare come livello l’immagine a 32x32px
- importare come livello l’immagine a 16x16px
- salvare l’immagine ottenuta come Microsoft Windows Icon (.ico) attribuendo correttamente i diversi livelli a formati corrispondenti
Fatto! Ora non vi resta che includere nelle vostre pagine la favicon multirisoluzione e richiamarla con l’apposito tag HTML:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />