Login

corsi online di WordPress

Creare e inserire la favicon in WordPress

La favicon è l'icona che viene mostrata sulla finestra del browser quando l'utente naviga sul sito. Ma come è possibile creare e inserire questa icona su un sito WordPress?

Vediamo come creare una favicon tramite il servizio offerto da favicon.cc e successivamente come inserirla sul sito WordPress senza l'utilizzo di plugin esterni.

creare favicon wordpress

Su favicon.cc abbiamo tre possibilità per ottenere una favicon:

  • Create New Favicon: creare manualmente l'icona, utilizzando lo strumento di disegno di favicon.cc;
  • Import Image: importare un'immagine ed eventualmente modificarla;
  • Latest Favicons/Top Rated Favicons: possiamo scaricare le favicon condivise dagli altri utenti.


Creare una nuova favicon

 

creare favicon wordpress

Utilizzando lo strumento di favicon.cc possiamo disegnare direttamente l'icona, scegliendo i colori dalla tavolozza.

Una volta realizzata la favicon troviamo nella parte sottostante il box Preview, dove è possibile visualizzare l'anteprima della favicon e scaricarla (Download Favicon)

creare favicon wordpress 4


Importare l'immagine

Un altro metodo è quello di importare un'immagine ed elaborare successivamente la favicon.

creare favicon wordpress 5

 

Una volta scelto il file, clicchiamo sul pulsante Upload e vedremo l'immagine trasformata in favicon.

creare favicon wordpress 6

 

Caricare la favicon sul sito WordPress

Realizzata la favicon, scarichiamola sul nostro computer, selezionando Download Favicon nel box Preview.

Si tratta di un file nominato "favicon" nel formato ".ico".

creare favicon wordpress 7

 

Carichiamo quindi questo file nel percorso principale del sito WordPress.

creare favicon wordpress 8

A questo punto occorre inserire un codice in un file specifico del tema che stiamo utilizzando, in modo da richiamare il file favicon.ico.
Accediamo al file header.php del tema utilizzato (cartella wp-content/themes/ e quindi la cartella del tema); quindi inseriamo il seguente codice, subito dopo il tag <head>:

<link rel="icon" href="http://www.tuosito.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.tuosito.com/favicon.ico" type="image/x-icon" />

dove al posto di tuosito.com occorre inserire il nome del dominio del proprio sito.

creare favicon wordpress 9

Per non perdere le modifiche apportate, a seguito dell'aggiornamento del tema, è consigliabile creare un tema Child.

Tornando sul sito lato pubblico potremo così vedere la favicon sulla finestra del browser.

creare favicon wordpress

Se non dovesse essere visibile, cancelliamo le cache del browser e quindi effettuiamo un refresh della pagina.

 

Tag: favicon

Canali social WPCORSI

facebook wpcorsitwitter wpcorsicanale YouTube wordpress

 

Login or Registrati