Cerchi un modo semplice per creare e aggiungere una favicon al tuo sito WordPress?

Una favicon (site icon o icona del sito) è la piccola immagine che vedi sul lato sinistro nelle schede del browser. Per impostazione predefinita, il tuo sito includerà solo un’immagine generica, quindi spetta a te aggiungere qualcosa di personalizzato. In questo modo il tuo sito apparirà più affidabile, ti aiuterà con il tuo brand e renderà le tue pagine più facili da identificare.

In questo post, inizieremo con una rapida spiegazione del motivo per cui dovresti dedicare del tempo a creare una favicon su WordPress. Quindi ti mostreremo come crearne una e ti daremo alcuni consigli per farlo in modo efficace.

Iniziamo!

Cos’è una Favicon?

Probabilmente hai visto favicon in tutto il web, a volte senza rendertene conto. Sono icone molto piccole, di solito 16 x 16 pixel, che si trovano accanto al titolo di una pagina nella barra delle schede dei browser:

Favicon di WordPress

Queste icone del sito sono così piccole che possono sembrare elementi irrilevanti di un sito web. Certo, ora svolgono un ruolo meno importante di quanto non avessero nell’era precedente a Google Analytics quando erano praticamente l’unica misura affidabile del traffico web, poiché potevano aiutarti a calcolare il numero di utenti che avevano aggiunto ai segnalibri una pagina specifica.

Tuttavia, le favicon servono ancora come un importante riconoscimento del tuo brand all’interno di browser, segnalibri, barre dei collegamenti e talvolta anche campi URL. Possono essere utilizzate come icona di collegamento del tuo sito anche su dispositivi intelligenti.

In breve, se ti interessa l’esperienza utente e desideri mantenere il pieno controllo su come viene brandizzata la tua attività, ti consigliamo di utilizzare una favicon sul tuo sito web. Inoltre, è uno degli elementi di branding più facili da implementare!

Perché dovresti aggiungere una favicon al tuo sito WordPress?

Una favicon ha un ruolo fine ma importante da svolgere nel brand del tuo sito web. I visitatori del sito sapranno esattamente dove si trovano quando vedranno la tua favicon, e saranno sicuri di essere nel posto giusto. Trovare modi creativi e fini per brandizzare il tuo sito non è il più semplice dei compiti, quindi sarebbe un errore non aggiungerne una.

Le favicon svolgono un altro ruolo molto importante sul tuo sito: migliorare l’esperienza dell’utente. Abbelliscono una noiosa barra degli URL e alcuni browser le mostrano quando crei un collegamento al sito web corrispondente sul tuo desktop o dispositivo mobile.

Uno degli obiettivi di ogni sito web dovrebbe essere quello di incoraggiare i visitatori a fare visite ripetute. Le favicon ti aiutano a fare proprio questo, rafforzando il tuo brand e migliorando l’esperienza utente in WordPress.

Come creare una favicon

Esistono diversi modi per creare una favicon per il tuo sito web. 

Puoi creare la tua favicon a mano, utilizzando uno dei tanti strumenti come Favicon.cc e Faviconer. Anche piattaforme come Adobe Photoshop e GIMP sono utili per creare icone del sito di alta qualità.

Oppure puoi utilizzare un plugin per WordPress. Questo tipo di strumento può aiutarti a creare anche alcuni dei file aggiuntivi necessari per visualizzare correttamente le site icon su determinati dispositivi.

In realtà creare una favicon non è così difficile ed è un gioco da ragazzi in particolare per i grafici creativi. Il processo può essere ridotto ai due passaggi seguenti.

Passaggio 1: scegli una dimensione adatta per la tua Favicon

Le favicon hanno dimensioni minime di 16 x 16 pixel, e dimensioni massime fino a 512 x 512 pixel. Pertanto, dovrai prendere una decisione sui dispositivi e le risoluzioni che desideri soddisfare.

Ecco una rapida ripartizione di alcune dimensioni consigliate per le favicon:

  • 16px: questa è una dimensione di uso generale per tutti i browser e rappresenta la dimensione minima.
  • 24px: questa dimensione viene utilizzata in Internet Explorer 9.
  • 32px: diversi strumenti utilizzano questa dimensione, come una nuova scheda in Internet Explorer, un pulsante sulla barra delle applicazioni in Windows e la barra laterale aggiungi a elenco di lettura di Safari.
  • 57px: rappresenta le dimensioni per una schermata principale iOS standard (cioè non Retina).
  • 72px: questa dimensione corrisponde a un’icona della schermata iniziale di un iPad standard.
  • 114px: i dispositivi Apple più moderni utilizzano queste dimensioni, poiché i display Retina sfruttano le dimensioni doppie per una visualizzazione più nitida.

