Come esportare un logo per siti web, e-mail e documenti

Un logo corretto nel programma di grafica può diventare minuscolo, sfocato o invisibile dopo il caricamento. Le cause possono essere margini vuoti, pochi pixel, un font mancante o uno sfondo inadatto. Parti da dove apparirà il logo e scegli di conseguenza le impostazioni di esportazione.

Parti dal miglior originale disponibile

Lavora dal file modificabile del designer o da una vera versione vettoriale. Conserva questo originale separatamente dalle copie pubblicate. Un SVG può mantenere i tracciati vettoriali, ma anche contenere una bitmap a bassa risoluzione. L’estensione .svg non dimostra che ogni elemento resterà nitido ingrandendolo.

Se hai solo un piccolo JPG, chiedi l’originale prima di esportare una versione più grande. Convertirlo in PNG o SVG non ricostruisce le lettere né i bordi. La guida a SVG e PNG ti aiuta a identificare il file che possiedi.

Scegli il formato in base alla destinazione

SVG conserva le forme vettoriali; PNG memorizza una griglia fissa di pixel. La compressione senza perdita del PNG è adatta a lettere, colori uniformi e bordi netti: salvare l’immagine non aggiunge i difetti di compressione che può introdurre JPG. JPG può sfumare i bordi o creare aloni colorati attorno alle lettere e non mantiene la trasparenza.

WebP può usare la compressione con o senza perdita. Lo strumento SVG in WebP di Pixilo offre una regolazione della qualità, non una modalità senza perdita separata: il valore 100 non garantisce pixel identici. Usalo quando la destinazione accetta WebP e il file esportato è soddisfacente. Per un logo semplice, mantenere SVG o un PNG adeguato può essere preferibile.

Esporta in base alle dimensioni di visualizzazione

Distingui le dimensioni in pixel del file dalla grandezza con cui verrà mostrato. Supponiamo che la grafica esportata sia quattro volte più larga che alta e debba occupare 160 × 40 pixel CSS. Un PNG di 320 × 80 pixel fornisce due pixel d’immagine per ogni pixel CSS in entrambe le direzioni, un punto di partenza utile per uno schermo ad alta densità. È un esempio, non una misura obbligatoria né una regola per esportare sempre al doppio.

Blocca le proporzioni e inserisci normalmente una sola dimensione. Se il logo è largo il doppio della sua altezza, mostrarlo a 160 pixel di larghezza produce un’altezza di 80 pixel, non 40. Adattalo a larghezza e altezza disponibili senza deformarlo; usa una composizione alternativa approvata se il logo completo non entra.

Le dimensioni comprendono i margini trasparenti. Se il logo visibile occupa solo metà di una tela larga 320 pixel, apparirà largo circa 80 pixel quando l’immagine intera viene mostrata a 160. Correggi lo spazio vuoto involontario nell’originale mantenendo l’area di rispetto del marchio. Imposta anche la larghezza di visualizzazione nell’editor del sito o della firma e verifica se il servizio crea una copia ridimensionata.

Cambiare solo il valore DPI non aggiunge dettagli. Consulta la guida a DPI, PPI e pixel. Per la stampa professionale chiedi requisiti separati per file, colori e risoluzione.

Controlla l’area da esportare e il testo

Adatta l’area di esportazione al logo mantenendo l’area di rispetto e lo spazio per tratti e ombre. Una tavola grande e vuota fa apparire piccolo il logo visibile anche quando il file contiene molti pixel. Non eliminare gli spazi previsti dal marchio solo per ottenere un ritaglio più stretto. La guida di esportazione di Inkscape distingue pagina, disegno e selezione.

Controlla i font e le immagini collegate prima di esportare. Convertire il testo in tracciati trasforma le lettere in forme vettoriali, così il loro aspetto non dipende più dai font del destinatario. Le lettere non saranno però modificabili come testo normale: esegui l’operazione su una copia di esportazione e conserva l’originale. Convertire il testo non rende vettoriale una piccola bitmap incorporata.

