E” sempre l”ultima cosa che mi viene in mente di fare: creare la favicon per un sito web.
Eppure, essendo un tab-maniaco con una media di 5/10 tab aperte contemporaneamente penso che la favicon sia una delle cose più utili nel riconoscimento della pagina in quella giungla di linguette.
La favicon (da favourite icon) è una piccola immagine quadrata mostrata nei tab e da parte ai segnalibri del browser per identificare velocemente un sito. E” stata creata da Microsoft nelle prime versioni di Internet Explorer ed era usata esclusivamente nei bookmark. Una volta creato il segnalibro, Explorer scaricava il file e lo mostrava da parte al nome nel menu preferiti.. Bhè, nulla di diverso da oggi. Oggi però viene usata anche nei tab che allora non esistevano.
L”immagine
Le dimensioni classiche di una favicon sono di 16×16 pixel (possono essere anche più grandi, ma sempre quadrate) e il formato di salvataggio, come vedremo in seguito è il formato ICO.
Con queste informazioni possiamo creare la nostra immagine, solitamente utilizzando parte del logo o i colori identificativi del sito (consiglio un buon tutorial di pixel art per icone meno convenzionali) ed esportarla. Se il nostro software non supporta l”esportazione di questo formato, non c”è nessun problema, diversi servizio online ci permettono di convertire l”immagine in formato ICO:
- http://www.favicon.cc/- Editor on-line e convertitore
- http://www.htmlkit.com/services/favicon/ convertitore da immagine qualsiasi a ICO
- http://tools.dynamicdrive.com/favicon/ convertitore da immagine qualsiasi a ICO
- http://www.favicontool.com/ convertitore da immagine qualsiasi a ICO
Attenzione, Photoshop non supporta ICO nativamente, ma se volete esiste un simpatico plugin.
Andiamo on-line
Prima di tutto come definiamo una favicon in una pagina web:
[html] <link rel=”shortcut icon” type=”image/vnd.microsoft.icon” href=”favicon.ico” /> [/html]
Abbastanza semplice: nell”elemento HEAD, prima si definisce un tag che linka ad un file esterno dopodichè, tramite l”attributo href si indica a quale file remoto (locale o meno) e tramite l”attributo rel si indica cos”è l”attributo al quale si sta linkando. Nel dettaglio ora analizzeremo i vari valori e attributi:
Attributo REL
Indica al browser come trattare il link. Abbiamo usato “shortcut icon” che pare sia lo standard de-facto (a volte tutto maiuscolo a volte tutto minuscolo), in realtà il W3C ha stilato una sua regola che indica soltanto come “icon” il esatto valore da utilizzare.
Ora, l”attributo rel può avere molti significati inserito nel tag link o a, per far capire al browser che il valore “icon” identifica la nostra favicon bisognerebbe linkare tramite l”attributo profile del tag HEAD la definizione degli head (vedi la specifica correlata).
In pratica questo non serve e il browser è in grado di identificare correttamente l”attributo.
Attributo HREF
Questo attributo, per nulla nuovo, indica dove trovare l”icona sul server; il percorso può essere assoluto o relativo al server e quindi puntare anche ad un file remoto. Niente di strano e piuttosto ovvio, ma mi interessava dire che alcuni browser cercano automaticamente un file favicon.ico nella root del server anche senza inserire nell”HEAD il richiamo al file.
Attributo TYPE
L”attributo type definisce il mime-type dell”icona da mostrare, ovvero il formato del file. Questo parametro dice al browser di che tipo di immagine si tratta e come trattarle.
I formati supportati dipendono dal browser, i più diffusi sono: ICO, PNG 8/24, GIF, JPG. Il primo, il formato ICO, è quello che tutti i browser supportano senza problemi, mentre Explorer ignora bellamente gli altri. Il concetto è che dobbiamo usare l”ICO se vogliamo vederlo su tutti i browser.
Ritornando al valore di type, ecco i MIME esatti per ogni formato:
- ICO: image/vnd.microsoft.icon – per chi se lo chiede, sì è uno standard IANA, supporta la trasparenza, Photoshop non salva nativamente.
- PNG: image/png – supporta la trasparenza a 24 e 8 bit
- GIF: image/gif – solo trasparenza a 8 bit
- JPG: image/jpeg – assolutamente da evitare per immagini iconiche, ma supportato. Una gif o png è sicuramente migliore.
Talvolta mime del tipo image/x-icon o image/x-application sono utilizzati erroneamente nella definizione del tipo. Ai fini pratici l”icona è comunque mostrata, ma non rappresenta il reale mime del file.
Cache
Una nota per quanto riguarda la cache. Nei tab, da ultime esperienze fatte, la favicon è trattata come una normale risorsa esterna che segue le normali regole di caching. Credo, ed è solo un”intuizione, che in mancanza di header di cache, il browser si tenga cachata l”immagine senza mai farla scadere, in quanto mi è sempre necessario svuotare la cache per aggiornare l”icona.
Per quel che riguarda i bookmark la situazione è un po” differente in quanto, almeno Firefox, registra il bookmark e la favicon nel suo file di bookmark in locale senza più ricontrollare on-line la validità dell”immagine. Tecnicamente crea nel file con i bookmark un”immagine salvata in-line.
Conclusioni
Penso non ci sia molto altro da dire riguardo ai risvolti tecnici sulla favicon. A mio parere rimane sempre uno di quei particolari, all”apparenza futili, che danno un risvolto più curato al proprio sito web, ma per quel che mi riguarda sono uno strumento molto utile nella navigazione a tab a cui ormai sono sottomesso incondizionatamente.
