Come aggiungere e modificare una favicon WordPress

Scoprite come modificare o aggiungere la favicon WordPress utilizzando queste istruzioni e suggerimenti.
favicon WordPress
Tabella dei Contenuti

Si usa WordPress per creare siti web per privati e aziende. Un modo per aiutare i visitatori abituali a riconoscere al volo il vostro sito è quello di avere una favicon WordPress personalizzata.

Che cos’è una favicon?

Una favicon è un’icona che compare nella scheda o nella finestra del browser e nell’elenco dei segnalibri o dei preferiti associati a un determinato sito. Se un browser non trova una favicon personalizzata, ne mostra una predefinita.

Una favicon di WordPress è spesso una versione ridotta del logo del sito. È possibile ridurre il logo alle dimensioni di una favicon, ma di solito è necessario crearne una che sia una rimodellazione del logo originale.

Se siete alla ricerca di un professionista per la realizzazione del vostro logo potete dare uno sguardo al servizio di creazione logo e contattarmi 🙂

creazione favicon WordPress

Perché dovrei usare una favicon?

Le aziende dovrebbero avere una favicon per migliorare la familiarità e incoraggiare la fiducia dei potenziali clienti. Il logo consente ai visitatori di riconoscere immediatamente un sito. Aggiunge continuità e legittimità.

Anche i privati possono utilizzare una favicon per motivi analoghi, anche se nella maggior parte dei casi l’obiettivo in questo caso è la fidelizzazione dei visitatori.

Specifiche delle favicon

La dimensione della favicon in WordPress è di 16×16 px. Tuttavia, alcuni altri browser e applicazioni utilizzano una dimensione maggiore, che va da 16 a 195 pixel quadrati.

Se ci si attiene alla dimensione 16×16, le applicazioni che utilizzano dimensioni maggiori generalmente la ingrandiscono, causando spesso sfocature. Per questo motivo di default WordPress richiede un formato di 512×512 px.

Alcune dimensioni alternative comuni sono:

  • 24 pixel – l’icona di un sito salvato in Internet Explorer 9
  • 72 pixel – l’icona sulla schermata iniziale dell’iPad
  • 128 pixel – l’icona utilizzata su Chrome Web Store
  • 195 pixel – l’icona visualizzata su Opera Speed Dial

Formati delle favicon

Una favicon non viene visualizzata correttamente se viene salvata in un formato non corretto. Il formato più comune è Windows ICO, che era il formato originale. Supporta varie dimensioni e risoluzioni per essere utilizzata su più piattaforme. Inoltre questo formato è l’unico utilizzato da Internet Explorer.

PNG è l’opzione più facile da usare, in quanto quasi tutti i programmi di grafica salvano in questo formato; inoltre, fornisce un file di dimensioni ridotte e consente alla favicon di avere un fondo trasparente.

Opera supporta l’uso di SVG per le favicon, anche se è l’unico browser che lo fa.

GIF, JPG e APNG sono formati supportati, ma hanno spesso qualità inferiore e non garantiscono un buon risultato. GIF e APNG animati inoltre posso essere solo un elemento di distrazione e risultano quindi formati poco funzionali.

Creare una favicon

La creazione di una favicon per aggiungere riconoscibilità al vostro sito è un’ottima idea. Potete crearne una con un programma di grafica o utilizzare un sito web gratuito online, come favicon-generator.org o favicon.cc.

DI seguito dei principi da tenere in considerazione per migliorare il valore della vostra favicon.

Identità

Il motivo più importante per avere una favicon è essere riconosciuti. Create un design che rappresenti il prodotto o il servizio che offrite o un design che abbia corrispondenza con il vostro logo aziendale. L’ideale sarebbe creare un’immagine che si riferisca direttamente al vostro marchio, come una versione più piccola del logo o la lettera/e principali del nome dell’azienda.

Semplicità

Date le dimensioni ridotte, la semplicità è la cosa migliore. Le forme o le lettere di base sono una buona scelta per la visibilità. Quando i visitatori la riconoscono a colpo d’occhio, la favicon è più efficace. Più si cerca di includere dettagli, più è difficile per il visitatore riconoscere l’icona. Precisione e chiarezza sono essenziali.

Colori

Un contrasto elevato migliora la leggibilità e aumenta il riconoscimento. Considerate le favicon di siti come NBC e Netflix. I loro siti sono immediatamente riconoscibili. I siti che hanno una chiara identità cromatica dovrebbero includere quel colore nella favicon di WordPress. Anche in questo caso, mantenete la semplicità. Troppi colori possono causare un’immagine poco chiara.

Come aggiungere una favicon WordPress

Aggiungete una favicon di WordPress utilizzando uno dei seguenti metodi:

1) Utilizzate l’opzione Icona Sito integrata in WordPress

Passate il mouse su Aspetto >Personalizza, quindi scegliete la scheda Denominazione del sito. L’icona del sito si trova in fondo al pannello di sinistra e consente di scegliere un’immagine quadrata di 512 pixel o più grande, che viene poi ridimensionata secondo le necessità.

