Dimensioni del logo per siti web, social e 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.

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.

<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>

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 elenca i file esatti e le linee guida sulle favicon 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.

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.

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 ha ogni misura dei post.

Dimensioni del logo per email e 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 prima di mandare qualcosa in tipografia e vedi il design della firma email per la firma vera e propria.

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 spiega quale versione del logo inserire in ciascuna.