In questo articolo vedremo come creare ed impostare una favicon per il nostro blog Wordpress, essa è l’immagine che viene visualizzata a fianco all’indirizzo del sito e nella scheda corrispondente e che ci permette di rappresentare in soli 16×16 pixel l’essenza del sito e dell’azienda.
Per capirci meglio ecco un’immagine nella quale possiamo vedere come verrà visualizzata la favicon una volta impostata:
La favicon è importante in quanto accresce la credibilità e la serietà del vostro sito oltre ad aumentare il numero di utenti che si ricorderanno di voi in quanto avrete un’immagine che vi rappresenterà.
Ci sono davvero tanti servizi che permettono di creare una favicon a partire da un’immagine o disegnandola da zero, come già detto essa dovrà essere di forma quadrata e di soli 16 pixel in larghezza e 16 in altezza.
Il servizio che fa al caso nostro è www.favicon.cc grazie al quale potremo crearla in modo semplice ed intuitivo.
1.0 Creare la favicon.ico.
Il sito in questione genererà il file favicon.ico che andremo poi ad inserire sul nostro sito.
Vediamo adesso il procedimento nel caso volessimo creare l’icona da zero o a partire da un’immagine preesistente (creata con qualsiasi programma grafico):
- Creare la favicon da zero:
In caso non disponessimo di un’immagine possiamo crearne una direttamente dal sito, per farlo rechiamoci nell’homepage e clicchiamo su Create New Favicon, apparirà il riquadro (di colore giallino) dove potremo creare la favicon utilizzando gli strumenti a disposizione.
Possiamo scegliere i colori dal Color Picker sulla destra e disegnare l’immagine cliccando e trascinando il mouse:
Possiamo inoltre vedere un’anteprima su come verrà visualizzata la favicon che stiamo creando nel riquadro Preview.
Per salvare sul computer la favicon.ico creata clicchiamo su Download Favicon:
- Creare la favicon da un’immagine preesistente:
Scegliamo questa opzione in caso avessimo già un’immagine (in formato jpg, jpeg, gif, png, bmp o ico) da trasformare in favicon.
Ricordate che la favicon è di forma quadrata e che quindi immagini rettangolari potrebbero essere distorte, comunque il sito ci permette di mantenere le proporzioni originali. Vediamo come fare.
Per prima cosa rechiamoci nell’homepage e clicchiamo su Import Image, apparirà un riquadro dove potremo caricare la nostra immagine.
Scegliamola dal nostro computer cliccando su Sfoglia e selezioniamo l’opzione Keep dimensions per mantenere le proporzioni originali.
Clicchiamo infine su Upload per inviare l’immagine al sito:
Attendiamo alcuni secondi che l’immagine venga caricata (dipende dalla dimensione dell’immagine) dopodichè verremo portati in una pagina dove potremo visualizzare la favicon creata e modificarla (vedi paragrafo precedente).
Una vola soddisfatti del risultato clicchiamo su Download Favicon per salvarla sul nostro computer.
1.1 Impostare in Wordpress la favicon creata
A questo punto non ci resta che andare ad inserire la favicon.ico creata sul nostro blog Wordpress.
Prima di tutto carichiamo il file favicon.ico nella root del nostro sito e cioè nella directory principale di Wordpress, in modo tale da poter avere accesso alla favicon digitando http://indirizzosito/favicon.ico (ovviamente tutto cambia a seconda della cartella nella quale avete installato Wordpress).
Ora andremo a modificare il file header del nostro tema per includere la favicon creata.
Apriamo quindi il file wp-content/themes/tuo_tema/header.php (tuo_tema ovviamente è il nome che ha la cartella del tuo tema Wordpress corrente) ed aggiungiamo la linea di codice <link rel=”shortcut icon” href=”/favicon.ico” /> insieme a tutti gli altri tag link, in questo modo:
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="shortcut icon" href="/favicon.ico" /> <?php wp_head(); ?>
Salviamo il file e siamo a posto.
Abbiamo creato la favicon.ico e l’abbiamo impostata per il nostro blog Wordpress, probabilmente per visualizzarla correttamente dovrete aspettare qualche minuto, quindi se non la vedete subito non disperate.
Se proprio l’icona non appare cancellate la cronologia e aggiornate la pagina profondamente cliccando CTRL + F5.
Fatemi sapere com’è andata!
agosto 4th, 2009 at 16:33
bell’articolo.. io le creo con photoshop, però è da provare il tuo link