Modificare logo, favicon e colori brand in WordPress

Come aggiornare logo, favicon e colori brand in WordPress: differenze tra Site Editor e Customizer, Stili globali, dimensioni corrette e quando serve l'agenzia.

WordPress6 min

Logo, favicon e colori brand sono i tre elementi visivi che il cliente riconosce per primi. Aggiornarli è una delle prime cose che ti chiediamo di provare dopo la consegna del sito: ti permette di prendere confidenza con WordPress senza rischiare di rompere nulla.

In questa guida vediamo dove e come modificarli, sia nei temi a blocchi (Site Editor) sia nei temi classici (Customizer), e cosa fare quando le opzioni standard non bastano.

Nei temi classici (Customizer)

  1. Vai su Aspetto → Personalizza
  2. Apri la sezione Identità del sito
  3. Clicca Cambia logo (o "Seleziona logo")
  4. Carica la nuova immagine dalla libreria media o dal computer
  5. Ridimensiona se richiesto (alcuni temi permettono crop)
  6. Clicca Pubblica in alto

Il logo apparisce subito nell'anteprima a destra. Se la posizione o le dimensioni non ti convincono, cerca le opzioni nel pannello "Header" o equivalente del tema.

Nei temi a blocchi (Site Editor)

  1. Vai su Aspetto → Editor
  2. Sulla sinistra apri Modelli → Header (o naviga al template che contiene il logo)
  3. Clicca sul blocco logo (di solito un blocco "Site Logo")
  4. Nella toolbar che compare, clicca sull'icona di sostituzione e carica la nuova immagine
  5. Salva in alto a destra

Per un cambio globale, puoi anche andare in Site Editor → Stili → Identità del sito dove imposti logo e icona del sito a livello globale.

Dimensioni e formato consigliati

  • Logo orizzontale: 600-1200 px di larghezza, sfondo trasparente (PNG) o vettoriale (SVG se il tema lo supporta)
  • Peso file: sotto i 100 KB, idealmente sotto i 50 KB
  • Versione retina: carica il doppio della dimensione finale per display ad alta risoluzione
  • Versione mobile: se il tema lo supporta, carica una versione compatta o iconica

Aggiornare il favicon

Il favicon (o "icona del sito") è l'iconcina nella scheda del browser, nei segnalibri, nel pulsante "Aggiungi a schermata Home" su mobile.

Procedura standard

  1. Aspetto → Personalizza → Identità del sito (Customizer) oppure Site Editor → Stili → Identità del sito (block themes)
  2. Sezione Icona del sitoSeleziona icona del sito
  3. Carica un'immagine quadrata di almeno 512x512 pixel, formato PNG (preferito) o ICO
  4. Salva / Pubblica

WordPress genera automaticamente le dimensioni necessarie per i vari contesti.

Cosa funziona e cosa no

  • Funziona bene: una versione quadrata, semplice, riconoscibile a 16x16
  • Non funziona: il logo orizzontale completo (illeggibile a piccole dimensioni)
  • Da evitare: dettagli sottili, testo piccolo, gradienti complessi

Tipicamente si usa il monogramma del brand (1-2 lettere) o un simbolo iconico, non il logo completo.

Modificare i colori brand

Nei temi a blocchi

I temi a blocchi hanno il concetto di Stili globali: una palette di colori applicata in modo coerente a tutto il sito.

  1. Aspetto → Editor
  2. In alto a destra clicca Stili (icona a metà cerchio)
  3. Colori → Palette
  4. Modifica i colori esistenti o aggiungine di nuovi (Primario, Secondario, Sfondo, Testo, ...)
  5. Salva

Ogni blocco che usa "Colore primario" si aggiorna automaticamente. È il modo più pulito per gestire i colori brand: cambi una volta e tutto si allinea.

Nei temi classici

Dipende dal tema:

  • Temi classici basici: spesso espongono solo 2-4 colori (primario, link, sfondo). Aspetto → Personalizza → Colori o sezione equivalente
  • Temi premium (Astra, GeneratePress, Kadence): pannelli più ricchi con palette globali, varianti per intestazioni, pulsanti, link, footer
  • Temi con builder (Elementor, Divi, Bricks): gestione colori dal builder, spesso con sistema di "Global Colors"

Se non trovi le opzioni colore o sono limitate, è probabile che il tema abbia colori cablati nel CSS: serve l'agenzia per modificarli.

Coerenza nelle varianti

Quando aggiorni un colore primario, controlla:

  • Pulsanti (CTA principali)
  • Link (testi cliccabili)
  • Header e footer
  • Hover dei menu
  • Bordi e sfondi alternati
  • Form (focus dei campi)

Se qualche elemento non si aggiorna, ha un colore cablato — vedi sotto.

Quando serve l'agenzia

Altri casi che richiedono intervento tecnico:

  • Logo con effetti speciali (animato, multicolor adattivo a sfondo)
  • Favicon che deve apparire diverso in dark mode del browser
  • Sezioni con sfondi a immagine o pattern legati al brand
  • Branding multi-lingua (logo diverso per ogni lingua)

Per questi, segnala all'agenzia con uno screenshot del risultato voluto: sono lavori di mezz'ora ciascuno.

Cosa controllare dopo l'aggiornamento

  • Cache: svuota la cache del sito (plugin tipo WP Rocket, LiteSpeed Cache) e quella del browser
  • Mobile: controlla l'aspetto su uno smartphone reale, non solo nell'anteprima
  • Tutte le pagine: home, blog, articolo singolo, contatti, eventuali pagine custom
  • Stati interattivi: hover dei link, focus dei form, pulsanti
  • Email transazionali: se hai uno shop, l'header email può avere una copia separata del logo

In sintesi

Logo, favicon e colori sono modifiche che fai 2-3 volte all'anno, di solito per piccoli rifresh. La parte facile la gestisci dal pannello WordPress in pochi minuti. La parte difficile — colori cablati, varianti speciali, coerenza tra header/footer/email — è quella che ti porta a chiamare l'agenzia.

Quando ti consegniamo un sito, lasciamo i colori brand già impostati nella palette globale e ti spieghiamo dove modificarli. Per qualsiasi modifica oltre la palette, scrivici prima di provare nel codice: 5 minuti del nostro tempo evitano un sito da ripristinare.

Domande frequenti

Il Site Editor è l'editor visuale moderno introdotto con i temi a blocchi (block themes), disponibile dalla versione 5.9 in poi. Permette di modificare ogni parte del sito a blocchi: header, footer, template, stili globali. Il Customizer è il pannello classico (Aspetto → Personalizza) usato dai temi tradizionali. Quale dei due trovi dipende dal tema installato. La logica di logo, favicon e colori è simile ma le voci di menu sono diverse.