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:
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.
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é:
- Crea anche icone per le app.
- Fornisce icone favicon sia in formato PNG che ICO.
- Potete personalizzare la vostra favicon dopo aver caricato l’immagine.
- Tutto quello che dovete fare è incollare il codice proposto dal plugin.
Altri generatori di favicon utili sono:
- Favicon.cc, che permette di creare una favicon da zero o di caricare un’immagine esistente.
- Favicon Generator, che funziona in modo simile a RealFaviconGenerator.
Per utilizzare RealFaviconGenerator, iniziate col caricare l’immagine che volete utilizzare cliccando su Select your Favicon image:
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:
Nella pagina successiva, fate clic su Favicon package per scaricare le vostre 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:
Da lì, navigate fino alla scheda Identità del sito:
Quindi, cercate in basso la sezione Icona del sito, e fate clic sul pulsante Seleziona l’icona del sito:
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:
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:
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:
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):
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:
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:
- Accedere ai file del vostro sito, sia tramite un client FTP che il File Manager nel vostro cPanel di hosting.
- 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:
- Utilizzate un plugin come Insert Headers and Footers per aggiungerlo all’intestazione del vostro tema.
- Oppure incollatelo direttamente nella sezione <head> del vostro tema, modificando il file header.php del tema.
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:
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.
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:
- Utilizzare il Customizer di WordPress per caricare l’icona di un sito.
- Installare un plugin, come Favicon di RealFaviconGenerator.
- Aggiungere manualmente una favicon tramite un client FTP o dal vostro File Manager.
