La favicon (che sta per favorite icon) è un’icona associata ad un sito. Alcuni browser e feed reader la visualizzano direttamente nella barra dell’indirizzo. Altri, come Microsoft Internet Exploder™, la visualizzano nell’elenco dei bookmark (preferiti) quando mettete il sito visitato a questa lista.

Mozilla e altri browser cercano automaticamente un file denominato favicon.ico nella root del sito, anche se nessuno gli ha chiesto di farlo: nel file di log delle visite del vostro web server potete incappare in una serie di richieste fallite (errori 404) per GET al file /favicon.ico. Si tratta appunto delle richieste di Mozilla e altri.
Per associare un’icona con un nome e posizione diversi da quella predefinita (/favicon.ico), bisogna intervenire nel codice HTML della pagina inserendo un tag <link>.
Il formato del favicon è quello di un’icona Windows. Per quanto tale formato possa assomigliare a quello di una semplice immagine bitmap, un’icona non lo è: propriamente un’icona è una repository di immagini bitmap a varie risoluzioni.
In questo mini-tutorial creeremo un’icona contenente una sola bitmap utilizzando esclusivamente strumenti Open Source.
I pacchetti di cui abbiamo bisogno sono Gimp, ImageMagick e netpbm. C’è davvero bisogno di tutti questi pacchetti dato che nessuno, da solo, è in grado di fornire il supporto completo. Il programma che consente di creare l’icona vera e propria, ppmtowinicon (di netpbm) necessita, in ingresso, di un formato che Gimp non è in grado di fornire direttamente. E ImageMagick non supporta il formato .ico in scrittura.

Naturalmente anche Gimp non sarebbe strettamente necessario, ma dato che si tratta dello strumento di manipolazione delle immagini più potente e completo in ambito Open Source, mi sembra che possa essere un ottimo punto di partenza per creare la propria immagine.

Per ottenere l’icona c’è quindi bisogno di tre passaggi:

1. Creare l’immagine con Gimp
2. Convertirla in ppm con convert
   di ImageMagick
3. Convertirla a icona con ppmtowinicon
   di netpbm

Mandiamo in esecuzione Gimp e cominciamo con il creare una nuova immagine quadrata.
In questo esempio viene creata un’immagine di 256 x 256 pixel, ma ciò non ha molta importanza, dipende da
cosa vogliamo metterci dentro. Bisogna considerare che l’immagine finale sarà comunque un’icona, quindi, una volta ridimensionata, ci troveremo a che fare con un quadratino di 16 x 16 pixel.

Con il Gimp creiamo quindi la nostra favicon.

In questo esempio ho inserito semplicemente una lettera su uno sfondo uniforme, ma se sapete usare bene il Gimp potete fare di meglio.

Adesso non resta che ridurre l’immagine a 16 pixel x 16 pixel, utilizzando l’apposito strumento del gimp per ridimensionare le immagini (da Image > Scale Image).

Dato che stiamo riducendo di parecchio l’immagine, è, consigliabile utilizzare il tipo di interpolazione cubica. Possiamo poi anche applicare un filtro di Sharpen (aka “Affila”) per ridurre l’effetto di sfuocatura che il ridimensionamento comporta. Una volta che l’immagine è ridotta a 16 x 16 pixel possiamo riaggiustarla pixel per pixel fino a che l’effetto finale non ci convince.
Non ci resta che salvare l’immagine in formato png.
Ad esempio con il nome myicon.png.

A questo punto apriamo un terminale e usiamo convert:

Abbiamo adesso la nostra ppm che possiamo dare in pasto a ppmtowinicon:

In questo caso dobbiamo usare la redirezione sul file finale perché ppmtowinicon fornisce il proprio risultato direttamente sullo standard output.

Adesso la favicon è pronta. Dobbiamo solo metterla sul nostro sito e fare in modo che i browser sappiano dove trovarla.
Per prima cosa trasferiamo il file myicon.ico sul sito, quindi modifichiamo la pagina che ci interessa associare a quell’icona (ad esempio l’home page).
In questa pagina dobbiamo inserire, nella sezione HEAD del file html, il seguente tag:

Naturalmente come valore dell’attributo href deve essere inserito il percorso in cui si trova la nostra favicon, esattamente come se si trattasse dell’attributo src di un tag IMG: l’esempio mostrato è quindi valido solo se la pagina che stiamo modificando si trova nella stessa cartella del file myicon.ico

A questo punto il gioco è fatto. Puntando il browser all’indirizzo della pagina, se stiamo usando Mozilla, Konqueror o Opera dovremmo accorgerci del corretto caricamento dell’icona.

Questo articolo è stato inserito Lunedì 25 Ottobre 2004 @ 09:09 ed è archiviato in OB » Debian e Linux. Puoi seguire i commenti a questo articolo attraverso il feed RSS 2.0. Commenti e trackback non sono consentiti.