Le Favicon sono quelle piccole icone che appaiono accanto ai nomi dei siti web nelle schede del browser. Tuttavia, anche se è da lì che hanno avuto origine, le favicon di WordPress vengono utilizzate anche in altri posti come i segnalibri del browser, i pulsanti della schermata iniziale di iOS e altro ancora.

Per questo motivo, la favicon è una parte importante del vostro brand. Se utilizzata correttamente, la vostra favicon o “icona del sito” può aiutare gli utenti a identificare facilmente la vostra azienda. Può aiutarvi ad aumentare il riconoscimento del brand e persino a migliorare la User Experience (UX) del sito.

In questo articolo scopriremo i vantaggi dell’utilizzo di una favicon in un sito WordPress. Ma vi spieghiamo anche come crearne una e vi illustriamo tre semplici opzioni per aggiungerla al vostro sito.

Infine, concludiamo l’articolo con alcuni consigli e best practice per WordPress. Cominciamo!

I Vantaggi di una Favicon in WordPress

Se avete mai avuto troppe schede aperte contemporaneamente (colpevole!), potete probabilmente apprezzare l’utilità di una favicon. Una favicon permette agli utenti di identificare rapidamente il vostro sito web quando hanno più schede aperte nel loro browser:

La favicon di Kinsta nel browser Chrome

La favicon di Kinsta nel browser Chrome

A seconda del numero di schede aperte, il titolo del sito potrebbe non essere sempre visibile. Pertanto, l’aggiunta di una favicon può aiutare a migliorare l’UX per i tuoi visitatori.

Oltre a migliorare la riconoscibilità del brand, l’utilizzo di una favicon in WordPress può anche far apparire il vostro sito più professionale e credibile. A sua volta, questo può contribuire ad aumentare la fiducia dei clienti.

Inoltre, se qualcuno salva il vostro sito web nella schermata iniziale del proprio dispositivo mobile, la vostra favicon apparirà come icona. L’utilizzo del logo del vostro brand o di immagini simili può contribuire a rendere il vostro sito più riconoscibile e, nel complesso, a creare un’estetica coerente.

Vi presentiamo le favicon, alias le piccole icone accanto al nome di un sito in una scheda del browser. ✨ In questa guida scoprirete che è essenziale per il branding ed è facile da creare! 😊Click to Tweet

Come Creare una Favicon per WordPress

Se avete già una favicon siete pronti per ad utilizzarla (la maggior parte delle aziende utilizza il proprio logo o una sua variante) e potete saltare direttamente alla sezione successiva. Se non ce l’avete ancora, ecco come creare la vostra immagine della favicon.

In passato, per la vostra favicon dovevate utilizzare un file ICO specifico. Oggi, invece, tutti i browser moderni supportano favicon in formato ICO, PNG e GIF. Anche il JPEG è ampiamente supportato (si legga al riguardo: JPG vs JPEG), ma non in tutte le versioni di Internet Explorer, il che lo rende meno ideale per l’impiego come favicon.

Se avete familiarità con Photoshop, potete utilizzarlo per creare manualmente una favicon. Tuttavia, spesso è più facile utilizzare uno strumento di base basato su cloud per creare l’icona della favicon a partire da un’immagine esistente.

RealFaviconGenerator (la versione cloud-based del plugin di cui parleremo più avanti) è un’ottima opzione perché:

Altri generatori di favicon utili sono:

Per utilizzare RealFaviconGenerator, iniziate col caricare l’immagine che volete utilizzare cliccando su Select your Favicon image:

Caricare l'origine di una favicon su RealFaviconGenerator

Caricare l’origine di una favicon su RealFaviconGenerator

Nella schermata successiva, potete configurare i dettagli specifici del proprio set di favicon (se lo desiderate). Quando avete finito, scorrete fino in fondo e fate clic su Generate your Favicons and HTML code:

La schermata Favicon Generator Options di RealFaviconGenerator

La schermata Favicon Generator Options di RealFaviconGenerator

Nella pagina successiva, fate clic su Favicon package per scaricare le vostre favicon:

La schermata dove scaricare il pacchetto di Favicon

La schermata dove scaricare il pacchetto di Favicon

Ricordatevi di lasciare aperta questa pagina se volete aggiungere manualmente la favicon al vostro sito.

Suggerimenti per la Creazione di una Favicon per WordPress

Ci sono alcuni suggerimenti per il design e la formattazione che vale la pena di citare e valutare prima di creare una favicon. La cosa più importante è che la dimensione consigliata per le favicon è di 512×512 pixel.

