Come Creare un Favicon Personalizzato su WordPress

Se stai creando un sito web per podcast o un blog personale, renderlo memorabile e facile da usare può essere una sfida. Mentre configuri le impostazioni del tuo sito web, è essenziale stabilire la tua identità di marca e iniziare a costruire una solida reputazione.

Un modo semplice per creare una presenza online professionale è progettare un favicon personalizzato. Quando aggiungi il tuo logo alle schede del browser e ai risultati di ricerca, puoi aumentare la riconoscibilità del marchio e i Tassi di Clic (CTR).

In questo post, ti forniremo una panoramica sui favicon e sul perché dovresti considerare di aggiungerne uno al tuo sito WordPress. Successivamente, ti mostreremo come creare un favicon personalizzato. Iniziamo!

Introduzione ai Favicons

Un favicon, o ‘icona preferita’, è un’immagine di 16×16 pixel che aiuta a personalizzare il contenuto del tuo sito web. È stato creato nel 1999 per aiutare a differenziare tra le pagine web segnalibro.

Attualmente, puoi vedere le favicon nella parte superiore di una scheda del browser sopra la barra degli indirizzi. Qui, i visitatori vedranno una piccola icona di branding:

Se un sito web non ha un favicon designato, gli utenti vedranno un’icona del browser generica al suo posto. Pertanto, molti proprietari di siti web utilizzano i favicon per rendere i loro contenuti più riconoscibili.

Potresti vedere anche i favicon nei segnalibri, nella cronologia del tuo browser o tra i risultati di ricerca di Google. Spesso, questa icona mostra agli utenti che stanno per cliccare su una risorsa credibile e nota.

Benissimo. Ora sei aggiornato sui favicon. Ora, ti mostriamo come crearne uno.

Come Creare un Favicon Personalizzato di WordPress (4 Metodi)

Per iniziare a creare la tua prima favicon, dovrai progettare l’immagine che utilizzerai. Per questo processo, ti consigliamo di usare Canva:

Canva è un software di modifica delle immagini adatto ai principianti che può creare un logo da zero. In alternativa, puoi sfogliare i suoi modelli di logo.

Qualsiasi opzione tu scelga, assicurati di progettare un’immagine quadrata. I favicons vengono tipicamente visualizzati a 16×16 pixel, ma WordPress richiede un’altezza e una larghezza di almeno 512px.

Dopo aver progettato il tuo logo come favicon, è il momento di aggiungerlo al tuo sito web! Ecco alcuni dei migliori metodi.

1. Aggiungi Un Favicon Utilizzando Il Personalizzatore Di WordPress 

Da WordPress 4.3, puoi utilizzare la funzionalità Icona del Sito per creare una favicon personalizzata. Questo è uno dei modi più semplici per caricare una favicon poiché non dovrai creare un file favicon.ico né modificare il tuo file di template.

Trova l’immagine che vuoi usare come tuo favicon. Poi, vai su Aspetto > Personalizza nel tuo dashboard di WordPress:

Questo aprirà il Personalizzatore di WordPress. Successivamente, naviga in Impostazioni > Identità del sito:

Qui, vedrai una sezione etichettata Icona del Sito. Clicca su Seleziona icona del sito e carica la tua immagine favicon:

Ritaglia l’immagine come necessario. Sul lato destro, puoi vedere un’anteprima del favicon:

Dopo aver terminato, clicca su Publish.

Aggiornamento per WordPress 6.5+

Con WordPress 6.5, c’è un nuovo modo (e più semplice che mai) per aggiungere Favicons in WordPress. Semplicemente vai alla Dashboard di WordPress, passa il mouse su Impostazioni e clicca su Generale.

Da lì, vedrai un’impostazione in alto per Icona del Sito. Semplicemente clicca sulla casella Scegli un’Icona del Sito per caricare il tuo favicon personale.

Dimensione consigliata: Rapporto di aspetto quadrato, almeno 512px x 512px.

2. Aggiungi Un Favicon Con Un Costruttore Di Pagine WordPress

Molti costruttori di pagine popolari possono aggiungere un favicon personalizzato in un processo simile. Ad esempio, Elementor dispone di una funzionalità Icone Personalizzate nelle sue Impostazioni Globali.

Prima di tutto, devi iscriverti a Elementor Pro. Questo ti permette di caricare un favicon personalizzato.

Poi, apri un post o una pagina con l’editor di Elementor:

