Aggiungere la favicon a WordPress: come e perchè

La favicon è l’icona 16X16 associata ad una pagina web. Solitamente viene creata a partire dal logo e viene visualizzata a fianco del titolo della pagina che si sta visualizzando oppure,  se la pagina viene memorizzata tra i preferiti, nella scheda dei segnalibri.

Ma veniamo ai fatti, la favicon è questa:

A cosa serve

La favicon è molto comoda quando si hanno molte schede aperte nello stesso browser così da ritrovare immediatamente tutte le pagine e/o articoli associati ad un determinato sito. L’immagine è molto più immediata rispetto al titolo della pagina.

Ad esempio, vedendo la favicon nell’immagine di sopra sai che quella pagina è associata al mio blog.

Inoltre permette di instaurare un rapporto, seppur debole, con l’utente, che vede il sito meno anonimo e più professionale rispetto a chi non possiede nessuna favicon personalizzata.

Come si crea

Bisogna partire da un’immagine quadrata, preferibilmente con sfondo trasparente e con estensione .gif o .png. Dopodichè si può procedere in due modi:

1. Manuale

Personalmente preferisco usare un programma di fotoritocco come Gimp (è gratuito) e ridimensionare il logo con dimensione 16X16. Salvo l’immagine con il nome favicon.ico (attenzione all’estensione .ico).

2. Programma

Ti puoi affidare ad un qualunque programma gratuito online, ad esempio favicon.cc, molto intuitivo. Carichi la tua immagine,  si avvia in automatico la conversione in icona 16X16 e poi la scarichi sul tuo computer.

Come aggiungere la favicon in WordPress

Plugin? Naaaaa… non mi piace avere troppi plugin, per questo con poche righe di codice ti mostrerò come aggiungere una favicon personalizzata nel tuo blog WordPress senza utilizzare nessun plugin.

Carica la tua nuova favicon sul tuo spazio web tramite FTP nella root (solitamente dove sono presenti le cartelle di WordPress e tutti i file).

Dopodichè fai un backup (scaricandolo sul tuo computer) del file functions.php del tuo tema (lo trovi in /wp-content/themes/nome-tema/functions.php) e da Aspetto > Editor > functions.php aggiungi questo codice prima della chiusura dell’ultimo tag ?> :

[php]
/* Aggiungi la favicon al tuo Blog
* by Roberto Iacono di robertoiacono.it
*/
function ri_wp_favicon() { ?>
<link rel="shortcut icon" type="image/x-icon" href="URL FAVICON" />
<?php }
add_action(‘wp_head’, ‘ri_wp_favicon’);
[/php]

Al posto di URL FAVICON devi inserire l’URL della tua favicon, che dipende da dove hai inserito la tua favicon. Se l’hai inserita nella root, l’URL dovrà essere del tipo: http://www.nome-sito.it/favicon.ico .

Se invece decidi di inserire la favicon nella cartella images del tuo tema, allora dovrai usare questo codice:

[php]
/* Aggiungi la favicon al tuo Blog
* by Roberto Iacono di robertoiacono.it
*/
function ri_wp_favicon() { ?>
<link rel="shortcut icon" type="image/x-icon" href="<?php echo bloginfo(‘stylesheet_directory’); ?>/images/favicon.ico" />
<?php }
add_action(‘wp_head’, ‘ri_wp_favicon’);
[/php]

Ora cancella la cache del tuo browser, aggiorna la pagina e vedrai comparire la tua nuova favicon 🙂