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 commenti
  1. Come creare una favicon per siti o blog | NoSatisPassion…

    Le favicon, non solo belle ma anche utili. Cosa sono, a cosa servono e come crearle: scoprilo leggendo l’articolo….

  2. Come creare una favicon per siti o blog…

    Le favicon, non solo belle ma anche utili. Cosa sono, a cosa servono e come crearle: scoprilo leggendo l’articolo. — Le favicon sono piccole immagini (16×16 px) che appaiono vicino l’url……

  3. Come creare una favicon per siti o blog | NoSatisPassion…

    Le favicon, non solo belle ma anche utili. Cosa sono, a cosa servono e come crearle: scoprilo leggendo l’articolo….

  4. Come creare una favicon per siti o blog | NoSatisPassion…

    Le favicon, non solo belle ma anche utili. Cosa sono, a cosa servono e come crearle: scoprilo leggendo l’articolo….

  5. grazie spero di essere capace

  6. Ciao Niki, sì, vedrai che non è difficile! :)

  7. 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?

  8. le stringhe non compaiono mai forse devo spezzarle cmq mi riferivo a questa

  9. @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.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.