Come aggiungere una favicon al tuo sito WordPress

Favicon, o icona preferita, è una piccola immagine accanto al titolo di una pagina in una scheda del browser. Questa icona del sito svolge un ruolo essenziale nello stabilire l'identità del tuo sito web.

Se possiedi un sito web professionale, considera l'utilizzo delle favicon se non l'hai già fatto. Qui ne discuteremo l'importanza e le cose da considerare quando ne prepariamo uno. Ti mostreremo anche tre metodi su come aggiungere una favicon al tuo sito WordPress.

Perché dovresti usare una favicon?

Per dimostrare l'importanza delle favicon, dai un'occhiata allo screenshot qui sotto.

Come puoi vedere, ogni scheda ha icone diverse che differenziano le pagine web che stai visitando. Quando hai un sacco di schede sul tuo browser, le favicon ti aiutano a identificare queste pagine. Di conseguenza, crea una migliore esperienza utente.

Una favicon non è utile solo nelle schede del browser. Quando gli utenti aggiungono un collegamento alla pagina sulla schermata iniziale del cellulare o sul desktop, la favicon verrà visualizzata sullo schermo. Inoltre, le favicon possono funzionare in modo simile a un logo. Quando le persone lo vedranno, riconosceranno immediatamente il tuo sito web e il tuo marchio.

Preparare la tua Favicon

Il modo più rapido e semplice per creare una favicon è utilizzare i generatori di favicon. Non è necessario avere alcuna conoscenza tecnica poiché la maggior parte di essi fornisce immagini pronte per l'uso che devi solo modificare leggermente.

Considera anche l'utilizzo del logo del tuo marchio, ma assicurati che possa essere ritagliato in un'icona quadrata. Deve anche sembrare abbastanza semplice da poterlo vedere chiaramente nonostante le sue piccole dimensioni. Usa programmi di modifica delle immagini come Photoshop, DesignWizard o GIMP per modificare e ridimensionare il tuo logo.

Per il formato dell'immagine, si consiglia di utilizzare un file ICO perché la maggior parte dei browser lo supporta. Tuttavia, non tutti i software di fotoritocco consentono di creare file ICO. Pertanto, è meglio utilizzare generatori di favicon online che forniscono l'opzione. Oppure salva la tua immagine come PNG e usa un convertitore ICO online. Di solito, la dimensione deve essere di 16 x 16 pixel.

Se utilizzi la funzione Icona del sito di WordPress 4.3, non devi preoccuparti di convertire la tua immagine in anticipo. Ora puoi caricare qualsiasi file immagine come favicon . Indipendentemente da ciò, assicurati sempre che possa essere visualizzato in qualsiasi browser dopo averlo caricato.

3 modi per aggiungere una favicon al tuo sito WordPress

Ci sono tre metodi in cui puoi aggiungere una favicon al tuo sito web, scegli l'opzione che preferisci.

Opzione 1: personalizzazione di WordPress

Per gli utenti di WordPress 4.3, l'utilizzo della funzione Icona del sito è il modo più conveniente e consigliato per aggiungere la tua favicon.

Prepara un'immagine quadrata di almeno 512 pixel sia in altezza che in larghezza. Il file non deve superare i 128 MB. Se hai un'immagine rettangolare, ti permetteranno di ritagliarla mentre carichi la tua favicon .

Una volta che l'immagine è pronta, segui questi passaggi:

1. Apri la dashboard di WordPress, vai su Aspetto e seleziona Personalizza.

2. Cerca una scheda che contenga l'icona del sito. La maggior parte dei temi lo avrebbe in Identità del sito, ma alcuni rinominano la scheda in Titolo del sito, Nome del marchio, Logo e intestazione del sito, ecc.

3. Seleziona l'icona del sito e scegli un'immagine dalla tua libreria multimediale o carica un nuovo file.

