Come aggiungere una favicon al vostro sito WordPress

Aggiungere una favicon a WordPress richiede circa 30 secondi: andate su Aspetto → Personalizza → Identità del sito → Icona del sito, caricate un PNG 512x512 e cliccate Pubblica. Fatto.

Ma se non funziona — o volete un maggiore controllo — continuate a leggere. Ci sono alcune insidie che vale la pena conoscere.

Il metodo rapido: Personalizza di WordPress

Questo funziona su qualsiasi sito WordPress con versione 4.3 o successiva (rilasciata nel 2015). Se usate una versione anche minimamente recente, avete questa opzione.

Passaggio 1: Aprire il Personalizza

• Andate su Aspetto → Personalizza nel pannello di amministrazione WordPress
• Oppure cliccate "Personalizza" nella barra di amministrazione mentre visualizzate il sito

Passaggio 2: Trovare Identità del sito

• Cliccate Identità del sito nella barra laterale del Personalizza
• Scorrete verso il basso fino a Icona del sito

Passaggio 3: Caricare l'immagine

• Cliccate Seleziona l'icona del sito
• Caricate un'immagine PNG di almeno 512 x 512 pixel
• WordPress genererà automaticamente tutte le dimensioni necessarie (incluse 32x32, 180x180, ecc.)
• Ritagliate se richiesto, poi cliccate Pubblica

Questo è tutto. WordPress gestisce il resto — crea i tag <link> per le favicon del browser, le icone Apple touch e persino l'immagine tile di Windows.

Il metodo via codice: Aggiungere la favicon manualmente

A volte l'approccio con il Personalizza non è sufficiente. Forse state costruendo un tema personalizzato, o il vostro tema sovrascrive il comportamento predefinito. Ecco come aggiungerla tramite codice.

Opzione A: Inserire i file nel tema

Caricate i file favicon nella directory radice del tema, poi aggiungete questo al functions.php del tema:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Opzione B: Usare una favicon SVG

Le favicon SVG si adattano perfettamente e supportano la modalità scura. Aggiungete questo al functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

Il fallback PNG serve per Safari, che ancora non supporta completamente le favicon SVG.

Usare un plugin (se preferite)

Diversi plugin gestiscono le favicon, ma onestamente? Il Personalizza integrato funziona bene per la maggior parte dei siti. I plugin hanno senso se avete bisogno di:

• Favicon diverse per pagina o articolo
• Test A/B di icone diverse
• Multisite con favicon per ogni sotto-sito

Le opzioni più popolari includono All in One Favicon e Flavor (precedentemente flavicon). Ma, ancora una volta — provate prima il Personalizza.

Temi a blocchi WordPress (Full Site Editing)

Se usate un tema a blocchi come Twenty Twenty-Four o Twenty Twenty-Five, il processo è leggermente diverso:

