Favicon su WordPress: come ag­giun­ge­re la favicon in tre modi diversi

Nella barra degli indirizzi del vostro browser si apre una tab ogni volta che aprite una nuova pagina. In questa sono contenuti il nome della pagina del sito web e una piccola immagine, che prende il nome di favicon. Queste due in­for­ma­zio­ni fa­ci­li­ta­no all’utente l’iden­ti­fi­ca­zio­ne del sito e lo aiutano a orien­tar­si quando ci sono numerose schede aperte con­tem­po­ra­nea­men­te in uno stesso browser. La favicon di un sito web con­tri­bui­sce inoltre ad aumentare la ri­co­no­sci­bi­li­tà del marchio e a mi­glio­ra­re l’espe­rien­za utente. Avete tre pos­si­bi­li­tà per ag­giun­ge­re le favicon in WordPress. Vi forniamo una guida al riguardo e vi spie­ghia­mo quale vantaggio porta con sé ogni singola opzione.

Perché ag­giun­ge­re una favicon in WordPress

Il termine favicon deriva dall’ab­bre­via­zio­ne di “favorite icon”. Questa piccola icona è una com­po­nen­te di ogni presenza web, in modo par­ti­co­la­re delle aziende. Viene mostrata nella barra degli indirizzi, nella barra dei se­gna­li­bri, nell’app mobile di WordPress, e nei risultati di ricerca da mobile. Per questo motivo si consiglia di scegliere un simbolo efficace e in­con­fon­di­bi­le da usare come favicon. I vantaggi sono i seguenti:

• Aumenta la serietà e la pro­fes­sio­na­li­tà del sito web.
• Aiuta l’utente a ri­co­no­sce­re l’azienda/l’or­ga­niz­za­zio­ne/il progetto e la relativa offerta sul web, mi­glio­ran­do così la sua espe­rien­za utente nel sito web.
• Influisce po­si­ti­va­men­te sull’ot­ti­miz­za­zio­ne per i motori di ricerca.
• Quando l’utente ha molte schede aperte nel browser, il nome delle pagine viene ac­cor­cia­to o scompare to­tal­men­te, mentre la favicon rimane sempre visibile.

Ag­giun­ge­re una favicon in WordPress

Se volete ag­giun­ge­re una favicon in WordPress avete tre pos­si­bi­li­tà: con il Cu­sto­mi­zer di WordPress, con un plug-in o ma­nual­men­te. Di seguito vi pre­sen­tia­mo ciascuna di queste opzioni nel dettaglio.

Primo metodo: il Cu­sto­mi­zer di WordPress

Il metodo più facile e veloce per ag­giun­ge­re una favicon in WordPress è di­spo­ni­bi­le dalla versione 4.3 del CMS: il Cu­sto­mi­zer. Con questo apposito strumento caricate la favicon, la ri­ta­glia­te in base alle vostre esigenze e la impostate con pochi clic.

Con questo strumento le di­men­sio­ni minime con­si­glia­te per una favicon sono 512 x 512 pixel, no­no­stan­te nella scheda del browser l’immagine venga mostrata con una di­men­sio­ne di 16 x 16 pixel. Per questo motivo fate at­ten­zio­ne che la favicon sia fa­cil­men­te ri­co­no­sci­bi­le anche in questa di­men­sio­ne. Vi spie­ghia­mo passo dopo passo come ag­giun­ge­re una favicon in WordPress con il Cu­sto­mi­zer.

Passaggio 1: aprire il Cu­sto­mi­zer

Il percorso da seguire nella dashboard in italiano di WordPress è “Aspetto” > “Per­so­na­liz­za”.

Passaggio 2: aprire la voce “De­no­mi­na­zio­ne del sito”

Dopo aver aperto l’area per la per­so­na­liz­za­zio­ne di WordPress, fate clic su “De­no­mi­na­zio­ne del sito”.

In questa sezione potete impostare o mo­di­fi­ca­re il titolo e il motto del vostro sito web. Queste in­for­ma­zio­ni verranno mostrate al fianco della favicon nella ri­spet­ti­va scheda del browser. Fate clic sul pulsante “Seleziona una immagine” sotto “Icona del sito” per impostare la favicon in WordPress.

Passaggio 3: scegliere o caricare la favicon

Nel prossimo passaggio, si apre la libreria media di WordPress. Se avete pre­ce­den­te­men­te caricato il file che volete uti­liz­za­re come favicon, allora non vi resta che se­le­zio­nar­lo. Al­tri­men­ti fate clic su “Carica file” e se­le­zio­na­te il file dal vostro computer. Con­fer­ma­te la scelta con un clic sul pulsante “Seleziona”.

Passaggio 4: ri­ta­glia­re la favicon

Dopo aver se­le­zio­na­to il file, avete la pos­si­bi­li­tà di ri­ta­gliar­lo. Nel riquadro sulla destra dello schermo, WordPress vi mostra in au­to­ma­ti­co l’anteprima della favicon. Non appena avete ri­ta­glia­to l’immagine ade­gua­ta­men­te, date conferma con un clic su “Ritaglia immagine”. Se invece l’icona ha già la di­men­sio­ne giusta, optate per “Salta Ritaglio”.

Com­ple­ta­to questo passaggio, WordPress ac­qui­si­sce au­to­ma­ti­ca­men­te la favicon. Per cambiare la favicon del vostro sito WordPress, tornate nell’area di per­so­na­liz­za­zio­ne di WordPress e ripetete il pro­ce­di­men­to.

