Cos’è una favicon WordPress e come aggiungerne una: 4 metodi rapidi

Una favicon è una piccola immagine visualizzata nella scheda del browser quando un utente accede al tuo sito web di WordPress. Aiuta gli utenti a riconoscere rapidamente il tuo sito quando sono aperte più schede, in particolare se il titolo del sito non è visibile.

Questo tutorial spiegherà cos’è una favicon WordPress, la sua importanza e come crearne una. Esploreremo anche diversi modi per aggiungerne una al tuo sito web, così potrai sceglierne una in base alle tue preferenze.

Una favicon aiuta gli utenti a gestire più schede e aumenta la visibilità del tuo sito web nelle pagine dei risultati dei motori di ricerca (SERP). Questa icona accompagna l’URL del tuo sito, consentendo agli utenti di identificare rapidamente la pagina web.

Questa immagine viene visualizzata anche nelle schermate iniziali degli smartphone degli utenti come icona dell’app quando aggiungono la tua pagina web ai preferiti sul loro dispositivo. Una favicon distintiva non solo rende il tuo sito più professionale, ma contribuisce anche a rafforzare il branding e l’identità del sito.

Come generare un’immagine favicon

Per creare una favicon per WordPress, puoi utilizzare qualsiasi software di grafica o uno strumento online come Real Favicon Generator. La scelta dipende dal tuo livello di esperienza con i concetti di visual design e dalla tua capacità di utilizzare questi strumenti.

Quindi, considera quanto segue:

• Risoluzione. Poiché l’icona appare solo nelle SERP e nelle schede del browser, potrebbe non essere necessaria un’immagine ad alta risoluzione. La dimensione ideale per la favicon di WordPress è 512 x 512 pixel.
• Proporzioni. La favicon sul tuo sito WordPress deve essere visualizzata correttamente in proporzioni 1:1. In caso contrario, potrebbe essere ritagliata o deformata, compromettendo l’aspetto della pagina web.
• Palette dei colori. L’utilizzo di uno sfondo trasparente farà risaltare di più la favicon, soprattutto se utilizzi elementi o icone bianchi. Ricordati di utilizzare la stessa palette dei colori del tuo brand per mantenere un’identità coerente con il sito.
• Formato del file. Il formato PNG è necessario se il file della favicon del tuo sito web WordPress contiene uno sfondo trasparente. In alternativa, puoi utilizzare estensioni come ICO, JPEG o GIF supportate da WordPress.
• Requisiti dei motori di ricerca. L’icona del tuo sito WordPress deve rispettare le linee guida di Google per le favicon per essere visualizzata correttamente nelle SERP.

I passaggi per creare una favicon per WordPress variano notevolmente a seconda del software grafico utilizzato e dell’immagine desiderata. Se preferisci una soluzione più semplice, usa il generatore di loghi con AI di Hostinger per generare l’immagine gratuitamente!

I metodi per aggiungere la favicon a WordPress

Questa sezione ti mostrerà quattro metodi comuni per aggiungere una favicon personalizzata al tuo sito web di WordPress. Poiché il risultato è lo stesso, scegline uno in base alle tue preferenze ed esigenze.

1. Usa l’editor a blocchi Gutenberg

Il metodo più semplice per aggiungere una favicon al tuo sito di WordPress è usare l’editor Gutenberg. Tieni presente che questa funzionalità è disponibile solo per i temi a blocchi e per WordPress 5.9 o le versioni più recenti.

Ecco come fare:

1. Accedi alla dashboard di WordPress → Aspetto → Editor.
2. Passa il mouse sull’area in cui desideri posizionare l’icona e clicca sull’icona più (+). Puoi posizionarla ovunque, ma ti consigliamo uno degli angoli dell’intestazione.
3. Cerca e seleziona il blocco Icona del sito.
4. Passa il mouse sul blocco e clicca sull’icona Carica.

5. Carica il file della tua favicon o selezionane uno dalla Libreria multimediale di WordPress. Clicca su Seleziona per confermare.

6. Clicca sulla favicon e accedi alla sezione delle impostazioni del blocco nella barra laterale destra. Se non vedi l’opzione, clicca sul pulsante Impostazioni in alto a destra sullo schermo.
7. Dalla barra laterale, attiva la funzione Usa come icona del sito.

8. Clicca su Salva in alto a destra per applicare le modifiche.

Quando visiti il ​​tuo sito web, dovresti vedere la nuova favicon al posto del logo predefinito di WordPress.

2. Accedi e configura tramite WordPress Customizer

Per gli utenti del tema classico, è possibile aggiungere una favicon utilizzando la funzionalità Customizer di WordPress. Questo metodo è possibile solo se si utilizza WordPress 4.3 o le versioni successive.
Ecco come fare:

1. Dalla dashboard di WordPress, vai su Aspetto → Customizer. Se non vedi l’opzione, aggiungi wp-admin/customize.php all’URL del tuo sito web per aprirlo manualmente.
2. Vai alla barra laterale sinistra → Identità del sito. Clicca sul pulsante Seleziona icona del sito.

3. Carica la tua immagine o selezionala dalla Libreria Multimediale. Clicca su Seleziona per confermare.
4. Regola le dimensioni della favicon in base alle tue esigenze e clicca su Ritaglia immagine. Per utilizzare le impostazioni predefinite, seleziona Ignora ritaglio.
5. Ora dovresti vedere l’anteprima della favicon del tuo sito web nella sezione Icona Sito della barra laterale. Per salvare le modifiche, fai click su Pubblica.