Prepara un SVG autonomo con immagini e stili necessari all’interno del file. Un file corretto quando viene aperto da solo può comportarsi diversamente come immagine web, perché in quel contesto le risorse esterne sono limitate. Lo spiega la documentazione MDN. Confronta l’esportazione con il progetto e controlla poi la versione inserita. Esamina lettere, spazi, parti tagliate ed effetti, non solo se il file si apre.

Prepara i colori per schermo separatamente dai file di stampa

Usa i colori RGB approvati dal marchio per le versioni da schermo. Per PNG e JPG destinati al web, sRGB è una base pratica. La guida Adobe ai colori per il web descrive la conversione. Se la fonte usa un altro profilo, converti i colori nel programma di grafica invece di limitarti ad assegnare un profilo diverso e controlla il risultato.

Conserva separatamente l’originale di stampa in CMYK o colori speciali. Le versioni per schermo e stampa possono avere valori approvati differenti; un convertitore di formato non può sceglierli al posto tuo. Confronta il risultato con la versione da schermo approvata, tenendo presente che i monitor possono comunque variare. Per differenze visibili, segui la guida ai problemi di colore delle immagini.

Prepara versioni per sfondi chiari e scuri

La trasparenza non cambia i colori del logo. Esporta, se servono, un logo scuro approvato per superfici chiare e uno bianco o chiaro per superfici scure. In un sito, il modello o lo sviluppatore deve selezionare la versione corretta: creare due file non li fa alternare automaticamente.

L’e-mail richiede una verifica separata. Le app possono modificare lo sfondo del messaggio in modalità scura e il supporto al cambio d’immagine varia. Prova i messaggi ricevuti in entrambe le modalità. Se il logo scuro scompare, chiedi al designer una versione approvata che rimanga visibile, per esempio con un contorno contrastante o un fondo adatto. Nessuna soluzione garantisce lo stesso aspetto in ogni app. La guida Mailchimp alla modalità scura spiega perché i test sono importanti.

PNG può mantenere la trasparenza esistente; JPG richiede uno sfondo opaco. Sceglilo prima di esportare in JPG. Una casella per la trasparenza non elimina un rettangolo bianco disegnato nella grafica. La guida agli sfondi trasparenti aiuta a distinguere un vero sfondo dalla superficie di anteprima.

Crea le versioni PNG, JPG o WebP in Pixilo

1. Apri l’SVG preparato in SVG in PNG. Scegli SVG in JPG se la destinazione richiede JPG oppure SVG in WebP quando hai scelto WebP per quell’uso.
2. Inserisci la larghezza o l’altezza di esportazione con le proporzioni bloccate. Mantieni la trasparenza se supportata o scegli il colore di sfondo finale.
3. Converti e scarica. Controlla il file scaricato, non solo l’anteprima della fonte. La compressione PNG è senza perdita e non richiede un livello di qualità; per JPG e WebP, esamina lettere e linee sottili dopo aver regolato la qualità.
4. Inserisci la copia, imposta le dimensioni di visualizzazione e controlla la pagina pubblicata, il messaggio ricevuto o il documento esportato. Assicurati di vedere il nuovo file e non una vecchia versione nella cache.

Pixilo crea copie d’immagine statiche, non un logo modificabile o un SVG ottimizzato. Il lettore SVG rifiuta risorse esterne e contenuti non supportati. Se il file viene rifiutato, torna al programma di grafica ed esporta una copia autonoma con il testo convertito in tracciati se necessario. La pagina dello strumento riporta i limiti attuali di file e dimensioni. Conserva l’originale per le prossime esportazioni.

Dai ai file nomi che ne chiariscano l’uso

Descrivi il colore della grafica separatamente dallo sfondo. Per esempio, dark-artwork indica forme scure, non un file destinato a uno sfondo scuro:

• Originale modificabile: conserva il file nativo del designer, con la sua vera estensione, separatamente dalle copie pubblicate.
• brand-logo-dark-artwork.svg e brand-logo-white-artwork.svg: grafica scura per sfondi chiari e grafica bianca per sfondi scuri.
• brand-logo-dark-artwork-320x80.png: PNG trasparente per la visualizzazione d’esempio a 160 × 40 pixel. Il nome indica le dimensioni in pixel del file.
• brand-logo-white-background.jpg: JPG facoltativo con sfondo bianco opaco per una destinazione che lo richiede.