4. Verrai indirizzato all'editor di immagini ritagliate. Regola la posizione e le proporzioni come preferisci.

5. Congratulazioni! Dovresti avere una nuova favicon. Se non è ancora apparso, WordPress consiglia di svuotare la cache e riavviare il browser.

Opzione 2: utilizzo dei plugin

Se non hai aggiornato il tuo WordPress, puoi utilizzare i plugin per aggiungere una favicon .

Alcuni plugin ti offrono un maggiore controllo sull'aspetto della tua favicon su dispositivi non desktop. Ad esempio, Favicon di RealFaviconGenerator ti offre la possibilità di personalizzare l'aspetto dell'icona in diversi sistemi operativi.

Per utilizzare il plugin, segui questi passaggi:

1. Vai su Plugin e fai clic su Aggiungi nuovo sulla dashboard di WordPress.
2. Cerca Favicon di RealFaviconGenerator, quindi Installa e Attiva il plugin.
3. Seleziona Aspetto e fai clic su Favicon dalla dashboard. Carica un'immagine quadrata più grande di 70 x 70 pixel. Idealmente, l'immagine dovrebbe essere di 260 x 260 pixel o più.
4. Verrai reindirizzato a una pagina in cui puoi impostare l'aspetto della tua favicon in iOS, Android Chrome, Windows e Safari. Quindi fai clic su Genera le tue Favicon e il codice HTML.

Oltre a quel plugin, puoi usare All in One Favicon. Il plugin ti consente di impostare diverse favicon per il back-end e il front-end. In questo modo, non ti confonderai quando il tuo sito web e la dashboard sono entrambi aperti.

Opzione 3: installazione manuale tramite client FTP

Un altro metodo è caricare manualmente la tua favicon sul tuo sito Web WordPress. Per questo, devi connettere il tuo sito Web a un client FTP come FileZilla. La tua icona può essere in formato ICO o PNG e dovrebbe essere denominata favicon.

Si consiglia inoltre di creare un tema figlio per utilizzare questo metodo. In questo modo, le modifiche al codice non verranno rimosse quando c'è un nuovo aggiornamento del tema.

Quando il tuo sito è connesso, segui questi passaggi:

1. Carica il tuo file favicon nella cartella del tema corrente tramite il tuo client FTP. Se stai utilizzando un tema figlio, caricalo in quella cartella.
2. Aggiungi lo stesso file alla tua directory principale. Dovrebbe essere nella stessa cartella di wp-content e wp-admin. Questo per garantire che le tue favicon possano essere visualizzate nei lettori di feed.
3. Sulla dashboard di WordPress, vai su Aspetto e fai clic su Editor temi.
4. Ora, seleziona il file di intestazione del tema e aggiungi questo codice di seguito all'interno del tag se disponi di un file ICO:

<link rel=”icona di collegamento” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Sostituisci la parte dopo href= fino a /favicon.ico con il percorso della tua directory principale. Sembrerebbe così:

<link rel=”icona scorciatoia” href=”<http://www.nomedominio.com/favicon.ico” />

Se hai un file PNG, sostituisci semplicemente il formato del file. Quindi Aggiorna file.

5. Aggiorna il tuo sito web. Se funziona, dovresti avere una nuova favicon ormai.

Per tutti i metodi, non dimenticare di controllare l'aspetto della tua favicon sui dispositivi mobili. Apri il tuo sito web dal browser del tuo dispositivo mobile e aggiungi il sito alla schermata iniziale.

Sebbene siano piccole, le favicon possono aumentare il riconoscimento del marchio e creare una migliore esperienza utente. Puoi utilizzare generatori di favicon online o qualsiasi software di modifica delle immagini di tua scelta per creare la tua favicon. Se ne hai già uno, aggiungilo al tuo sito Web WordPress utilizzando uno dei tre metodi sopra. Buona fortuna!

Leggi di più Plugin e temi popolari per i siti Web LMS di WordPress