3. Usa il plugin RealFaviconGenerator

Se desideri maggiori opzioni di personalizzazione e anteprime, utilizza un plugin di terze parti per impostare una favicon su WordPress. Esistono diverse opzioni, ma noi consigliamo Favicon by RealFaviconGenerator poiché è la più utilizzata.

Dopo aver installato e attivato il plugin, segui questi passaggi per creare e aggiungere una nuova favicon:

1. Dalla dashboard di amministrazione di WordPress, vai su Aspetto → Favicon.
2. Clicca su Seleziona dalla libreria multimediale e carica una nuova immagine, oppure selezionane una esistente dalla libreria di WordPress.

3. Clicca su Genera favicon e il plugin ti reindirizzerà a una pagina separata.
4. Se desideri mantenere l’immagine predefinita, seleziona l’opzione Usa l’immagine originale così com’è. In caso contrario, modifica impostazioni come il colore dello sfondo, il raggio e le dimensioni dell’immagine.

5. Scorri verso il basso fino alle Opzioni del Generatore di Favicon e clicca su Genera le tue Favicon e il codice HTML per confermare.

Ecco fatto! Verrai reindirizzato al menu Favicon nella dashboard di WordPress. Clicca sul pulsante Controlla la tua favicon per verificare che l’icona del tuo sito funzioni correttamente. Per sostituire quella attuale, ripeti semplicemente i passaggi precedenti.

Ricorda che questo plugin deve rimanere in esecuzione per visualizzare la favicon. Se lo disattivi o lo disinstalli, l’icona del tuo sito web non verrà più visualizzata.

Aggiorna regolarmente il plugin per evitare rischi per la sicurezza e bug. Per semplificare l’operazione, gli utenti dell’hosting di WordPress gestito da Hostinger possono abilitare la funzione di aggiornamento automatico nell’hPanel.

4. Modifica manualmente i file del tema

Puoi aggiungere una favicon al tuo sito caricando manualmente l’immagine nella cartella principale di WordPress e modificando il file del tema. Poiché questo metodo può essere un po’ complesso, lo consigliamo a sviluppatori o a chi ha esperienza di programmazione.

Prima di farlo, crea e attiva un tema figlio per garantire che il codice della tua favicon rimanga intatto dopo un aggiornamento. Quindi, segui questi passaggi:

1. Apri il sito web Real Favicon Generator, clicca su Seleziona l’immagine per la tua Favicon e carica il file favicon dal tuo computer.
2. Scorri fino alla sezione Opzioni generatore favicon e clicca sulla scheda Percorso. Scegli dove vuoi posizionare l’immagine favicon. Idealmente, dovresti scegliere la directory principale.

3. Clicca su Genera le tue favicon e il codice HTML.
4. Verrai reindirizzato alla pagina del manuale di installazione. Clicca sul pulsante Pacchetto favicon per scaricare i file della favicon.
5. Copia il frammento di codice e conservalo in un luogo sicuro, ad esempio in un file TXT. In alternativa, tieni aperta questa scheda perché ci servirà in seguito.

Ora che i file e il codice sono pronti, aggiungili al tuo sito WordPress. Ecco come fare:

1. Accedi alla directory principale del sito public_html usando un client File Transfer Protocol (FTP) come FileZilla o il file manager del tuo fornitore di hosting.
2. Carica ed estrai l’archivio scaricato nella directory public_html. Ricorda che public_html deve contenere solo i file delle favicon, non la cartella.
3. Inserisci il seguente URL nel tuo browser web per confermare che WordPress possa leggere la tua favicon. Sostituisci domain.tld con il tuo nome di dominio effettivo:

domain.tld/favicon.ico

4. Apri la dashboard di WordPress e vai su Strumenti → Editor file tema.
5. Dal menu File del tema a destra, seleziona header.php. Se il tuo tema non lo contiene, modifica il file functions.php.
6. Aggiungi il codice HTML di Real Favicon Generator in fondo al file, dopo il tag ?>. Nel nostro caso, lo snippet si presenta così:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#da532c">

<meta name="theme-color" content="#ffffff">

7. Clicca su Aggiorna file per salvare le modifiche.

Per rimuovere la favicon personalizzata, elimina il codice dal file del tema e rimuovi i file dell’immagine dalla directory principale di WordPress.

Conclusioni

Una favicon di WordPress è una piccola immagine che appare nella scheda del browser di un utente quando accede al tuo sito web. Aiuta a distinguere le schede e a rafforzare il riconoscimento del brand.

Puoi creare una favicon utilizzando un software di grafica o uno strumento web come Real Favicon Generator. Ricorda che l’immagine deve essere quadrata, di almeno 512 x 512 pixel e rispettare le linee guida dei motori di ricerca.

Il modo più semplice per aggiungere una favicon al tuo sito web è utilizzare il blocco Icona del sito nell’editor Gutenberg. Se usi i temi classici, utilizza la funzionalità Customizer di WordPress nel menu Aspetto.

In alternativa, puoi usare un plugin come Real Favicon Generator e caricare l’immagine tramite l’impostazione Aspetto. Gli sviluppatori possono anche farlo manualmente caricando l’icona nella directory principale di WordPress e aggiungendo codice HTML al file PHP del tema.

FAQ sulle favicon di WordPress