Cos'è la favicon?
La favicon è l'icona che compare accanto alla URL di un sito web all'interno della barra degli indirizzi del browser. Il nome favicon è la contrazione dell'espressione anglosassone favorites icon, cioè "icona dei preferiti". La favicon, infatti, nasce con l'esigenza di accompagnare graficamente la URL di un sito web all'interno dell'elenco dei bookmark.
Il primo browser a supportare la favicon è stato Internet Explorer 5 ma, col tempo, questa piccola iconcina è diventata un vero e proprio standard: oggi tutti i browser in commercio supportano la favicon.
In concreto, la favicon è un piccolo file grafico in formato .ico (ma oggi quasi tutti i browser supportano anche i formati GIF e PNG) delle dimensioni di 16x16 pixel.
Come faccio a pubblicare la favicon sul mio sito?
In origine era sufficiente pubblicare il file favicon.ico all'interno della root del proprio sito web. Oggi, in alternativa, è possibile inserire, all'interno dei tag <head> e </head>, questo semplice markup:
<link rel="icon" href="/percorso/favicon.ico" />
Ovviamente questa linea di codice dovrebbe essere presente su tutte le pagine del sito.
Per maggiori informazioni sulla favicon vi invitiamo a leggere questo articolo pubblicato su Mr.Webmaster
Creiamo la nostra favicon
Creare una favicon per il proprio sito web è semplicissimo: utilizzando l'editor che trovate in questa pagina potete disegnare da soli la vostra icona partendo da zero oppure potete importare um'immagine da utilizzare come base di partenza per la creazione del vostro progetto.
L'area di disegno (la griglia grigia) è un quadrato suddiviso in 256 settori, pari cioè al numero di pixel di cui è composta la favicon (16 x 16 = 256). Ciascun settore, quindi, corrisponde ad un pixel.
Possiamo colorare i pixel utilizzando lo strumento matita (lo strumento selezionato è colorato di arancione). Quando utiliziamo la matita possiamo scegliere un colore di riempimento scegliendolo dal selettore accanto:
Selezionata la matita e scelto il colore portiamo il mouse sull'area di disegno per iniziare il lavoro: cliccando e trascinando si coloreranno i pixel.
Se abbiamo commesso degli errori possiamo cancellare utilizzando lo strumento gomma: selezioniamolo facendo click (diventerà arancione) e poi spostiamoci col mouse sull'area di disegno e clicchiamo sui pixel che vogliamo cancellare.
Altro strumento disponibile è il picker: si tratta di uno strumento attraverso il quale possiamo impostare il colore da utilizzare con lo strumento matita "catturandolo" dall'area disegno: selezioniamo il picker, spostiamoci sull'area disegno e clicchiamo sul pixel del quale vogliamo copiare il colore (questo strumento è molto utile quando si lavora su immagini importate).
Per importare un'immagine nell'area di disegno cliccate sull'apposito pulsante: così facendo si aprirà la finestra di importazione. Selezionate un file grafico (JPG, GIF o PNG) di max 250 Kb e non più grande di 600x600 pixel. Il vostro browser vi mostrerà l'anteprima del file selezionato.
Utilizzate lo strumento di selezione (che potete spostare e/o ridimensionare) per inquadrare il dettaglio che desiderate importare nell'editor (deve essere un'area quadrata). Una volta completato clicchiamo sul pulsante d'importazione. Così facendo l'immagine comparirà nell'editor e potrà essere modificata con gli strumenti di design descritti prima.
Una volta concluso il lavoro clicchiamo sul pulsante "Salva e scarica la Favicon" per salvare il file favicon.ico sul nostro PC. A questo punto non resta che pubblicare la favicon sul sito utilizzando un comune client FTP.
