Creare la favicon del sito in 4 passi

Nella barra degli indirizzi o nel tab del browser web, viene spesso visualizzata una piccola icona con un logo colorato, seguito dall’URL o il titolo della pagina web visualizzata. Questa particolare icona, si chiama favicon, dall’inglese “favorite icon”.

La favicon viene visualizzata anche nella cronologia del browser, nell’elenco dei “preferiti” e anche quando si crea un collegamento verso il sito, sul desktop o come file nel file-system.

Dunque una favicon è un componente critico del sito, perché contribuisce a diffonderne il logo, ovvero il marchio che lo contraddistingue.

I siti senza favicon perdono l’opportunità di portare il proprio logo fuori dai confini del browser web; inoltre, dal punto di vista tecnico, la mancanza del file favicon.ico, causa problemi nei siti ad alto traffico perché forza i server a generare codici errore 404 nel file di log ogni volta che viene richiesta una pagina.

Per creare la favicon di questo sito, ho seguito questi passi:

1. ho creato il logo del sito a partire da immagini vettoriali
2. ho esportato ripetutamente il logo nel formato .png con diverse dimensioni
3. ho combinato le immagini .png in un unico file .ico
4. ho copiato il file .ico nella cartella radice del sito web e l’ho inserito nelle pagine web, aggiungendo un link nella sezione head del codice HTML della pagina

Di seguito, spiego con maggior dettaglio come ho fatto.

Creare il logo

Ho disegnato l’icona di questo sito (una beuta con qualche estratto di codice HTML a simboleggiare la sperimentazione) modificando una clipart vettoriale trovata in FlatIcon, usando Inkscape, un programma per creare grafica vettoriale professionale distribuito come software libero.

Preparare le immagini con diverse dimensioni

Usando Inkscape, ho esportato l’immagine del logo, creando un file in formato “.png” di 128px di lato; ho ripetuto l’operazione diverse volte in modo da creare una serie di immagini con dimensioni diverse: 16px, 32px, 64px e 128px. L’obiettivo è quello di creare una serie di immagini che avranno una buona resa su dispositivi con diversa risoluzione dello schermo (pc, tablet, smartphone etc…). Si noti che ho mantenuto trasparente il contorno dell’immagine, per adattarla meglio allo sfondo dove apparirà. Le dimensioni richieste per le icone, possono variare molto in base al dispositivo ed all’applicazione che la utilizza; per esempio, si possono considerare queste dimensioni di riferimento:

• 16px per i browser web che la mostrano nella barra degli indirizzi, nei tab e nella lista dei preferiti;
• 24px per i Pin di Internet Explorer 9
• 32px per i nuovi tab di Internet Explorer, la taskbar di Windows 7+ e la barra laterale di Safari
• 57px per iOS (iPod Touch, iPhone)
• 72px per iPad
• 96px per le Favicon di GoogleTV
• 114px per iPhone 4+
• 128px per Chrome Web Store
• 195px per Opera Speed Dial

Combinare più file .png in un .ico

Il file della favicon, può avere un nome di fantasia e formati diversi (.png, .gif, etc…), ma quello più comune è favicon.ico.

Per combinare le immagini .png preparate in precedenza in un unico file .ico, ho usato l’applicazione web ICOConvert: con essa è possibile creare facilmente una favicon combinando fino a 20 differenti immagini .png.

Dopo aver generato e scaricato il file .ico, l’ho aperto con GIMP per verificarne il contenuto ed aggiustare le dimensioni dei livelli.

Inserire la favicon in una pagina web

Per inserire l’icona nella pagina web, ho aggiunto il seguente tag link nella sezione head:

<link rel="icon" href="http://www.ipertesti.com/favicon.ico" sizes="16x16 32x32 64x64" type="image/x-icon">

L’attributo “sizes” del tag , deriva dalla specifica di HTML5 che raccomanda di impostare una icona in grado di adattarsi alle diverse risoluzioni dei dispositivi di navigazione (PC, smartphone, tablet, TV, etc…)

Comunque, il codice riportato qui sopra non è strettamente necessario; infatti, i browser più recenti tentano comunque di scaricare la favicon dalla cartella radice del sito, ogni volta che vi si collega.

Riferimenti

1. WikiPedia Favicon
2. WikiPedia .ICO file format
3. Create a favicon for your site in 8 steps
4. How to create a favicon for your website

Libri suggeriti

Guide Inkscape gratuite:

1. HTML.it - Guida Inkscape di Rossella Facchini
2. Inkscape - Guida ad un programma di grafica vettoriale
3. Rebelia.it - Tutorial Inkscape