Favicon : come creare e aggiungerne una al tuo sito WordPress

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 web 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 piccole icone, di solito 16 x 16 px, che si trovano accanto al titolo di una pagina web nella barra delle schede (sopra la barra degli indirizzi del browser):

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 icone del sito 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 utilizzarne una 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 site icon, 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 icone favicon svolgono un altro ruolo molto importante sul tuo sito: migliorare l’esperienza dell’utente. Abbelliscono una noiosa barra dell’indirizzo del browser e alcuni 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’icona del sito web :

Puoi creare il tuo file 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:;

• 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 immagine corretto. Molti software grafici consentono di utilizzare l’ estensione .ico e il file grafico 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 .

Favicon Generator

Se vuoi creare rapidamente una site icon, sono diversi gli strumenti che puoi utilizzare. Diamo un’occhiata ad alcuni degli strumenti per creare favicon online più popolari..

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

Anche Faviconer è un’ottimo favicon builder online gratuito che vanta un’interfaccia gradevole e una migliore usabilità complessiva:

Questo strumento è probabilmente più potente del precedente. Crea favicon online ad alta risoluzione per i display moderni e puoi 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 icona sito web nelle diverse dimensioni.

Plugin Favicon generator

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 diversi 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 inserire 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 caricare la 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> Denominazione del sito> Icona del sito : 

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 cliccare sul pulsante Seleziona l’icona del sito e caricare la favicon: 

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 icone del sito, 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: 

Questo plugin ha anche un’interfaccia utente di facile navigazione da dove puoi caricare le tue immagini. Accetta tre formati 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. ma altri browser meno recenti non lo fanno. La maggior parte dei browser moderni cerca prima il file favicon.ico nella directory principale del tuo dominio, quindi è meglio attenersi al formato 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 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 icone favicon per 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!