3 semplici modi per aggiungere una favicon WordPress nel 2022 (Guida per principianti)

Pronto per imparare tutto quello che vorresti sapere sulla tua favicon di WordPress?

Se non hai familiarità, la favicon del tuo sito è quella piccola icona che appare nella scheda del tuo browser web. Ad esempio, ecco come appare la nostra favicon su HeroThemes:

Vedrai anche che alcune persone chiamano le favicon "icona del sito". Non preoccuparti: sono la stessa cosa.

In questo post imparerai:

• Perché dovresti preoccuparti di qualcosa di piccolo come la tua favicon di WordPress
• Come creare una favicon per il tuo sito WordPress (e quali dimensioni e formato utilizzare)
• Come aggiungere una favicon a WordPress utilizzando tre metodi diversi

Perché dovresti preoccuparti della tua favicon di WordPress

Lo so, lo so. Una piccola immagine che appare solo nella scheda del browser probabilmente non creerà o distruggerà la tua attività. Ma ci sono due ragioni per cui dovresti prenderti del tempo per creare una favicon per WordPress.

Innanzitutto, l'utilizzo di una favicon aiuta con il branding e fa risaltare il tuo sito nei browser dei tuoi visitatori. Ad esempio, quali schede attirano la tua attenzione nello screenshot qui sotto?

Sono HeroThemes e Twitter, giusto?