Se il file scelto non è quadrato, WordPress fornisce un’interfaccia per ritagliare l’immagine.

icona del sito WordPress

2) Modificare il file header.php

Modificate il file header.php nel vostro tema attuale e aggiungete questo codice:
Sostituite “iltuodominio” con il nome di dominio del vostro sito e assicuratevi di caricare la favicon nello spazio web.

<link rel="icon" href="https://www.iltuodominio.it/favicon.ico" type="image/x-icon" >
<link rel="shortcut icon" href="https://www.iltuodominio.it/favicon.ico" type="image/x-icon" />

Se volete evitare che WordPress annulli la modifica in caso di aggiornamento, create un tema figlio prima di modificarlo e modificate il file del tema figlio invece del file del tema principale.

3) Utilizzare un plugin di WordPress.

Utilizzate uno dei plugin elencati di seguito:

  • Potete usare il plugin Insert Headers and Footers per aggiungere facilmente il codice qui sopra. Incollate il codice nella sezione dell’intestazione e salvatelo.
  • Il plugin All in One Favicon aggiunge la funzionalità per facilitare il processo di aggiunta di una favicon.
  • RealFaviconGenerator è un plugin che genera icone in base ai requisiti del browser.
  • Un altro plugin molto diffuso è Heroic Favicon Generator, che genera una favicon da un’immagine caricata o già presente nella libreria multimediale. Utilizza il drag-and-drop per caricare i file immagine.

Perché la mia favicon di WordPress non viene visualizzata?

Gli errori delle favicon possono essere dovuti a diverse ragioni:

Cache

Quando il sito web viene memorizzato nella cache, le modifiche agli elementi come la favicon richiedono tempo per essere visualizzate. È possibile accelerare il processo eseguendo un aggiornamento (Ctrl + F5) o cancellando la cache del browser. Se il problema non si risolve, controllare il tipo di file della favicon. Se non è un file .ico, potrebbe essere incompatibile con il browser.

Errori di battitura

Se nel codice è presente un errore di battitura, è probabile che la favicon non venga visualizzata. Errori semplici come una virgoletta o una parentesi mancanti causano errori che compromettono l’immagine e forse l’intera pagina web. Controllate attentamente il codice.

Posizione della favicon di WordPress

Se il link (la parte all’interno delle virgolette href) punta a un’immagine che non esiste, la favicon non verrà visualizzata. Fate attenzione a caricare il file della favicon e a copiare il link esatto. Il modo migliore per farlo è utilizzare la libreria multimediale di WordPress.

Visualizzazione in locale

Se state controllando la visualizzazione su un computer locale anziché caricare la pagina Internet, la favicon di WordPress non verrà visualizzata perché la maggior parte dei browser non cerca localmente la favicon. Controllate la pagina su Internet per essere certi che venga visualizzata dai visitatori.

Tipo di immagine sbagliata

Il tipo di file predefinito per l’immagine della favicon è .ico (“image/ico”). Se si utilizza un altro tipo di file, come PNG o SVG, è necessario modificarlo nel codice utilizzando il metodo di modifica del tema. Il tipo di file deve corrispondere al tipo di file dell’immagine. Ad esempio, un file PNG dovrebbe avere la dicitura “image/png” invece di “image/ico”.

Domande frequenti sulla favicon in WordPress

Come faccio ad aggiungere una favicon a WordPress?

Il modo più semplice per aggiungere una favicon a WordPress è utilizzare la sezione “Denominazione del sito”. Il secondo modo più semplice è utilizzare un plugin. È anche possibile aggiungere una favicon manualmente modificando il tema.

Dove si trova la favicon in WordPress?

L’icona stessa viene visualizzata nel titolo della scheda o della finestra. Compare anche negli elenchi dei segnalibri. L’impostazione si trova in Aspetto, nella sezione Personalizza. Da lì, cliccate su Denominazione del sito e su Icona del sito, in fondo al riquadro di sinistra, dove potrete caricare la vostra favicon.

Che dimensioni ha una favicon di WordPress?

16×16 pixel è la dimensione predefinita, ma se utilizzate il metodo Denominazione del sito, l’immagine deve essere di 512×512 pixel. Il software ridurrà l’immagine alla dimensione corretta per ogni browser o dispositivo.

Come si cambia la favicon in WordPress?

La favicon si cambia nello stesso modo in cui si aggiunge. A seconda del metodo utilizzato andate in Aspetto → Personalizza → Denominazione del sito oppure modificatela con il plugin usato o infine caricate un nuovo file favicon.ico, sovrascrivendo quello precedente.

Roberto Lioniello
Sono un grafico, web designer e sviluppatore WordPress.

Vuoi essere aggiornato sui
nuovi contenuti?

iscrivendoti confermi di aver letto e di accettare la privacy policy del sito

Ti potrebbe anche interessare

L'introduzione del nuovo editor Gutenberg ha permesso di gestire il contenuto e la struttura dei nuovi temi WordPress in modo flessibile e visuale
Esistono diversi tipi di profili colore, ognuno con le proprie caratteristiche, andiamo a vedere le differenze tra i profili colore più comuni per la stampa e il web.