Vai al contenuto
📌 Come aggiungere una favicon in WordPress: 3 modi per qualsiasi sito

📌 Come aggiungere una favicon in WordPress: 3 modi per qualsiasi sito

Un sito senza favicon sembra incompiuto. Un visitatore apre cinque schede, cerca la tua in mezzo alle altre e non la trova perché al posto dell’icona c’è il segnaposto grigio del browser. Una sciocchezza? Sì. Ma sono queste piccole cose a formare l’impressione: qualcuno si è preso cura di te oppure ha messo tutto insieme di fretta.

WordPress ha semplificato l’aggiunta dell’icona del sito riducendola a un paio di clic, eppure metà dei proprietari di siti o non conosce questa funzione oppure, dopo averla caricata, si imbatte nel problema della favicon che non viene visualizzata. La causa è quasi sempre la cache del browser o una dimensione del file non corretta.

Di seguito, tre metodi funzionanti per aggiungere una favicon in WordPress: tramite il Personalizzatore (il più semplice), manualmente via codice e con un plugin. Più un approfondimento sui requisiti di dimensione e formato affinché l’icona venga mostrata ovunque: nelle schede, nei segnalibri, su iPhone e Android.

💡 Panoramica rapida:

  • Cos’è una favicon e perché il tuo sito ne ha bisogno: riconoscibilità del brand, fiducia, navigazione tra le schede
  • Requisiti del file: un’immagine quadrata di dimensioni standard, formato PNG, ICO o SVG
  • Metodo 1: caricamento tramite «Sito» → Personalizzatore (2 minuti, nessun plugin)
  • Metodo 2: inserimento manuale via functions.php o header.php (per chi modifica i temi)
  • Metodo 3: installare il plugin Site Favicon (se il Personalizzatore non è disponibile)
  • Cosa fare se la favicon non viene visualizzata: cache del browser, vecchio ICO, CDN

Perché il tuo sito ha bisogno di una favicon e quali sono i requisiti

Una favicon (abbreviazione di favorite icon) è una piccola icona che il browser mostra a sinistra del titolo della pagina nella scheda, nei segnalibri e nella cronologia di navigazione. Un utente con una dozzina di schede aperte trova il tuo sito a colpo d’occhio in una frazione di secondo, proprio grazie alla favicon, non al testo del titolo.

La seconda funzione è meno evidente: la favicon contribuisce a costruire un micro-brand. Quando qualcuno salva una pagina nei segnalibri o aggiunge il sito alla schermata Home dello smartphone, è l’icona del sito a comparire. Senza, WordPress sostituisce un segnaposto grigio o uno screenshot della pagina, e l’effetto è trascurato.

Requisiti di dimensione e formato

Dal 2014 WordPress supporta il caricamento dell’icona del sito tramite il Personalizzatore. I requisiti sono standard:

  • Dimensione: 512×512 pixel. WordPress genera automaticamente copie ridimensionate per i browser (32×32, 180×180 per Apple touch icon, 192×192 e 512×512 per Android). Non devi caricare file separati per ogni risoluzione; ci pensa il core in autonomia. Maggiori informazioni sui requisiti dell’icona del sito nella documentazione ufficiale di WordPress.
  • Formato: PNG (consigliato), ICO o SVG. Il PNG offre la qualità migliore sugli schermi retina. L’ICO, un formato legacy per vecchi browser, nel 2026 è praticamente superfluo.
  • Cosa usare come favicon: un logo riconoscibile in formato quadrato e leggibile anche se ridotto in modo significativo. Tre o quattro lettere di testo su sfondo colorato funzionano meglio di un’illustrazione complessa.

La regola principale quando prepari il file: deve essere quadrato. WordPress ritaglierà forzatamente un’immagine non quadrata e il risultato potrebbe non piacerti.


Come aggiungere una favicon in WordPress: 3 metodi

Metodo 1: tramite il Personalizzatore, il più semplice

Questo metodo funziona su qualsiasi versione moderna di WordPress con un tema classico. Per i temi a blocchi (FSE) il percorso è leggermente diverso; mostro entrambi.

