# Dimensioni del logo per siti web, social e stampa

[Canonical HTML page](https://gradiently.design/it/guide/logo-sizes)

Si chiede la dimensione giusta del logo come se ci fosse un solo numero. Non c’è: c’è un file master e una misura sensata per ogni posto in cui il logo finisce. Ecco quei posti, con le misure della tela e i file da usare.

## The short version

- Non esiste un’unica dimensione corretta del logo; tieni un file master vettoriale ed esporta da lì per ogni posto in cui il logo appare.
- Sui siti web usa un logo SVG e impostane la dimensione in base all’altezza nel CSS, così resta nitido su ogni schermo.
- Per le foto profilo dei social carica un’immagine quadrata e tieni il logo ben dentro il centro, perché la maggior parte delle piattaforme ritaglia le foto profilo a cerchio.
- Quando esporti un logo in PNG, fallo almeno al doppio della dimensione a cui sarà mostrato, così resta nitido sugli schermi ad alta densità.
- Per la stampa usa un PDF o un SVG vettoriale, oppure un file raster a 300 dpi alla dimensione finale di stampa.

Non esiste un’unica **dimensione del logo** che vada bene ovunque. Tieni il logo come master vettoriale, un SVG o un PDF, che si ridimensiona a qualsiasi misura senza sfocarsi, ed esporta da lì per ogni posto in cui va: un SVG dimensionato in altezza per l’intestazione del sito, una versione quadrata per le foto profilo, una orizzontale per i banner e un file a 300 dpi per la stampa. Ciò che cambia da un posto all’altro è la tela e quanto spazio deve occupare il logo.

## Parti da un file master, non da una misura

I file vettoriali descrivono forme e non pixel, quindi lo stesso file è nitido su un telefono e sull’insegna di un negozio. Ogni altro file che crei va esportato da questo master, mai da uno screenshot o da un vecchio PNG. Se hai solo un piccolo logo raster, fallo ridisegnare in vettoriale prima di ogni altra cosa; ti risparmierà problemi a ogni lavoro successivo.

| File | Tipo | Usalo per |
| --- | --- | --- |
| SVG | Vettoriale | Siti web, app e come master per il lavoro su schermo |
| PDF | Vettoriale | Tipografie, insegne e tutto ciò che si manda a un fornitore |
| PNG con trasparenza | Raster | Presentazioni, documenti, post social ed email |
| JPG | Raster | Solo dove va bene uno sfondo pieno, mai per un logo che sta su un colore |

Due file vettoriali e un PNG trasparente coprono quasi ogni richiesta. [SVG o PNG](https://gradiently.design/it/guide/svg-vs-png) spiega il compromesso più nel dettaglio.

## Dimensione del logo per un sito web

Su un sito web dimensiona il logo in base all’altezza, non alla larghezza, così un wordmark largo e un simbolo compatto stanno sulla stessa linea di base nell’intestazione. Usa l’SVG perché resti nitido sugli schermi ad alta densità e dagli una larghezza massima sensata per i telefoni piccoli.

```html
<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>
```

Gli attributi width e height riservano lo spazio, così la pagina non salta mentre il logo si carica. Le altezze qui sono un punto di partenza; adattale alla tua intestazione.

La tua favicon è un file separato, quadrato e semplificato, non il logo completo rimpicciolito. I browser la mostrano a dimensioni minuscole, quindi di solito diventa una sola lettera o un simbolo. [Il design della favicon](https://gradiently.design/it/guide/favicon-design) elenca i file esatti e le [linee guida sulle favicon](https://support.google.com/webmasters/answer/9290858) di Google chiedono un’icona quadrata a un multiplo di 48 pixel.

## Dimensioni del logo per i social media

Le piattaforme social usano il tuo logo in due posti molto diversi: la piccola foto profilo e l’ampia copertina o banner. Servono versioni diverse del logo, non lo stesso file schiacciato.

### Foto profilo

- Carica un’immagine **quadrata**. La maggior parte delle piattaforme ritaglia le foto profilo a cerchio, quindi gli angoli scompaiono.
- Usa la versione **icona o in colonna**, non una lunga composizione orizzontale. Un wordmark largo diventa illeggibile in un piccolo cerchio.
- Tieni il logo dentro circa i **due terzi centrali** del quadrato, con spazio uniforme tutto attorno.
- Mettilo su un **colore pieno o uno sfondo calmo** che riempia il quadrato, così il cerchio sembra voluto.
- Controllalo alla dimensione reale sul tuo telefono prima di cambiarlo ovunque.

Un’immagine profilo quadrata con il wordmark fern al centro su una sfumatura verde, con spazio attorno per un ritaglio circolare

Un wordmark breve centrato con margini generosi sopravvive al ritaglio circolare.

Un ampio banner di profilo LinkedIn con le parole Fern Studio e Piante per spazi piccoli sulla stessa sfumatura verde

Il banner può portare il nome completo e una riga su di te, perché ha la larghezza per farlo.

### Copertine e banner

Le immagini di copertina sono larghe e vengono ritagliate in modo diverso su telefono e desktop, e la foto profilo spesso ne copre un angolo. Tieni logo e parole vicino al centro e lascia che lo sfondo arrivi fino ai bordi.

- Copertina Facebook 1640×624: 1640 × 624
- Banner LinkedIn 1584×396: 1584 × 396
- Intestazione X 1500×500: 1500 × 500
- Copertina canale YouTube 2560×1440: 2560 × 1440

Quattro banner comuni, disegnati in scala. Sono tutti molto più larghi che alti, quindi un logo orizzontale o una semplice riga con il nome è la scelta migliore.

Nei post il logo è una firma, non il titolo. Un buon punto di partenza è tenerlo piccolo, in un angolo costante, alla stessa dimensione su ogni post, così costruisce riconoscimento senza competere con il messaggio. [Le dimensioni delle immagini per i social](https://gradiently.design/it/guide/social-media-image-sizes) ha ogni misura dei post.

## Dimensioni del logo per email e stampa

| Posto | Misura della tela | File del logo |
| --- | --- | --- |
| Intestazione email | 1200×600 | PNG, esportato al doppio della dimensione di visualizzazione |
| Firma email | 600×200 | Piccolo PNG; molte app di posta bloccano l’SVG |
| Anteprima del link (Open Graph) | 1200×630 | Logo tenuto vicino al centro, PNG o JPG |
| Biglietto da visita | 1050×600 a 300 dpi | PDF vettoriale dal master |
| Volantino A5 | 1748×2480 a 300 dpi | PDF vettoriale dal master |
| Locandina A4 | 2480×3508 a 300 dpi | PDF vettoriale dal master |

Le misure di stampa sono date in pixel a 300 dpi. I loghi vettoriali si stampano nitidi a qualsiasi dimensione; i loghi raster richiedono 300 dpi alla dimensione finale di stampa.

L’email è il caso scomodo: molte app di posta non mostrano le immagini SVG, quindi usa un PNG trasparente. Esportalo al doppio della larghezza a cui vuoi mostrarlo, poi imposta la larghezza di visualizzazione nell’HTML, così resta nitido sugli schermi dei telefoni ad alta densità. Per la stampa leggi [la risoluzione delle immagini per la stampa](https://gradiently.design/it/guide/image-resolution-for-print) prima di mandare qualcosa in tipografia e vedi [il design della firma email](https://gradiently.design/it/guide/email-signature-design) per la firma vera e propria.

> **Esporta al doppio della dimensione di visualizzazione** Un PNG mostrato a 200 pixel di larghezza va esportato a 400. Gli schermi ad alta densità comprimono due o più pixel del dispositivo in ogni pixel CSS e un logo esportato esattamente alla dimensione di visualizzazione appare morbido.

## Creare ogni misura da un solo design

La parte noiosa delle dimensioni del logo non è il logo, è ricostruire ogni volta la copertina, il post, la storia e il biglietto attorno a esso. In Gradiently puoi chiedere al Designer le altre misure o, con Pro, ridimensionare un design in ogni formato in un solo passaggio, e il tuo sfondo viene generato di nuovo per ogni forma invece di essere ritagliato. Le misure personalizzate vanno da 200 a 8.000 pixel quando un fornitore chiede qualcosa di insolito. [Le varianti del logo](https://gradiently.design/it/guide/logo-variations) spiega quale versione del logo inserire in ciascuna.

## FAQ

### Che dimensione deve avere un logo?

Non esiste una dimensione unica. Tieni un file master vettoriale ed esporta una versione per ogni uso: SVG per i siti web, un PNG quadrato per le foto profilo, banner larghi per le copertine e PDF vettoriale per la stampa.

### Qual è la migliore dimensione del logo per un sito web?

Usa un SVG e impostalo in base all’altezza nel CSS, così si adatta alla tua intestazione su ogni schermo. Fornisci gli attributi width e height perché la pagina non si sposti durante il caricamento.

### Che dimensione deve avere il mio logo per le foto profilo dei social media?

Carica un’immagine quadrata e tieni il logo nei due terzi centrali, perché la maggior parte delle piattaforme ritaglia le foto profilo a cerchio. Usa l’icona o il logo in colonna invece di uno largo.

### Che risoluzione deve avere un logo per la stampa?

Usa un PDF o un SVG vettoriale, che si stampa nitido a qualsiasi dimensione. Se hai solo un file raster, servono 300 dpi alla dimensione finale di stampa.

### Perché il mio logo appare sfocato?

Probabilmente è stato esportato alla dimensione di visualizzazione, o ingrandito da un file piccolo. Esporta i PNG al doppio della dimensione di visualizzazione da un master vettoriale, oppure usa SVG sul web.