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

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

Non dimenticare di leggere anche:

Questo articolo è stato pubblicato in grafica web, web-design e ha le etichette , , , . Aggiungi ai preferiti: link permanente. Scrivi un commento o lascia un trackback: Trackback URL.

2 Commenti

  1. niki
    Pubblicato 7 gennaio 2010 alle 20:06 | Link Permanente

    grazie spero di essere capace

  2. elisa
    Pubblicato 8 gennaio 2010 alle 11:22 | Link Permanente

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

4 Trackbacks

  1. Scritto da upnews.it il 13 novembre 2008 alle 18:06

    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. Scritto da diggita.it il 13 novembre 2008 alle 18:31

    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. Scritto da groggit.com il 13 novembre 2008 alle 18:35

    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. Scritto da Plim.it - Vota questo articolo! il 13 novembre 2008 alle 18:46

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

Scrivi un Commento

Il tuo indirizzo Email non verra' mai pubblicato e/o condiviso. I campi obbligatori sono contrassegnati con *

*
*

Puoi usare questi HTML tag e attributi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>