Sebbene la vostra favicon per WordPress sarà un quadrato perfetto, potete anche utilizzare un’immagine rettangolare e ritagliarla prima o dopo averla caricata su WordPress. WordPress è dotato di una funzionalità di ritaglio integrata per le icone del sito, se le aggiungete tramite il Customizer (cosa che vi spiegheremo a breve).

Inoltre, è importante notare che la vostra favicon sarà visualizzata come un quadrato 16×16 px. Pertanto, dovreste scegliere un’immagine che abbia un bell’aspetto una volta che sia stata ridotta a quelle dimensioni. Anche se verrà visualizzata a quelle dimensioni, dovrebbe comunque avere un’altezza e una larghezza di almeno 512 px.

Infine, è un’idea intelligente rivedere alcune delle linee guida di Google per la creazione e l’utilizzo di favicon. Questo aiuterà a garantire che la vostra icona venga visualizzata in modo ottimale nei motori di ricerca e nelle schede del browser.

Come Aggiungere una Favicon al vostro Sito WordPress (3 Soluzioni Facili)

Una volta che avete la vostra favicon, siete pronti ad aggiungerla al vostro sito WordPress. Diamo un’occhiata a tre possibili metodi.

1. Utilizzare il Customizer di WordPress per Caricare la Vostra Favicon

A partire da WordPress 4.3, tutti i siti WordPress includono una funzione per l’icona del sito che rende facile caricare e ritagliare un’immagine da utilizzare come favicon. Per la maggior parte degli utenti, questo è il metodo più semplice e veloce per aggiungere una favicon a WordPress.

Tutto ciò di cui avrete bisogno è un’immagine di almeno 512×512 pixel. WordPress si occuperà del resto. Per iniziare, andare su Aspetto → Personalizza nella bacheca di WordPress:

Il menu Aspetto in WordPress

Il menu Aspetto in WordPress

Da lì, navigate fino alla scheda Identità del sito:

L'opzione

L’opzione “Site Identity” nel Customizer di WordPress

Quindi, cercate in basso la sezione Icona del sito, e fate clic sul pulsante Seleziona l’icona del sito:

Il pulsante

Il pulsante “Seleziona l’icona del sito” nel Customizer di WordPress

Si aprirà la normale interfaccia della Media Library di WordPress. Potete scegliere un’immagine esistente nella vostra Libreria Media o caricarne una nuova. Se avete utilizzato RealFaviconGenerator per creare la vostra favicon, assicuratevi che il pacchetto che avete scaricato sia decompresso.

Una volta che avete trovato l’immagine che vi piace, cliccateci sopra e scegliete Seleziona nell’angolo in basso a destra:

Selezionare l'immagine della favicon in WordPress

Selezionare l’immagine della favicon in WordPress

Se la vostra immagine non è già un quadrato perfetto (ad esempio 512×512 px), nella schermata successiva WordPress vi darà la possibilità di ritagliarla.

Utilizzate la casella per evidenziare la porzione di immagine che volete utilizzare per la vostra icona. Potete vedere un’anteprima di come apparirà la vostra immagine ritagliata sul lato destro dell’interfaccia.

Una volta che siete soddisfatti di come appaiono le cose, fate clic su Ritaglia Immagine per concludere l’operazione:

Ritagliare l'immagine della favicon in WordPress

Ritagliare l’immagine della favicon in WordPress

Questo è tutto! Tutto quello che dovete fare è selezionare Salva e Pubblica per mettere in linea la vostra favicon. Se mai vorrete cambiare la vostra favicon in futuro, potete tornare a questa interfaccia.

2. Installare un Plugin per Aggiungere la Vostra Favicon di WordPress

Se preferite un plugin alla funzionalità nativa delle icone del sito WordPress, potete utilizzare un popolare plugin gratuito chiamato Favicon di RealFaviconGenerator (lo strumento basato sul cloud di cui abbiamo parlato prima).

Questo plugin è semplice da usare quanto il Customizer nativo di WordPress. Tuttavia, offre opzioni di compatibilità aggiuntive per vari dispositivi e icone delle app. Per utilizzarlo, installate e attivate il plugin gratuito dalla vostra bacheca di WordPress:

Il plugin WordPress Favicon di RealFaviconGenerator

Il plugin WordPress Favicon di RealFaviconGenerator

Una volta attivato il plugin, andate su Aspetto → Favicon per creare il vostro set di favicon. Tutto quello che dovete fare è selezionare o caricare un’immagine che sia almeno 70×70 px (idealmente 260×260 px):

Sei alle prese con problemi di downtime e WordPress? Kinsta è la soluzione di hosting progettata pensando alle prestazioni e alla sicurezza! Scopri i nostri piani

Aggiungere una favicon in WordPress con un plugin

Aggiungere una favicon in WordPress con un plugin

