Come creare una favicon per siti o blog

La favicon è una piccola immagine (16×16 px) che appare vicino l’url del sito nella barra di navigazione del browser. Non è solo un vezzo decorativo; la favicon è anche un appiglio visuale utile ad identificare un sito a colpo d’occhio: ad esempio, nella lista dei Preferiti, o anche quando abbiamo molte schede aperte nel nostro browser.

Anche tu puoi aggiungere una favicon al tuo sito in poche semplici mosse:

1. Per creare l’immagine puoi usare delle applicazioni on-line come favikon o 256pixel . Puoi usare Photoshop, dopo aver scaricato il plugin gratuito che consente di salvare l’immagine come file .ico. Gimp invece supporta l’.ico nativamente e non ha bisogno di plugin.
2. Nel creare la tua favicon cerca di produrre un’immagine decifrabile e riconoscibile anche a piccole dimensioni. Un esempio da seguire è secondo me la favicon di Flickr: semplice e di grande impatto.
3. Qualunque sia il mezzo che hai scelto per produrla, alla fine l’immagine dovrà misurare 16×16px e dovrai salvarla in formato .ico, ottenendo un file dal nome “favicon.ico“.
4. Salva questa immagine dentro la cartella “Immagini” o anche in un’altra cartella del tuo sito.
5. Nella pagina Index del sito, prima di </head>, devi inserire una linea di codice simile a questa (attento, perché in href devi inserire il percorso esatto che individua la posizione dell’immagine, sennò non vedrai nulla):
   <link rel=”shortcut icon” href=”img/favicon.ico” />
6. Nel caso tu abbia un blog, devi inserire la favicon nella cartella “Images” del tema; la linea di codice va inserita nel file “header.php“

Se la favicon non compare:

• A volte non basta ricaricare la pagina del tuo sito per vedere se le modifiche hanno avuto effetto. Chiudi il browser, aprilo di nuovo e poi torna alla pagina del sito.
• Se proprio non riesci a vedere l’immagine, quasi sicuramente dipende dal fatto che non hai inserito il percorso giusto dell’immagine nella linea di codice suddetta.
• Se per caso stai sostituendo una favicon con un’altra, a volte non riesci a vedere il cambiamento perché è necessario svuotare la cache del browser (altrimenti il browser ripropone l’immagine che ha memorizzato nella cache e non carica la nuova).

Queste sono le favicon che ho creato rispettivamente per il mio blog e per il mio portfolio: vi piacciono?

http://nosatispassion.altervista.org

http://trattiescatti.altervista.org

Rimani aggiornato sui prossimi articoli: iscriviti anche tu ai miei Feed RSS completi. Anche via email (è gratis!). Se non sai cosa sono i feed, guarda qui.