Ceci n'est pas un blog

Blog personale di Ivan Agliardi con pagine di informatica, linguaggi, idee…

GIMP: favicon multirisoluzione con trasparenza

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:

  1. creare l’immagine in formato .png ad una dimensione di 128x128px e salvarla
  2. creare una copia della prima immagine, ridurla a 64x64px e salvarla separatamente
  3. creare una copia della prima immagine, ridurla a 32x32px e salvarla separatamente
  4. creare una copia della prima immagine, ridurla a 16x16px e salvarla separatamente
  5. aprire nuovamente la prima immagine a 128x128px
  6. importare come livello l’immagine a 64x64px
  7. importare come livello l’immagine a 32x32px
  8. importare come livello l’immagine a 16x16px
  9. 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" />

A proposito di Ivan Agliardi

Ho immaginazione e creatività, ma non sono un artista. Faccio interagire tra loro aziende dando vita a nuove imprese, ma non sono un imprenditore. Mi occupo da oltre 15 anni di server Linux, applicazioni web, database, domini, hosting, housing, sicurezza informatica e sistemi embedded, ma non sono un tecnico. Faccio SEO, SEM, SMM e fornisco contenuti attraverso i miei copyrighter, ma non sono un uomo marketing. Ora ho di nuovo un blog, ma non sono un blogger. Sono solo un umanista e un informatico della prima ora. E mi circondo di gente con le palle :)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ivan Agliardi

Ivan Agliardi