In questo articolo andremo a scoprire la WordPress favicon, un’icona di dimensioni ridotte che si trova di fianco ai nomi dei siti web, all’interno del programma utilizzato per navigare il web (Chrome, Firefox, Safari, Opera, ecc.). La sua funzione è quella di raffigurare il logo o branding di un sito con l’obiettivo di rendere subito riconoscibile la scheda del browser in cui compare.
WordPress favicon: cos’è
Le WordPress favicon, come detto, sono piccole icone che appaiono nelle schede, nella cronologia e anche nei segnalibri del browser.
La favicon fa parte di quegli elementi non strettamente necessari al funzionamento del sito web (come ad esempio anche i breadcrumbs, la pagina 404 o la pagina Coming Soon) ma che, tuttavia, possono essere molto importante per migliorare la user experience.
È opportuno precisare che parliamo di WordPress favicon in quanto WordPress è uno degli argomenti principali affrontati in questo sito. Tuttavia, tieni presente che puoi creare una favicon indipendetemente dal CMS o framework utilizzato e, in aggiunta, per qualsiasi tipologia di sito web, si tratti di un blog, un ecommerce, un sito aziendale, ecc.).
A cosa serve la Favicon
Ti è mai capitato di avere parecchie schede aperte nel browser? A me succede ogni giorno e a volte arrivo ad avere decine di schede simultaneamante. Ecco, grazie alle favicon di solito posso capire a colpo d’occhio il sito di ciascuna scheda. Senza favicon dovrei leggere il nome della scheda (ovvero il meta title) che, comunque, potrebbe non bastare per far capire di che sito web si tratti. Inoltre, quando le schede aperte sono tante, le scritte risultano tagliate e quindi finirei col doverle aprire singolarmente fino a trovare il sito che cerco.
La Favicon è utile a rendere più riconoscibile la scheda del browser, distinguendola dalle altre.
Oltre all’aspetto distintivo, che può portare ad aumentare la notorietà del brand, c’è anche quello estetico. Ormai oggi quasi ogni sito ha una favicon. Non predisporla significherebbe apparire “un po’ meno professionali” degli altri.
Come scegliere la favicon
L’obiettivo di una favicon dovrebbe essere di distinguersi dalle altre presenti online, così che gli utenti possano riconoscere più facilmente il sito web.
Tuttavia, un primo dubbio che può sorgere nel momento in cui si vuole creare una favicon è quale immagine utilizzare. Usare il proprio logo è spesso la scelta migliore. Tuttavia, non è sempre così. Anzi, in certi casi il logo come favicon è del tutto sconsigliato.
Il problema deriva dal fatto che le favicon sono di dimensioni estremamente ridotte. Per la precisione, stiamo parlando di 16×16 pixel. Alcuni loghi sono abbastanza riconoscibili anche se di così piccole dimensioni. Altri, però, risultano davvero incomprensibili o illeggibili.
Prendiamo l’esempio di creare-sito-web-gratis.it. Se avessi utilizzato come favicon l’intero logo, avrei ottenuto una strisciolina quasi invisibile. Nel mio caso, persino escludendo la scritta e mantenendo il computer con all’interno il simbolo della crescita, la favicon risultava poco riconoscibile. Alla fine ho quindi deciso di lasciare solo il simbolo escludendo anche il computer.
Dunque, è importante studiare un’immagine con contrasti accentuati e soprattutto il meno elaborata possibile. Il risultato finale deve essere in grado di attirare subito l’attenzione degli utenti che ancora non conoscono il brand e di differenziarsi dagli altri loghi già presenti.
Creare favicon: come fare
Vuoi creare una favicon ma non sai da dove partire?
Ecco cosa ti serve:
- un logo o un’immagine
- un qualsiasi programma di editing delle immagini, anche gratuito
- un tool per creare favicon free (serve per convertire il formato jpg o png in ico)
Apri l’immagine con un programma di editing (puoi anche utilizzare un tool online come questo). Riduci le dimensioni dell’immagine a 16×16 pixel. Se l’immagine non dovesse essere quadrata, sarà necessario renderla tale. Assicurati, però, di non tagliare una parte dell’immagine o logo.
A questo punto, salva l’immagine in formato jpg o png e poi utilizza un tool gratuito come favicon.io per convertire l’immagine in ico.
Se pensi che l’immagine così com’è non si presti a essere utilizzata, dovrai elaborarla. Per questo ti servirà il file sorgente e un programma idoneo per poterla modificare (ad esempio Illustrator nel caso di un vettoriale).
Creare favicon WordPress: ancora più semplice
Se già pensavi che fosse semplice creare una favicon, forse ti sorprenderà sapere che se utilizzi WordPress è ancora più facile!
Infatti, non ti serve ridurre le dimensioni dell’immagine e tantomeno fare la conversione al formato ico. È sufficiente che l’immagine sia quadrata e di una dimensione di almeno 512×512 pixel.
Ma come inserire nel sito la favicon? Continua a leggere per scoprirlo.
Favicon online: come inserirle nel sito
Inserire favicon in WordPress
Metodo 1 (da admin, no codice)
Le favicon si possono inserire senza ricorrere a plugin aggiuntivi, visto che è possibile farlo attraverso una funzionalità nativa del CMS.
Il processo di inserimento è estremamente semplice. Per inserire una favicon online in WordPress, i passi da seguire sono i seguenti:
- Accedi al tuo admin WordPress, entra in Aspetto e poi in Personalizza
- Clicca su Denominazione Sito, qui si trova una sezione che si chiama Icona del sito
- Clicca Seleziona Immagine e carica l’immagine creata in precedenza (se non l’hai fatto prima, puoi ritagliare l’immagine anche quando la carichi in WP)
- Clicca sul pulsante in alto Pubblica.
Al termine di questi passaggi è possibile vedere l’anteprima della favicon e dell’icona dell’app.
Metodo 2 (formato ico + HTML)
Se invece desideri inserire la favicon in HTML, ti servirà l’immagine in formato ico.
Questi i passaggi da seguire:
- Carica il file .ico nella root del tuo sito
- Accedi al tuo admin WordPress, clicca su ASPETTO, poi EDITOR DEL TEMA e apri il file header.php (Theme Header)
- Trova la riga dove compare </head> e appena prima aggiungi la seguente stringa:
<link rel="shortcut icon" href="<php bloginfo('stylesheet_directory'); ?>/favicon.ico" />Inserita la stringa, clicca su Aggiorna file. Fatto questo, apri o ricarica una pagina qualsiasi del sito e il gioco è fatto, potrai visualizzare la tua favicon nelle schede del browser.
Inserire favicon HTML
Infine, se non utilizzi WordPress, il metodo per aggiungere la favicon al tuo sito è simile al precedente. Devi sempre caricare il file .ico nella root del sito. Dopodiché, aprire il file dove sono contenuti i tag <head> e prima del tag di chiusura (ovvero </head) aggiungere la seguente riga di codice:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
Conclusioni
In questo articolo abbiamo proposto una panoramica piuttosto completa sulle favicon, in particolar modo nel contesto del CMS WordPress. Abbiamo visto che cosa sono, a cosa servono, perché è importante utilizzarle, come crearle e, per finire, come inserirle in qualsiasi sito.
Spero ti sia stato utile e che andrai a creare una favicon bellissima!