Ovviamente, può avere un senso creare favicon per tutte queste dimensioni se ti aspetti visitatori che utilizzano tutti i diversi tipi di dispositivi. Altrimenti puoi semplicemente scegliere le dimensioni che corrispondono alle piattaforme a cui ti rivolgi e rinunciare al resto.

Passaggio 2: progetta la tua icona del sito e salvala in un formato appropriato

Creare la tua favicon richiede un pò di tempo. Il modo in cui lo fai è soggettivo, ovviamente, e ci sono diversi metodi che puoi utilizzare.

Se non hai uno strumento preferito da utilizzare, parleremo presto di alcune opzioni facili da usare. Nel frattempo, ti consigliamo di tenere a mente le seguenti regole pratiche quando crei la tua favicon:

  • Mantieni il design semplice, poiché spesso verrà visualizzata in dimensioni così ridotte che i dettagli complessi andranno persi.
  • Considera la tua favicon un’estensione del tuo brand. In altre parole, utilizza gli stessi schemi di colori, font e grafica del logo principale o di altri elementi chiave del brand.
  • Crea prima la dimensione più grande di cui hai bisogno, quindi ridimensiona la favicon se necessario.

Una volta pronto il tuo design, dovrai salvarlo nel formato corretto. Molti software grafici consentono di utilizzare l’ estensione .ico e il file di base dovrebbe avere il nome favicon.ico . Verrà utilizzato questo file quando non sarà possibile trovare nessun’altra icona. Per favicon di diverse dimensioni, puoi inserire le stesse dimensioni nei nomi dei file .

Strumenti per la creazione di Favicon

Se vuoi creare rapidamente una site icon, sono diversi gli strumenti che puoi utilizzare. Diamo un’occhiata ad alcune delle opzioni più popolari..

Favicon.cc è uno dei principali strumenti per creare favicon ed è molto semplice da usare. Scegli semplicemente un colore, dipingi ogni pixel quindi fai clic sul pulsante Download :

la homepage di favicon.cc

Anche Faviconer è un’ottima scelta che vanta un’interfaccia più gradevole e una migliore usabilità complessiva:

Faviconer

Questo strumento è probabilmente più potente del precedente. Puoi creare un file ad alta risoluzione per i display moderni e persino caricare la tua immagine.

Infine, ci sono anche strumenti come Dynamic Drive FavIcon Generator e RealFaviconGenerator che ti consentono di convertire un’immagine preesistente in una favicon. Entrambi offrono flessibilità durante la conversione della tua favicon nelle diverse dimensioni.

Plugin generatore di Favicon

Le favicon devono essere salvate in un tipo di file specifico, non comunemente utilizzato per le immagini web. Ecco perché un generatore di Favicon può essere utile per convertire le tue immagini in file “.ico” che è il tipo di file utilizzato specificamente per le icone.

A seconda del generatore, puoi convertire testo, emoji e altri tipi di immagine nel tipo di file corretto per la visualizzazione delle favicon. Di seguito, troverai due plugin che possono aiutarti a collegare facilmente il tuo sito web WordPress ad alcuni popolari generatori di favicon. 

1. RealFaviconGenerator

RealFaviconGenerator ti consente di creare icone del sito adattabili a tutte le piattaforme. In pochi secondi, puoi creare una favicon che funziona bene con una varietà di sistemi operativi e browser.

Piuttosto che creare copie di immagini a risoluzioni diverse, questo generatore crea effettivamente le dimensioni specifiche necessarie per ciascuna piattaforma. Ciò significa che non dovrai conoscere le ultime linee guida sulla compatibilità per ogni dispositivo su cui vuoi visualizzare la tua site icon.

2. Heroic Favicon Generator

Heroic Favicon Generator converte le immagini della tua libreria multimediale in favicon compatibili su molti dispositivi. È uno strumento semplice da usare che può accelerare notevolmente il processo ed è un’ottima opzione se desideri una soluzione semplice senza inutili fronzoli.

Questa è una soluzione utile per cambiare le tue favicon su siti che utilizzano vecchie versioni di WordPress, dove non è disponibile il Customizer. 

Come aggiungere una favicon a WordPress

