Il logo nel Customizer di WordPress
Il logo è il primo elemento visivo che un visitatore associa al vostro marchio. WordPress lo gestisce nativamente tramite il Customizer, nella sezione “Identità del sito”. Per abilitare il caricamento del logo, il tema deve dichiarare supporto con add_theme_support(‘custom-logo’). Se il vostro tema non lo supporta, potete aggiungere questa riga nel functions.php del tema child: add_theme_support(‘custom-logo’, array(‘height’ => 100, ‘width’ => 400, ‘flex-height’ => true, ‘flex-width’ => true));
Dal Customizer potete caricare, ritagliare e posizionare il logo. WordPress genera automaticamente versioni del logo per diversi contesti (header, footer, mobile). Una volta salvato, il tema visualizza il logo tramite la funzione the_custom_logo(), che restituisce un tag con le classi appropriate. Molti temi permettono anche di separare il logo per la versione desktop da quella mobile, utile per schermi stretti dove il logo completo non entra.
Dimensioni e formati del logo
La scelta del formato influisce sulla qualità visiva e sulla velocità di caricamento. Ogni formato ha vantaggi specifici.
SVG: il formato vettoriale
Lo Scalable Vector Graphics è il formato ideale per loghi: scalabile all’infinito, peso irrisorio e trasparenza nativa. WordPress non permette il caricamento di SVG per default per ragioni di sicurezza (un SVG malformato può contenere script). Per abilitarli, usate un plugin come Safe SVG o aggiungete codice al functions.php che sanifica i file SVG prima dell’upload. In alternativa, convertite il logo in WebP o PNG ad alta risoluzione (2x o 3x per retina display).
PNG, WebP e JPEG
Il PNG è il formato raster più usato per loghi: gestisce la trasparenza ed è supportato ovunque. Lo svantaggio è il peso, soprattutto per loghi complessi con molte sfumature. Il WebP offre compressione superiore a parità di qualità (25-35% in meno di PNG) con trasparenza. Il JPEG non supporta trasparenza ed è inadatto ai loghi. La dimensione consigliata per il logo nel Customizer è 200×100 pixel come base, con una versione 2x (400×200 pixel) per retina. Create il logo alla risoluzione più alta e lasciate che WordPress lo ridimensioni.
Logo responsive
I temi moderni supportano logo responsive: immagini diverse in base al viewport. Con lo standard picture element o le media query di WordPress, potete mostrare un logo completo su desktop e una versione ridotta (solo icona) su mobile. Il tema Twenty Twenty-Four e i block theme più recenti gestiscono questa logica automaticamente. Se usate un tema classico, potete implementarlo con JavaScript o con CSS @container queries.
Impostare la favicon (Site Icon)
La favicon o Site Icon è l’immagine che appare nella scheda del browser, nei preferiti, nei risultati di ricerca e nei suggerimenti di Chrome. WordPress la gestisce sempre dal Customizer > Identità del sito > Icona del sito. Il sistema accetta immagini quadrate a partire da 512×512 pixel e le ridimensiona automaticamente in tutte le varianti necessarie.
Best practice per le dimensioni
Per una copertura completa, il set ideale include: 16×16 pixel per la scheda del browser (favicon.ico classica), 32×32 pixel per la barra delle applicazioni di Windows e shortcut, 180×180 pixel per Apple Touch Icon (iOS Safari quando si aggiunge alla home screen), 192×192 pixel per Android Chrome e 512×512 pixel per PWA (Progressive Web App). WordPress, caricando un’immagine 512×512, genera automaticamente tutte le varianti e le inserisce nel
del sito.Formati per favicon
Il formato .ico è il più tradizionale, contiene più risoluzioni in un unico file, ma è poco flessibile. Il PNG è supportato dai browser moderni ed è più semplice da creare. Lo SVG come favicon è supportato da Chrome, Firefox e Safari (parzialmente). È il formato più recente e permette favicon reattive al tema chiaro/scuro con media query prefers-color-scheme. Per compatibilità massima, caricate un PNG 512×512 in WordPress e, se volete, aggiungete manualmente un favicon.ico nella root del sito per i browser legacy (IE su Windows).
Creare favicon con strumenti professionali
Non serve essere designer per creare una favicon perfetta. Esistono strumenti che automatizzano tutto il processo.
Canva e Figma
Canva offre template specifici per favicon con dimensioni preimpostate (16×16, 32×32, 180×180). Partite dal vostro logo e adattatelo allo spazio ridotto: semplificate i dettagli, aumentate il contrasto e verificate la leggibilità a 16 pixel. Figma permette un controllo granulare: create un frame da 512×512 pixel, inserite il logo centrato, esportate in PNG. Con il plugin “Favicon Exporter” potete generare l’intero set in un clic.
RealFaviconGenerator
Questo strumento è lo standard dell’industria per la generazione di favicon. Caricate un’immagine 260×260 pixel o superiore e il servizio produce: tutte le varianti di dimensione, il codice HTML da inserire nel
, il file browserconfig.xml per Windows e il manifest.json per Android. Include anche la preview live su vari dispositivi. Dopo aver scaricato il pacchetto, caricate i file nella root del sito e incollate il codice HTML. Se usate un tema child, inserite il codice nel file header.php o tramite hook wp_head.Apple Touch Icon
L’Apple Touch Icon è usato da iOS quando un utente aggiunge il sito alla Home Screen. Dimensione consigliata: 180×180 pixel. WordPress la genera automaticamente dalla Site Icon, ma potete sovrascriverla caricando un file apple-touch-icon.png nella root del sito. Apple preferisce immagini lucide senza angoli arrotondati (li aggiunge automaticamente il sistema). Evitate sfondi trasparenti perché iOS aggiunge uno sfondo scuro o chiaro a seconda della modalità.
Risoluzione dei problemi
Se la favicon o il logo non vengono visualizzati correttamente, i problemi più comuni sono legati alla cache. Il browser memorizza la favicon nella cache DNS o nella cache HTTP per giorni o settimane. Forzate un refresh con Ctrl+F5 o aprite la pagina in una finestra di navigazione anonima. La cache del CDN (Cloudflare, Fastly) può servire la vecchia favicon. Invalidate la cache dalla dashboard del CDN. Anche la cache di WordPress (WP Rocket, W3 Total Cache) va svuotata dopo il cambio di logo o favicon.
Se il logo non appare nel Customizer, il tema non supporta custom_logo. Controllate il file functions.php o contattate lo sviluppatore del tema. Per la favicon, se il percorso non è corretto (errore 404 nel pannello Rete degli strumenti sviluppatore), verificate che il file sia stato caricato nella posizione giusta. A volte il tema sovrascrive la Site Icon di WordPress con una propria immagine: disabilitate l’opzione dal pannello di personalizzazione del tema.
Conclusioni
Logo e favicon sono elementi apparentemente piccoli ma fondamentali per il brand. WordPress semplifica la gestione con il Customizer: caricate il logo in formato SVG o PNG ad alta risoluzione e la Site Icon in formato 512×512 pixel per coprire ogni dispositivo. Strumenti come RealFaviconGenerator garantiscono la compatibilità con tutti i browser e sistemi operativi. Dopo l’impostazione, svuotate tutte le cache e verificate la visualizzazione su desktop, tablet e smartphone. Un logo nitido e una favicon riconoscibile migliorano la credibilità del sito e l’esperienza utente.