Blog ad Improbabilità Infinita

Cos'è la favicon?

Partiamo dal termine: è una contrazione di "favourite icon", cioè icona preferita. Viene normalmente associata ad un intero sito web ma, al limite, può essere associata ad ogni singola pagina. Tutti i browser moderni sono capaci di gestirla correttamente, ma Internet Explorer fa schifo a prescindere :D, quindi passate tutti quanti a Firefox 2.0, è stato rilasciato da poco!

A che serve?

• a contraddistinguere il proprio sito, poiché tale icona appare nella barra degli indirizzi, nell'eventuale tab e, cosa più importante, tra i bookmark; in questo modo sarà più facile per l'utente memorizzare l'icona e ritrovarla tra i suoi numerosi bookmark;
• per il webmaster del sito, serve ad evitare di avere nei log di errore del sito il classico "File does not exist: /.../favicon.ico"

Tanto per cambiare è Internet Explorer a creare problemi tecnici: mentre gli altri browser di diffusione rilevante sanno utilizzare correttamente file .png, .gif e .ico (non ho provato, ma suppongo anche qualunque altro formato che il browser è capace di aprire in una qualsiasi pagina web), Internet Explorer conosce solo i .ico. Per compatibilità, è buona norma creare quindi un file .ico, e qui sorgono i problemi quando ad uno come me viene in mente di creare un'icona che sia in grado di supportare più formati, in particolare le dimensioni 16x16px, 32x32px, 48x48px e 128x128px.

Trovandomi sotto Mac OS X potevo scordarmi di utilizzare software di Windows (lo so che c'è Parallels Desktop, ma non vedo perché cercare di tornare a Windows emulandolo :D).

Dopo svariate ricerche, può sembrare curioso, ma ho scartato qualsiasi programma creato apposta per disegnare delle icone o perché non riuscivo a creare niente di carino o perché non offriva la possibilità di creare un'icona con più risoluzioni.

La mia scelta è ricaduta su due software:

• Inkscape, un programma di grafica vettoriale Open Source ben fatto e facile da utilizzare che si sta evolvendo sempre di più da una release all'altra;
• Gimp, un software Open Source per la manipolazione di immagini (GNU Image Manipulation Program), già largamente conosciuto e diffuso in ambito GNU/Linux.

Inkscape l'ho utilizzato "solamente" per creare le immagini con cui costruire il file .ico.

Alcuni consigli per non perdere tempo nell'utilizzare Inkscape:

• innanzitutto può essere comodo avere un canvas della dimensione giusta per una favicon, ma, visto che si parla di grafica vettoriale dove eventuali ingrandimenti/rimpicciolimenti dell'immagine non causano alcun problema all'immagine, è sufficiente avere un canvas quadrato, quindi si può scegliere "File->New->icon_16x16" e poi zoomare a piacimento per poter disegnare al meglio l'immagine;
• ovvio a dirsi, ma è meglio stare attenti a disegnare l'immagine all'interno del canvas senza farla trabordare;
• una volta completata l'immagine è necessario salvarla in un qualche formato leggibile da Gimp (consiglio PNG); per far ciò è necessario accedere alla finestra di dialogo tramite "File->Export Bitmap":
  • come "Export Area" bisogna scegliere "Page" (cioè l'intero canvas);
  • come "Bitmap size" bisogna scegliere per ogni singolo salvataggio la width e l'height desiderate, ad esempio 16x16, 32x32, 48x48 e 128x128, naturalmente avendo impostato come "Units" "px";
  • per salvare l'immagine in formato PNG è sufficiente impostare come"File name" un nome di file con estensione .png.

A questo punto si avranno a disposizione tutte le immagini .png (in questo esempio, quattro) che andranno a formare il file .ico. Ed è qui che bisogna abbandonare Inkscape e far entrare in gioco Gimp.
Mentre la procedura descritta precedentemente è abbastanza ovvia, quella che ho seguito per utilizzare Gimp non è particolarmente documentata (leggasi: l'ho costruita ad intuito leggendone una parte in un forum mentre cercavo tutt'altro :D):

• come prima azione, bisogna creare un canvas adatto ad accogliere le immagini; è abbastanza ovvio scegliere come dimensione quella della più grande immagine tra quelle create (in questo esempio 128x128px) e questo si fa attraverso "File->New":
  • "Image Size", "Width: 128", "Height: 128", "pixels";
  • "Advanced Options -> Fill with": "Transparency".
• ora che abbiamo la base su cui lavorare è necessario importare le immagini create con Gimp e per farlo bisogna utilizzare dei layer, quindi scegli "File -> Open as Layer" e seleziona tutte le immagini da importare;
• i layer verranno importati nel canvas e si vedranno tutti sovrapposti, non temere, non sarà quello il risultato :);
• ora bisogna salvare il file con "File -> Save as..." ed è fondamentale impostare come "Name" del file un nome che abbia estensione .ico (si usa solitamente il nome standard "favicon.ico");
• si aprirà una finestra di dialogo in cui vengono mostrati separatamente i vari layer contenuti nell'immagine; si può cliccare tranquillamente su "Ok" ed ottenere finalmente il file tanto agognato :).

Ora non rimane che effettuare l'upload del file sul server web per il quale verrà utilizzato e indicare nelle pagine del sito di utilizzarlo. Per la prima azione dovrete utilizzare un client FTP, ad esempio per MacOSX c'è Cyberduck :).

La cosa più interessante è la seconda: alcuni browser utilizzano automaticamente il file favicon.ico, se questo è presente nella directory root del vostro spazio web ed ha ovviamente il nome di default favicon.ico. Tuttavia, l'azione più corretta da eseguire è introdurre nelle pagine un riferimento a tale icona e ciò si fa come segue:

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

Se per qualche motivo l'icona non risiede nella root dello spazio web basta modificare opportunamente l'attributo href.

Tutto quello che ho descritto porta ad avere un'icona compatibile con Internet Explorer, ma altri browser, come Firefox, permettono di utilizzare altri formati grafici, ad esempio .png o .gif, assegnando all'attributo type il corretto MIME type (per una lista si veda qui).

Spero vi sia di aiuto, "That's All Folks!".