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 16x16px 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” (sempre prima di </head>).

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

9 thoughts on “Come creare una favicon per siti o blog

  1. Pingback: upnews.it

  2. Pingback: diggita.it

  3. Pingback: groggit.com

  4. Pingback: Plim.it - Vota questo articolo!

  5. ciao! grazie per le indicazioni, ho un blog ma non ho capito esattamente in quale parte del file “header.php” devo inserire

    inoltre, non ho un file header.php, ma header-mobile.php
    boh forse è meglio che chiedo al creatore del tema?

  6. @Francesco: Ciao Fra, dovresti avere un file che sia chiama solo header.php; header-mobile.php è l’header del tema per le versioni mobile (navigazione dal telefonino).
    Devi inserire la stringa sempre prima di , e assicurarti di scrivere correttamente il percorso dell’immagine, e di inserire correttamente le virgolette.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.