Tema classico (Personalizzatore):

  • Accedi all’amministrazione di WordPress.
  • Vai su Aspetto → Personalizza.
  • Seleziona la sezione Identità del sito. In alcuni temi si chiama «Informazioni sito» o «Icona e logo del sito».
  • Trova il campo Icona del sito. Clicca su «Seleziona icona del sito» e carica un PNG quadrato; WordPress si aspetta un’immagine di almeno 512×512, secondo la documentazione.
  • Se necessario, ritaglia l’immagine con l’editor integrato e clicca su «Salva modifiche».

Tema a blocchi (Editor del sito, WordPress 5.9+):

Se il tema supporta il Full Site Editing, il Personalizzatore è sostituito dall’Editor del sito. Vai su Aspetto → Editor, apri il pannello Stili o Impostazioni, trova la sezione Icona del sito e carica la stessa immagine quadrata. La logica è la stessa, cambia l’interfaccia.

Dopo aver salvato, apri il sito in una nuova finestra di navigazione privata; la favicon dovrebbe comparire nella scheda. Se non appare subito, niente panico: i browser memorizzano le favicon in cache in modo aggressivo. Approfondisco nella sezione FAQ qui sotto.

Metodo 2: manualmente via functions.php

Un’opzione per chi modifica un tema child e non vuole dipendere dal Personalizzatore. Aggiungi il seguente codice al functions.php del tema child o tramite il plugin Code Snippets:

1/**
2 * Include favicon via wp_head.
3 * The favicon.png file should be in the root of the child theme.
4 */
5add_action( 'wp_head', 'sdstudio_add_favicon' );
6
7function sdstudio_add_favicon() {
8 $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9 echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10 echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11}

Cosa succede qui: l’hook wp_head inserisce due tag <link> nell’<head> di ogni pagina. Il primo è una favicon standard per i browser, il secondo è un’Apple touch icon per i dispositivi Apple (iPhone, iPad). La funzione get_stylesheet_directory_uri() restituisce l’URL del tema child; la favicon va posizionata lì, nella root della cartella del tema.

Non è necessario rinominare il file in favicon.ico. WordPress funziona benissimo con il PNG e i browser lo interpretano senza problemi. L’importante è che sia un quadrato di dimensioni standard.

Se colleghi la favicon non dal tema ma dalla root del sito, sostituisci get_stylesheet_directory_uri() con home_url() e adatta il percorso:

1$favicon_url = home_url( '/favicon.png' );

Dopo aver aggiunto il codice, carica favicon.png nella cartella corrispondente via FTP o dal file manager dell’hosting. Verifica il risultato in una finestra di navigazione privata.

Metodo 3: con un plugin

Se per qualche motivo il Personalizzatore non ti permette di caricare l’icona del sito (succede in temi personalizzati e obsoleti), installa il plugin Site Favicon, che è minimalista e gratuito. Installalo nel modo standard: Plugin → Aggiungi nuovo → cerca «Site Favicon» → Installa → Attiva. Dopo l’attivazione, nell’amministrazione compare la voce Impostazioni → Site Favicon, dove puoi caricare un’icona e vederne subito l’anteprima.

Un’altra opzione è All in One SEO. Se il plugin SEO è già presente sul sito, controlla le sue impostazioni: al suo interno c’è una sezione per il caricamento dell’icona del sito che fa la stessa cosa senza un plugin aggiuntivo. Ma sconsigliamo di installare una suite SEO pesante solo per una favicon; Site Favicon svolge il compito, pesa meno e non aggiunge carico extra.

Dopo aver configurato la favicon con uno qualsiasi dei tre metodi, verifica che l’icona venga effettivamente mostrata: apri il sito in modalità incognito e guarda la scheda del browser.

Il video qui sopra è una dimostrazione passo passo di tutti e tre i metodi su un sito WordPress reale. Se dopo la lettura hai ancora dubbi su uno dei passaggi, guarda il video: al minuto 1:15 mostrano il caricamento tramite Personalizzatore, al minuto 3:40 il metodo manuale.


