come aggiungere il logo al sito senza farlo sembrare incollato
design · 2026-10-02 · 3 min
la risposta breve: mettilo nell'header, in alto a sinistra, su tutte le pagine, come svg trasparente o come png esportato alla dimensione in cui verrà mostrato. poi guardalo su un telefono prima di considerarlo finito. il resto è la parte che decide se sembra un logo o un file trascinato lì per caso.
il file conta più della posizione
un logo esportato a 2000 pixel e mostrato a 160 è un'immagine da 300 kb che fa il lavoro di una da 6, e rallenta la prima cosa che il visitatore vede. se il logo è vettoriale esporta un svg: resta nitido a qualsiasi dimensione e pesa quasi niente. se hai solo un png, esportalo a circa il doppio della larghezza di visualizzazione — 320 pixel per uno spazio da 160 — con lo sfondo trasparente.
tieni due versioni, una per header chiari e una per header scuri. un logo pensato per uno sfondo bianco sparisce nel momento in cui qualcuno cambia il colore dell'header, e quel cambiamento prima o poi arriva.
dove si mette negli strumenti più comuni
su wordpress il blocco logo sta nell'editor del sito: aspetto, editor, apri il template dell'header e trascina dentro il blocco. su wix l'header si modifica dal pannello del design. su shopify è in online store, temi, personalizza, header.
se scrivi html a mano, metti l'immagine dentro un link alla home e imposta width e height così l'header non salta mentre carica. un'immagine senza dimensioni è la causa più comune di layout shift.
gli errori che si vedono
non stirarlo. mantieni le proporzioni, anche se lo spazio ha una forma diversa. non metterlo sopra una foto, a meno che la foto non sia stata scelta per quello. non usarlo come titolo principale della pagina: il titolo è la frase che dice cosa fai, e un motore di ricerca la legge così.
e aggiungi una favicon mentre ci sei: una versione quadrata, 512 pixel, caricata nella stessa schermata. è l'icona piccola nella scheda del browser, e la sua assenza si nota più della sua presenza.
domande frequenti
che dimensione deve avere il logo?
larga abbastanza da leggersi, piccola abbastanza da non dominare: di solito 120-200 pixel in un header desktop, un po' meno su un telefono. il numero esatto conta meno dell'esportare il file a quella dimensione invece di rimpicciolire nel browser un file enorme.
il logo deve portare alla home?
sì. è una delle poche convenzioni su cui i visitatori contano ancora. collegalo alla home della stessa lingua e metti nell'attributo alt il nome dell'attività.
serve un logo diverso per il mobile?
di solito no, serve solo più piccolo. se il logo completo include un payoff che a 100 pixel diventa illeggibile, usa una versione compatta con il solo nome.