Se stai cercando modi per aggiungere una favicon al tuo sito WordPress le soluzioni migliori sono due:

  • Usare il customizer di WordPress . Se il tema che stai utilizzando ha questa opzione, puoi facilmente aggiungere icone del sito tramite il customizer . Vai su Aspetto> Personalizza nella dashboard del tuo sito, quindi vai a Identità del sito> Icona del sito .
  • Utilizzare un plugin . Se stai utilizzando un tema che non ti consente di inserire una favicon tramite il Customizer, o che non ha un pannello delle opzioni integrato, puoi inserire una favicon tramite un plugin. RealFaviconGenerator ad esempio è uno dei plugin gratuiti e facili da usare che abbiamo menzionato in precedenza. Questo approccio aiuta a garantire che la tua favicon sia del tipo di file corretto e soddisfi vari standard specifici del dispositivo. 

Diamo un’occhiata più da vicino a come puoi aggiungere una favicon a WordPress con questi metodi. 

Utilizzare il customizer di WordPress

Come accennato in precedenza, se il tuo tema supporta le favicon, puoi navigare dalla dashboard di WordPress su Aspetto> Personalizza> Identità del sito> Icona del sito : 

aggiungere la favicon con ilcustomizer di WordPress

Noterai che ti vengono dati consigli sulle dimensioni per l’icona del tuo sito. È meglio creare l’immagine che desideri utilizzare in anticipo e assicurarsi che sia dimensionata in modo appropriato. 

Dopo averlo fatto, puoi fare clic su Seleziona l’icona del sito e caricare il tuo file: 

Anteprima della favicon dal customizer di WordPress

Una volta che l’icona è nella libreria multimediale, vedrai un’anteprima di come apparirà in una scheda del browser o come icona di un’app mobile. Puoi modificare nuovamente la tua icona in un secondo momento, se lo desideri, seguendo gli stessi passaggi. 

Utilizzo di un plugin per WordPress

L’utilizzo di un plugin è uno dei modi più efficaci per gestire le favicon, indipendentemente dal tema. Ciò è particolarmente vero se si desidera offrire un’esperienza personalizzata in base al dispositivo dell’utente.

Uno dei plugin più conosciuti per questo utilizzo è All In One Favicon : 

La versione gratuita disponibile nella directory dei plugin di WordPress è piuttosto affidabile. Offre agli utenti opzioni sia front-end che back-end, nonché impostazioni generali: 

impostazioni generali del plugin

Questo plugin ha anche un’interfaccia utente di facile navigazione da dove puoi caricare le tue immagini. Accetta tre tipi di immagini, GIF, ICO e PNG. 

L’icona del sito non compare?

Se la tua favicon non viene visualizzata sul tuo sito web WordPress dopo averla aggiunta, è probabile che tu abbia commesso uno di questi errori comuni:

  • Hai utilizzato un formato immagine non corretto . La maggior parte dei browser moderni supporterà l’icona del sito nel formato GIF o PNG. Tuttavia, alcuni browser meno recenti non lo fanno. La maggior parte dei browser moderni cerca prima il file favicon.ico nella radice del tuo dominio, quindi è meglio attenersi al formato file ICO per evitare errori di visualizzazione.
  • La tua favicon non si adatta adeguatamente alle dimensioni . Il formato file ICO memorizza più versioni di un’immagine in diverse dimensioni e risoluzioni, per tenere conto degli utenti che le visualizzano su dispositivi diversi. Tuttavia, è generalmente una buona pratica caricare più dimensioni di favicon.ico . Ciò contribuirà a garantire la migliore esperienza utente, indipendentemente dal dispositivo in uso. 

Se stai utilizzando un plugin generatore di favicon e riscontri ancora problemi, puoi verificare che sia aggiornato e compatibile con il tema e la versione corrente di WordPress.

Conclusione

Può succedere di concentrarsi troppo su grandi aspetti della progettazione del sito web, come la scelta di un tema e la creazione di pagine, da dimenticare i dettagli più piccoli. Creare e aggiungere una favicon semplice ma efficace su WordPress è fondamentale se non vuoi che le tue pagine appaiano generiche nelle schede del browser e sui dispositivi mobili.

Come hai visto, creare una favicon di WordPress richiede solo tre passaggi:

  1. Pianifica il design della tua icona del sito.
  2. Crea la tua site icon, da zero o utilizzando uno strumento di creazione
  3. Aggiungi la tua favicon al tuo sito utilizzando il customizer di WordPress o un plugin.

Buon lavoro!