Aggiungi una breve nota su dimensioni di visualizzazione e sfondo. Crea solo le versioni che verranno usate. Una favicon richiede spesso un simbolo semplificato distinto, perché il marchio completo di testo può essere illeggibile in una scheda del browser. Consulta la guida alle favicon.

Verifica il logo nel suo contesto

Controlla per primo l’uso reale più piccolo. Le lettere sono leggibili, i tratti sottili visibili e l’area di rispetto intatta? Poi prova le superfici chiare e scure. Per l’e-mail, invia un vero messaggio di prova e controlla la copia ricevuta. Per un documento, apri il PDF esportato ed esamina una stampa se il risultato su carta è importante.

Sul sito, assegna al logo un’alternativa testuale adeguata. Se è l’unico contenuto di un link alla pagina iniziale, indicane la destinazione, per esempio «Pagina iniziale del marchio». Se il testo visibile nello stesso link fornisce già nome e scopo, evita ripetizioni. La guida del W3C alle immagini funzionali mostra entrambi i casi.

Domande frequenti

Perché il logo caricato è sfocato se il file scaricato è nitido?

Confronta le dimensioni reali in pixel del file caricato con quelle di visualizzazione. La piattaforma potrebbe aver creato una copia più piccola, oppure la pagina potrebbe ingrandirla. Controlla quale file usa la pagina pubblicata e se margini trasparenti eccessivi rendono piccola la grafica. Esportare ancora più grande non corregge una pagina che continua a scegliere la versione sbagliata.

Perché il PNG ha un riquadro bianco?

Esamina il file scaricato su una scacchiera e su un fondo colorato. Se il riquadro fa parte dei pixel, cerca un oggetto di sfondo nella fonte o un’esportazione che ha appiattito la trasparenza. Se il file è trasparente ma il riquadro appare solo quando lo inserisci, controlla lo sfondo applicato all’immagine o la conversione nella destinazione. Rimuovi un fondo disegnato solo se il progetto del logo lo consente.

Posso usare lo stesso file in tutte le firme e-mail?

Parti da PNG e prova l’editor della firma, i messaggi ricevuti e le modalità chiara e scura. Un’immagine ospitata deve restare disponibile al suo indirizzo pubblico; una incorporata deve superare l’elaborazione del sistema di posta. Mantieni i contatti come testo vero perché rimangano disponibili quando le immagini sono bloccate. Una sola anteprima corretta nell’editor del mittente non basta.

Convertire PNG in SVG rende scalabile il logo?

Incorporare PNG in SVG conserva i pixel originali. Ricalcare o ridisegnare può creare tracciati vettoriali, ma anche cambiare curve, spazi o lettere. Chiedi prima l’originale vettoriale e fai confrontare ogni ricostruzione con il logo approvato.

Cosa faccio se il logo supera un limite di caricamento?

Controlla prima se il limite riguarda il peso in KB o le dimensioni in pixel. Esporta i valori richiesti, elimina lo spazio vuoto involontario ed evita ingrandimenti inutili. Per PNG, prova la compressione senza perdita prima di sacrificare i bordi. Se serve un formato con perdita, confronta il file effettivamente scaricato mentre abbassi la qualità. La guida alla riduzione del peso delle immagini spiega i compromessi. Non esiste un unico obiettivo in KB per tutti i loghi e le destinazioni.

Perché lettere o colori cambiano dopo la conversione?

Confronta il progetto modificabile, l’SVG esportato, l’immagine scaricata e il risultato inserito per trovare il primo passaggio diverso. Font mancanti o sostituiti rimandano all’esportazione del testo; effetti o immagini assenti possono indicare contenuti SVG non supportati. Una variazione di colore richiede il controllo del profilo sorgente e dell’esportazione per schermo. Correggi quel passaggio ed esporta di nuovo, anziché riconvertire ripetutamente una copia già errata.