Vai a Impostazioni Sito > Identità Sito. Qui, vedrai il nome del tuo sito e la descrizione. Ci saranno anche opzioni per caricare un logo del sito e un favicon del sito:

Passa il mouse sopra il riquadro grigio sotto Site Favicon e clicca su Choose Image. Carica il tuo favicon e seleziona Insert Media:

Dopo aver caricato il tuo favicon, vai in fondo alla schermata e clicca su Aggiorna.

3. Installa un Plugin Favicon

Uno dei modi più semplici per aggiungere un favicon al tuo sito web è con un plugin di favicon. Questa opzione potrebbe essere la migliore per le persone che non possono accedere al Personalizzatore o che desiderano un’opzione più semplice rispetto alla programmazione.

Per questo processo, ti consigliamo di utilizzare Favicon Rotator. Questo plugin gratuito per WordPress ti permette di aggiungere un’immagine favicon in pochi minuti:

Installa e attiva il plugin. Ora vai su Aspetto > Favicon:

Noterai due diverse opzioni per creare icone personalizzate. Browser Icon colloca la favicon nelle schede del browser. L’icona Touch Icon personalizzerà le favicon per i dispositivi mobili:

Clicca sull’icona Aggiungi accanto all’icona del Browser. Carica l’immagine del tuo favicon:

Se devi ritagliare, ruotare o capovolgere l’immagine, clicca su Modifica Immagine. Qui puoi modificare le dimensioni e le impostazioni delle miniature come richiesto:

Quando hai finito, seleziona Aggiungi Icona del Browser. Poi, clicca su Salva Modifiche.

4. Genera Manualmente Un Favicon

Se il tuo sito web ha una versione di WordPress o un tema più vecchio, potresti dover aggiungere manualmente una favicon tramite codice. Questo metodo può essere utile anche quando vuoi limitare il numero di plugin di terze parti sul tuo sito.

Prima di tutto, carica il tuo file immagine in uno strumento come Real Favicon Generator. Utilizzando questo software, puoi generare il codice personalizzato del tuo favicon:

Inizia cliccando su Select your Favicon image. Dopo aver caricato il tuo file immagine, Real Favicon Generator creerà un’anteprima della tua favicon:

Su questa pagina, puoi spuntare la casella che dice Usa l’immagine originale così com’è se ti piace come appare. Tuttavia, puoi anche continuare a modificare le dimensioni dell’immagine, il colore dello sfondo e il raggio dello sfondo come necessario.

Dopo aver personalizzato l’immagine, scorri fino in fondo alla pagina e clicca su Genera le tue Favicons e il codice HTML:

Questo ti mostrerà il codice per il tuo favicon. Scarica il pacchetto Favicon e copia l’HTML:

Prima di iniziare a modificare il tuo codice, ti consigliamo di eseguire un backup del tuo sito web. Questo passaggio garantisce che non perderai alcuna informazione importante a causa di errori di programmazione.

Successivamente, apri la tua Dashboard cPanel. Anche se ogni provider di hosting ha la sua dashboard, dovrai trovare il pulsante Carica File.

Con DreamHost, questo pulsante si trova nell’angolo in basso a sinistra:

Poi, carica il tuo file favicon. In alcuni casi, questo permetterà ai browser di aggiornare la tua favicon senza aggiungere codice. Tuttavia, potresti dover aggiornare il tuo file header.php.

Per fare questo, apri wp_content e clicca sul file header.php. Poi, seleziona Edit:

Incolla il codice favicon dal Generatore di favicon. Poi, potresti dover svuotare la Cache del tuo browser o riavviare il browser per vedere la nuova favicon sul tuo sito web.

Elementi Di Un Brand Forte

Un buon logo può essere la chiave per rendere la tua attività unica e memorabile. Quando trasformi questo logo in un favicon, puoi assicurarti che i visitatori online riconoscano i tuoi contenuti di marca.

Per rivedere, ecco i migliori metodi per aggiungere un favicon al tuo sito web WordPress:

1. Aggiungi un favicon utilizzando il personalizzatore di WordPress.
2. Usa un costruttore di pagine come Elementor.
3. Installa un plugin per favicon come Favicon Rotator.
4. Codifica manualmente un favicon.

Hai bisogno di una mano a creare il tuo sito web da zero? Da DreamHost, offriamo Servizi Professionali che includono design web personalizzato. I nostri designer professionisti possono aiutarti a creare un sito web originale, così non devi preoccuparti di piccoli dettagli come i favicon!