Questo è importante perché le persone amano avere più schede aperte ( no, non sei l'unico ad accumulare schede! ). Anche nel 2009, le persone avevano in media 3+ tab, con di più tra i giovani. E anche se non riesco a trovare dati più recenti, sono disposto a scommettere che la media è aumentata, non giù!

Oltre a personalizzare il tuo sito nei browser e a farlo risaltare, la tua favicon aiuta anche gli utenti mobili. Se un utente salva il tuo sito web nella schermata iniziale, la tua favicon apparirà come icona su molti dispositivi .

Se consideri quanto sia facile aggiungere una favicon di WordPress, vale sicuramente la pena dedicare alcuni minuti della tua giornata a questi vantaggi.

Come creare un'immagine favicon della giusta dimensione e formato

Prima di poter seguire le istruzioni passo passo nelle prossime sezioni su come aggiungere una favicon a WordPress, dovrai... avere effettivamente l'immagine che vuoi usare per la tua favicon!

Ciò significa che devi conoscere le dimensioni e il formato dell'immagine corretti per la tua favicon.

Con la gamma di dispositivi, questo è diventato più complicato di quanto non fosse una volta. Ma per affrontare questa complessità, ci sono anche alcuni strumenti che prenderanno una favicon iniziale e la formatteranno automaticamente per tutti i diversi dispositivi.

Quindi, per creare la tua favicon, ecco tutto ciò che ti serve:

• Un'immagine quadrata La dimensione ottimale della favicon di WordPress è 512 × 512 px, anche se qualcosa di più piccolo come 260 × 260 px è ancora accettabile. Tutti i metodi che ti mostrerò lo ridimensioneranno secondo necessità .
• Un'immagine png , che è la soluzione migliore per il web moderno.

Per creare effettivamente la tua immagine, puoi utilizzare uno strumento come Adobe Photoshop o GIMP. Oppure puoi anche usare qualcosa come Favicon.io per generare un'immagine favicon da testo o emoji.

Se hai un logo ad alta risoluzione in giro, la cosa più semplice da fare è prendere una versione quadrata del tuo logo ( è quello che usiamo in HeroThemes ).

Come aggiungere una favicon a WordPress (3 metodi)

Una volta che hai il tuo file immagine, sei pronto per aggiungere quella favicon al tuo sito WordPress.

Di seguito, ti mostrerò tre diversi modi in cui puoi aggiungere la tua favicon a WordPress. Ogni metodo è un po' diverso , però.

Per aiutarti a scegliere quello più adatto al tuo sito, ecco una breve carrellata:

• Aggiungi favicon con la funzionalità di base di WordPress : è semplicissimo e ti consente di aggiungere la tua favicon tramite il Personalizzatore di WordPress. L'unico aspetto negativo è che non aggiungerà i formati favicon per tutti i dispositivi. Per la maggior parte dei siti, però, va benissimo .
• Plugin RealFaviconGenerator WordPress : questo rende semplicissimo aggiungere una favicon per tutti i dispositivi . L'unico potenziale svantaggio è che richiede di mantenere attivo il plug-in, cosa che ad alcune persone potrebbe non piacere.
• Metodo manuale di RealFaviconGenerator : invece di utilizzare il plug-in, puoi utilizzare il sito Web di RealFaviconGenerator e aggiungere manualmente il codice. Questo metodo elimina la necessità di mantenere attivo un plug-in, ma diventa un po' più complicato perché dovrai aggiungere uno snippet di codice all'intestazione del tuo tema.

Se sei un principiante, ti consiglio di attenersi a uno dei primi due metodi. Ma gli utenti avanzati potrebbero preferire il terzo metodo.

Come aggiungere una favicon a WordPress con le funzionalità principali

Questo è davvero semplice perché utilizza una funzionalità di base di WordPress.

Per iniziare, vai su Aspetto → Personalizza nella dashboard di WordPress per accedere al Personalizzatore di WordPress:

Una volta che sei nel Customizer di WordPress, fai clic sull'opzione Identità del sito :

Quindi, trova la sezione Icona del sito e fai clic su Seleziona immagine per caricare la tua immagine favicon:

Ciò aprirà la normale libreria multimediale di WordPress in cui puoi caricare la tua immagine come faresti normalmente.

Dopo aver caricato l'immagine, fai clic sul pulsante Seleziona :

Da lì, WordPress ti darà la possibilità di ritagliare la tua immagine favicon, così come le anteprime live della tua immagine sia come browser che come app.

Regolare il ritaglio corretto e quindi fare clic su Ritaglia immagine :

E hai finito! Assicurati di fare clic sull'opzione Pubblica nella parte superiore del Personalizzatore di WordPress e la tua favicon dovrebbe essere attiva.

Come utilizzare un plug-in Favicon di WordPress (copre più dispositivi)

Ora ti mostrerò come utilizzare un plug-in favicon di WordPress per ottenere lo stesso effetto.

Ancora una volta, la differenza tra questo metodo e il precedente è che il plug-in aggiungerà favicon ottimizzate per più dispositivi. Ti offre anche un'interfaccia che ti consente di personalizzare l'aspetto della tua favicon per i diversi dispositivi.

Potrai creare favicon personalizzate per:

• iOS
• Androide
• Windows Phone
• eccetera.

Non ne hai necessariamente bisogno : si tratta più di coprire i casi limite.

Per seguire questo metodo, dovrai installare il plugin gratuito Favicon by RealFaviconGenerator.

Una volta attivato il plugin, vai su Aspetto → Favicon . Usa il pulsante Seleziona dalla libreria multimediale per caricare o selezionare la tua favicon dalla libreria multimediale di WordPress.

Quindi, fai clic su Genera favicon :

Successivamente, il plug-in ti porterà in un sito esterno dove puoi modificare l'aspetto della tua favicon per i diversi dispositivi.

Una volta terminate le modifiche, scorri verso il basso e fai clic sul pulsante Genera favicon e codice HTML :

E una volta fatto clic, verrai riportato alla dashboard di WordPress e dovresti vedere un messaggio di successo, oltre a un'anteprima della tua favicon su diversi dispositivi:

Questo è tutto! Hai finito. Assicurati solo di mantenere attivo il plug-in, altrimenti le tue favicon scompariranno.

Come aggiungere manualmente una favicon a WordPress utilizzando lo stesso strumento RealFaviconGenerator

Ancora una volta, con il metodo del plug-in sopra, dovrai lasciare il plug-in attivo per continuare a utilizzare le tue favicon.

Se questo è un problema per te, puoi anche utilizzare lo stesso strumento per fare tutto manualmente.

Il risultato finale è esattamente lo stesso, dovrai solo caricare manualmente le immagini tramite FTP e aggiungere del codice alla sezione <head> del tuo sito.

Lo suddividerò in passaggi perché è un po' più complicato...

Passaggio 1: genera il tuo pacchetto Favicon

Per iniziare, vai al sito Web di RealFaviconGenerator e fai clic su Seleziona l'immagine della favicon per caricare l'immagine della favicon:

Una volta caricata la tua immagine, vedrai la stessa interfaccia del plugin e sarai in grado di visualizzare e personalizzare la tua favicon per diversi dispositivi.

Come con il plug-in, scorri verso il basso e fai clic sul pulsante Genera favicon e codice HTML quando hai finito di apportare le modifiche:

Passaggio 2: carica il tuo pacchetto Favicon sul tuo sito web

Nella schermata successiva, fai clic sul pulsante per scaricare il tuo pacchetto Favicon :

Quindi, dovrai estrarre questo pacchetto e caricarlo nella cartella principale del tuo sito utilizzando FTP ( se non sei sicuro di cosa sia FTP, ti consiglio di attenerti al metodo del plug-in della sezione precedente ).

Assicurati di mettere tutti i file nella cartella principale, altrimenti non funzionerà.

Passaggio 3: aggiungi uno snippet di codice a <head> del tuo tema

Per finire, dovrai aggiungere lo snippet di codice da RealFaviconGenerator alla sezione <head> del tuo tema WordPress:

Oppure puoi aggiungere il seguente frammento di codice al file functions.php nel tuo tema figlio ( è necessario utilizzare un tema figlio ):

/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};

Entrambi i metodi vanno bene!

Una volta che lo fai, hai finito e la tua favicon dovrebbe iniziare a funzionare.

Aggiungi la tua favicon WordPress oggi

Bastano pochi minuti per aggiungere la tua favicon e offrire ai tuoi visitatori un'esperienza più personalizzata.

Ed ecco la cosa grandiosa:

Una volta aggiunta una favicon al tuo sito WordPress, non dovrai più pensarci!

Hai altre domande su come aggiungere una favicon WordPress? Fatecelo sapere nei commenti e vi aiuteremo!