⁉️🤔 Domande frequenti

Perché la favicon non viene visualizzata dopo il caricamento tramite il Personalizzatore?

Nella maggior parte dei casi il problema è la cache del browser. Le favicon vengono memorizzate in cache in modo aggressivo; il browser può conservare la vecchia versione per diversi giorni. Apri il sito in modalità incognito (Ctrl+Shift+N in Chrome): se l’icona compare, il problema è effettivamente la cache. Svuota la cache del browser o attendi che scada naturalmente. La seconda causa più comune è che la favicon è stata caricata in formato ICO mentre il browser si aspetta PNG. WordPress dalla versione 4.3 preferisce il PNG; carica un quadrato di dimensioni standard in PNG, come richiesto dalla documentazione, e il problema si risolverà.

Posso usare il mio logo come favicon?

Puoi e dovresti; è la prassi standard. Ma non tutti i loghi sono adatti. Verifica come appare il tuo logo a dimensioni ridotte: se i dettagli si fondono in una macchia illeggibile, realizza una versione semplificata. Un buon esempio è l’icona di WordPress (W su sfondo blu): riconoscibile anche a dimensioni minime. Un logo orizzontale con dieci lettere di testo diventerà una striscia grigia se ridotto in modo significativo; per la favicon usa solo il marchio senza il testo.

Perché WordPress richiede una favicon proprio di queste dimensioni?

Per WordPress, sì. Il core accetta esattamente questa dimensione come sorgente e genera automaticamente tutte le copie ridimensionate necessarie; la documentazione ufficiale conferma il requisito minimo di 512 px per lato. Se carichi una favicon più piccola (ad esempio 128×128), l’ingrandimento a 512 pixel avverrà con perdita di qualità e sugli schermi retina l’icona apparirà sfocata. L’eccezione è se colleghi la favicon manualmente via codice (metodo 2): in quel caso puoi preparare diverse dimensioni e specificarle con tag <link> separati.

Come rimuovo o sostituisco una favicon?

La sostituzione si fa attraverso la stessa interfaccia da cui l’hai caricata: Personalizzatore → Identità del sito → Icona del sito → «Rimuovi» e poi carica la nuova. La vecchia icona rimarrà nella cache del browser per un po’ di tempo (fino a diversi giorni); è normale. Per la rimozione completa, usa il pulsante «Rimuovi» nella stessa interfaccia, dopodiché WordPress smetterà di generare i tag della favicon e il browser tornerà al segnaposto grigio.

La favicon influisce sulla SEO?

Direttamente no. Google non usa la presenza o l’assenza di una favicon come fattore di ranking. Indirettamente sì: un sito con la favicon appare più professionale e gli utenti hanno meno probabilità di confonderlo con i concorrenti quando navigano tra le schede. Questo riduce il tasso di pogo-sticking (ritorno ai risultati di ricerca), che i motori di ricerca tengono in considerazione in modo indiretto. Inoltre, Google a volte mostra le favicon nei risultati di ricerca mobile; l’icona rende lo snippet visivamente più evidente, migliorando il CTR.


Quale metodo scegliere: un breve algoritmo

Se hai un tema standard con Personalizzatore, usa il metodo 1. Sono due clic e WordPress gestisce tutto il lavoro tecnico: ridimensionamento, generazione dei tag, supporto Apple e Android. Nove siti WordPress su dieci risolvono la questione della favicon proprio così.

Un tema personalizzato senza supporto per l’icona del sito? Collegala via functions.php (metodo 2); il codice di tre righe ti dà il pieno controllo su dimensioni e formato. Tieni il plugin (metodo 3) per i casi in cui né il Personalizzatore né la modifica del tema sono disponibili, ad esempio se il sito è su un’installazione multisito con permessi limitati o stai lavorando con un builder che non dà accesso al functions.php.

E soprattutto: dopo aver caricato la favicon, controlla il sito in una nuova finestra di navigazione in incognito. Non fidarti della finestra normale; lì potrebbe essere memorizzata la vecchia versione o il segnaposto stesso. Vedi l’icona nella scheda? Fatto.