1. Andate su Aspetto → Editor
2. Cliccate Stili (l'icona a semicerchio)
3. Navigate verso gli stili globali del sito
4. L'impostazione Icona del sito si trova ancora in Aspetto → Personalizza → Identità del sito

I temi a blocchi usano comunque lo stesso Personalizza per la favicon. WordPress non ha ancora spostato questa funzione nel Site Editor.

File favicon consigliati

Per una copertura completa, preparate questi file:

Il Personalizza di WordPress gestisce la maggior parte di questi automaticamente quando caricate un'immagine 512x512. I file SVG e ICO devono essere aggiunti manualmente se li desiderate.

Risoluzione problemi: La favicon non viene visualizzata

Svuotare tutto

I problemi con le favicon di WordPress sono quasi sempre dovuti alla cache:

1. Cache del browser: Aggiornamento forzato con Ctrl+Shift+R (Windows) o Cmd+Shift+R (Mac)
2. Cache di WordPress: Se usate WP Super Cache, W3 Total Cache o LiteSpeed Cache — svuotatela
3. Cache CDN: Cloudflare, Fastly, o qualunque servizio usiate — svuotate gli URL delle favicon
4. Provate la navigazione in incognito: Apre una sessione pulita senza file nella cache

Verificare conflitti tra plugin

Alcuni plugin SEO e framework di temi inseriscono i propri tag per la favicon. Se vedete tag <link rel="icon"> duplicati nel codice sorgente della pagina:

1. Visualizzate il codice sorgente (Ctrl+U)
2. Cercate "icon" o "favicon"
3. Se ci sono duplicati, verificate quale plugin li sta aggiungendo
4. Disabilitate la funzione favicon del plugin, oppure rimuovete il vostro codice manuale

Problemi di sovrascrittura del tema

Alcuni temi (specialmente quelli premium) hanno le proprie impostazioni per la favicon che sovrascrivono il Personalizza. Verificate:

• Il pannello Opzioni del tema per un'impostazione favicon
• Il file header.php del tema per tag <link rel="icon"> inseriti direttamente nel codice
• La documentazione del tema per le istruzioni sulla favicon

Risoluzione problemi: Google mostra la favicon sbagliata

Google può impiegare da giorni a settimane per aggiornare le favicon nei risultati di ricerca. Ecco come accelerare il processo.

Requisiti di Google per le favicon

Google ha regole specifiche per mostrare le favicon nei risultati di ricerca:

• Devono essere un multiplo di 48px (48x48, 96x96, 144x144)
• Devono essere quadrate
• Non devono contenere contenuti inappropriati o NSFW
• Devono rappresentare il sito web (non un'icona generica)

Accelerare l'aggiornamento

1. Assicuratevi che la favicon sia attiva e accessibile
2. Aprite Google Search Console
3. Usate Ispezione URL sulla homepage
4. Cliccate Richiedi indicizzazione
5. Attendete — di solito ci vogliono 1-2 settimane

Risoluzione problemi: La favicon appare sul desktop ma non su mobile

I browser mobile sono più esigenti riguardo ai formati della favicon:

• iOS Safari: Ha bisogno di apple-touch-icon (180x180) — la favicon normale non apparirà sulla schermata iniziale
• Android Chrome: Cerca manifest.json con i riferimenti alle icone per la schermata iniziale
• PWA: Necessita di icone sia 192x192 che 512x512 definite nel web app manifest

Se il vostro sito WordPress ha un web app manifest (alcuni temi e plugin ne aggiungono uno), assicuratevi che i percorsi delle icone al suo interno siano corretti.

Considerazioni per il Multisite

Gestite un WordPress Multisite? Ogni sito necessita della propria favicon.

• Il Personalizza è per singolo sito, quindi ogni sotto-sito può avere la propria icona
• Le impostazioni a livello di rete non includono una favicon predefinita
• Se volete un'impostazione predefinita per tutta la rete, aggiungetela tramite functions.php in un plugin must-use (wp-content/mu-plugins/)

Buone pratiche

• Partite in grande: Caricate almeno 512x512 — WordPress riduce, non ingrandisce
• Usate il PNG: Gli sfondi trasparenti funzionano meglio rispetto al JPEG
• Mantenetelo semplice: La vostra favicon è minuscola — loghi complessi non si leggeranno a 16x16
• Testate su diversi browser: Usate Favicon.im per verificare la vostra configurazione
• Aggiungete una versione alla favicon: Aggiungete ?v=2 all'URL quando aggiornate per forzare la cancellazione della cache

FAQ

Come si aggiunge una favicon in WordPress?

Andate su Aspetto → Personalizza → Identità del sito → Icona del sito, caricate un'immagine PNG 512x512 e cliccate Pubblica. WordPress genera automaticamente tutte le dimensioni necessarie.

Quali dimensioni deve avere la favicon di WordPress?

Caricate almeno 512 x 512 pixel. WordPress creerà automaticamente le versioni 32x32, 180x180 e altre dimensioni. Per i risultati di ricerca di Google, usate multipli di 48px.

Perché la mia favicon WordPress non viene visualizzata?

Di solito è un problema di cache. Svuotate la cache del browser, il plugin di cache di WordPress e la cache CDN. Provate in una finestra di navigazione in incognito. Verificate anche eventuali conflitti tra plugin che causano tag favicon duplicati.

Si può usare una favicon SVG in WordPress?

WordPress non supporta il caricamento di SVG per impostazione predefinita per motivi di sicurezza. Potete aggiungere il supporto per le favicon SVG manualmente tramite il codice functions.php, oppure usare un plugin che abiliti il caricamento degli SVG.

Come si aggiungono favicon diverse per la modalità chiara e scura in WordPress?

Usate una favicon SVG con media query CSS integrate per prefers-color-scheme. Aggiungete il file SVG manualmente tramite functions.php poiché il Personalizza gestisce solo formati PNG/ICO.

Riferimenti

1. Site Icon - WordPress Developer Resources - Documentazione ufficiale WordPress
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Strumento di test e validazione favicon