Dopo aver selezionato la vostra immagine, fate clice su Generate favicon. Quando fate clic su quel pulsante, il plugin vi fa uscire dal vostro sito WordPress e vi porta al sito RealFaviconGenerator.

Nella parte inferiore del sito, scorrete verso il basso per selezionare Generate your Favicons and HTML code (vedi la sezione precedente). Durante l’operazione, Real Favicon Generator vi rimanderà alla vostra bacheca di WordPress:

La schermata che consente di vedere in anteprima la vostra favicon di WordPress

La schermata che consente di vedere in anteprima la vostra favicon di WordPress

Dopo di che, la vostra favicon sarà configurata e pronta ad andare in linea. Potete visualizzare le anteprime su diversi dispositivi nell’interfaccia del plugin.

3. Aggiungere Manualmente la Vostra Favicon via FTP

Se preferite fare le cose manualmente, potete aggiungere una favicon al vostro sito WordPress tramite File Transfer Protocol (FTP) o File Manager, se il vostro host utilizza cPanel.

Se scegliete questo metodo, dovrete anche creare l’immagine della favicon. Potete farlo seguendo i passaggi che abbiamo descritto in precedenza.

Per questa dimostrazione utilizzeremo il pacchetto che abbiamo creato e scaricato da RealFaviconGenerator, le istruzioni valgono anche se avete utilizzato uno strumento diverso per creare la vostra favicon.

Per aggiungere manualmente una favicon al vostro sito WordPress, dovrete:

  1. Accedere ai file del vostro sito, sia tramite un client FTP che il File Manager nel vostro cPanel di hosting.
  2. Individuare la directory principale del sito e caricare il contenuto del vostro pacchetto della favicon (favicons.zip)

I file dovrebbero essere nella stessa directory delle cartelle wp-admin e wp-content. Successivamente, prendete il codice fornito da RealFaviconGenerator in precedenza, e:

L’utilizzo del plugin Insert Headers and Footers è ottimale perché assicura che non si perda la favicon se si cambiano i temi di WordPress.

Installare e attivare Insert Headers and Footers. Poi andate in Impostazioni → Insert Headers and Footers e incollate il codice nella sezione Scripts in Header:

Aggiungere il codice della favicon utilizzando il plugin Insert Headers and Footers

Aggiungere il codice della favicon utilizzando il plugin Insert Headers and Footers

Assicuratevi di salvare le modifiche. A questo punto avete finito!

Altri Suggerimenti su Come Utilizzare le Favicon in WordPress

Se volete che ogni sito del vostro network multisita abbia una favicon unica, il modo più semplice è utilizzare un plugin per favicon come quello descritto sopra. Anche se è possibile modificare i file del tema in modo da abilitare favicon uniche per ogni sito della rete, la procedura è molto più complicata rispetto all’utilizzo di un plugin.

Potreste anche prendere in considerazione l’utilizzo di un Content Delivery Network (CDN) per servire le vostre immagini della favicon. I tre metodi di cui abbiamo parlato in questo post permettono di memorizzare tutte le vostre immagini delle favicon sul vostro server. Tuttavia, potete ottimizzare ancora di più il vostro sito utilizzando un CDN per servire quelle immagini.

Quando installate Cloudflare o un servizio come KeyCDN, i browser dei visitatori caricheranno la vostra favicon dal vostro CDN al posto del server del vostro sito. Se utilizzate un plugin come CDN Enabler, questo dovrebbe riscrivere automaticamente l’URL della favicon di WordPress in modo che funzioni con i metodi sopra descritti.

Avete presente quella piccola icona accanto al nome del vostro sito web in una scheda del browser? È una favicon, e questa guida vi aiuterà a crearne una vostra 😄Click to Tweet

Riepilogo

Una favicon di WordPress può contribuire ad aumentare la riconoscibilità del vostro brand e a migliorare l’UX per i visitatori del vostro sito web. Fortunatamente, avete diverse opzioni tra cui scegliere, il che vi permette di aggiungere facilmente una favicon in WordPress.

I tre metodi principali che potete seguire per aggiungere una favicon al vostro sito WordPress sono i seguenti:

  1. Utilizzare il Customizer di WordPress per caricare l’icona di un sito.
  2. Installare un plugin, come Favicon di RealFaviconGenerator.
  3. Aggiungere manualmente una favicon tramite un client FTP o dal vostro File Manager.

Se ti è piaciuto questo tutorial, allora apprezzerai molto il nostro supporto. Tutti i piani di hosting di Kinsta includono supporto 24/7 da parte dei nostri sviluppatori e tecnici veterani di WordPress. Chatta con lo stesso team che supporta i nostri clienti Fortune 500. Scopri i nostri piani