Secondo metodo: inserire la favicon con un plug-in

WordPress offre un plug-in per quasi tutte le funzioni e ciò vale anche per l’aggiunta delle favicon. Uno dei plug-in gratuiti più co­mu­ne­men­te uti­liz­za­ti è Favicon by Real­Fa­vi­con­Ge­ne­ra­tor che, rispetto al Cu­sto­mi­zer di WordPress, offre opzioni di con­fi­gu­ra­zio­ne ag­giun­ti­ve per mi­glio­ra­re la com­pa­ti­bi­li­tà della favicon con diversi di­spo­si­ti­vi e app. Nei paragrafi suc­ces­si­vi vi spie­ghia­mo come ag­giun­ge­re una favicon in WordPress per mezzo di questo plug-in.

Passaggio 1: in­stal­la­re il plug-in

Nella dashboard di WordPress portate il cursore sulla voce di menu “Plugin” e fate clic su “Aggiungi nuovo”.

Cercate il plug-in “Favicon by Real­Fa­vi­con­Ge­ne­ra­tor”, se­le­zio­na­te­lo tra i risultati di ricerca e fate clic su “Installa ora”. Dopodiché cliccate su “Attiva” e il plug-in sarà pronto per essere uti­liz­za­to.

Passaggio 2: aprire le im­po­sta­zio­ni del plug-in

Dopo aver in­stal­la­to il plug-in, fate clic su “Aspetto” > “Favicon”. Nella schermata che si apre trovate le im­po­sta­zio­ni del plug-in.

Passaggio 3: con­fi­gu­ra­re la favicon

Fate clic sul pulsante “Seleziona dalla libreria media” per scegliere il file di­ret­ta­men­te dalla vostra libreria media di WordPress. Con questo plug-in avete bisogno di un’immagine di di­men­sio­ni minime 70 x 70 pixel, ma l’ideale sarebbe 260 x 260 pixel o delle di­men­sio­ni maggiori. Dopo aver scelto l’immagine, date conferma facendo clic sul pulsante sot­to­stan­te “Genera favicon”.

Il plug-in vi rein­di­riz­za au­to­ma­ti­ca­men­te al vostro sito web. Non appena l’immagine sarà stata caricata con successo, avete diverse con­fi­gu­ra­zio­ni opzionali tra cui scegliere. Adattate la ri­pro­du­zio­ne della favicon per il browser, per i risultati di ricerca di Google o per i vari smart­pho­ne.

Non appena avete terminato con la con­fi­gu­ra­zio­ne, fate clic sul pulsante “Genera Favicon e codice HTML” in fondo alla pagina. Potete cliccare su questo pulsante anche se non avete con­fi­gu­ra­to tutte le im­po­sta­zio­ni a di­spo­si­zio­ne, poiché, in quanto opzionali, potete decidere di saltarne quante volete.

A questo punto il plug-in vi riconduce al back end di WordPress, con­fer­man­do­vi l’avvenuta in­stal­la­zio­ne della favicon in WordPress.

Terzo metodo: in­se­ri­men­to manuale

WordPress offre in molti casi anche la pos­si­bi­li­tà di apportare ma­nual­men­te modifiche alle im­po­sta­zio­ni. Anche le favicon possono essere aggiunte in WordPress uti­liz­zan­do il File Transfer Protocol (FTP). Tutto ciò di cui avete bisogno è un pacchetto favicon con­te­nen­te sia i file necessari sia un apposito codice HTML. Questo pacchetto può essere fa­cil­men­te creato usando uno dei tanti strumenti di­spo­ni­bi­li gra­tui­ta­men­te online.

Passaggio 1: generare i file della favicon

Aprite un qualsiasi strumento online per la ge­ne­ra­zio­ne delle favicon. Nel nostro esempio uti­liz­zia­mo lo strumento Real Favicon Generator, di­spo­ni­bi­le solo in inglese. Fate clic sul pulsante “Select your Favicon image” per caricare l’immagine che volete uti­liz­za­re come favicon per il vostro sito WordPress.

Dopo aver caricato l’immagine, potete scegliere tra le opzioni di im­po­sta­zio­ne del tool che avete deciso di uti­liz­za­re e che servono a mo­di­fi­ca­re le di­men­sio­ni e lo sfondo della favicon. Apportate le modifiche ne­ces­sa­rie o passate di­ret­ta­men­te alla ge­ne­ra­zio­ne della favicon. Suc­ces­si­va­men­te, fate clic alla fine della pagina sul pulsante “Generate your Favicons and HTML code”.

Non appena il tool avrà terminato la creazione del pacchetto, potete scegliere se sca­ri­car­lo o se copiare sem­pli­ce­men­te il relativo codice HTML. Scaricate il pacchetto e ri­no­mi­na­te­lo “favicon.ico”. Questo per­met­te­rà a WordPress di ri­co­no­sce­re l’immagine di­ret­ta­men­te come favicon.

Passaggio 2: caricare il pacchetto della favicon tramite FTP

Accedete ai dati di WordPress tramite FTP. Aprite la directory prin­ci­pa­le e caricate al suo interno il pacchetto della vostra favicon. As­si­cu­ra­te­vi che si trovi nella stessa cartella della cartella “WP-admin” o della cartella “WP-content”.

Passaggio 3: inserire il codice HTML

Arrivati a questo punto, aprite il file header.php e inserite il codice HTML della favicon nel campo dell’header. Ac­cer­ta­te­vi che il vostro dominio e il percorso che porta alla favicon siano riportati cor­ret­ta­men­te.