Il logo \u00e8 il primo elemento visivo che un visitatore associa al vostro marchio. WordPress lo gestisce nativamente tramite il Customizer, nella sezione “Identit\u00e0 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));<\/p>\n
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.<\/p>\n
La scelta del formato influisce sulla qualit\u00e0 visiva e sulla velocit\u00e0 di caricamento. Ogni formato ha vantaggi specifici.<\/p>\n
Lo Scalable Vector Graphics \u00e8 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\u00f2 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).<\/p>\n
Il PNG \u00e8 il formato raster pi\u00f9 usato per loghi: gestisce la trasparenza ed \u00e8 supportato ovunque. Lo svantaggio \u00e8 il peso, soprattutto per loghi complessi con molte sfumature. Il WebP offre compressione superiore a parit\u00e0 di qualit\u00e0 (25-35% in meno di PNG) con trasparenza. Il JPEG non supporta trasparenza ed \u00e8 inadatto ai loghi. La dimensione consigliata per il logo nel Customizer \u00e8 200×100 pixel come base, con una versione 2x (400×200 pixel) per retina. Create il logo alla risoluzione pi\u00f9 alta e lasciate che WordPress lo ridimensioni.<\/p>\n
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\u00f9 recenti gestiscono questa logica automaticamente. Se usate un tema classico, potete implementarlo con JavaScript o con CSS @container queries.<\/p>\n
La favicon o Site Icon \u00e8 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\u00e0 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.<\/p>\n
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.<\/p>\n
Il formato .ico \u00e8 il pi\u00f9 tradizionale, contiene pi\u00f9 risoluzioni in un unico file, ma \u00e8 poco flessibile. Il PNG \u00e8 supportato dai browser moderni ed \u00e8 pi\u00f9 semplice da creare. Lo SVG come favicon \u00e8 supportato da Chrome, Firefox e Safari (parzialmente). \u00c8 il formato pi\u00f9 recente e permette favicon reattive al tema chiaro\/scuro con media query prefers-color-scheme. Per compatibilit\u00e0 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).<\/p>\n
Non serve essere designer per creare una favicon perfetta. Esistono strumenti che automatizzano tutto il processo.<\/p>\n
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\u00e0 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.<\/p>\n
Questo strumento \u00e8 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.<\/p>\n
L’Apple Touch Icon \u00e8 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\u00e9 iOS aggiunge uno sfondo scuro o chiaro a seconda della modalit\u00e0.<\/p>\n
Se la favicon o il logo non vengono visualizzati correttamente, i problemi pi\u00f9 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\u00f2 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.<\/p>\n
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 \u00e8 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.<\/p>\n
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\u00e0 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\u00e0 del sito e l’esperienza utente.<\/p>","protected":false},"excerpt":{"rendered":"
Il logo nel Customizer di WordPress Il logo \u00e8 il primo elemento visivo che un visitatore associa al vostro marchio. WordPress lo gestisce nativamente tramite il Customizer, nella sezione “Identit\u00e0 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 […]<\/p>\n","protected":false},"author":1,"featured_media":2074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"both","ai_summary":"Il logo nel Customizer di WordPress Il logo \u00e8 il primo elemento visivo che un visitatore associa al vostro marchio. WordPress lo gestisce nativamente tramite il Customizer, nella sezione \"Identit\u00e0 del sito\". Per abilitare il caricamento del logo, il tema deve dichiarare supporto con add_theme_sup...","ai_intent":"informative","ai_related_resources":"","ai_priority":5,"ai_entity_type":"Article","ai_is_based_on":"https:\/\/blog.studioimmens.com\/impostare-logo-e-favicon-su-wordpress\/","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"Impostare, logo, e, favicon","footnotes":""},"categories":[133],"tags":[],"ai_visibility":[],"class_list":["post-1912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1912"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":2203,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1912\/revisions\/2203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/2074"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1912"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}