Preparare il logo per il sito web, la firma e-mail e la favicon

Per preparare un logo per un sito web, trasformi un file master in un piccolo kit: un SVG ottimizzato per intestazione e piè di pagina, versioni PNG in due o tre larghezze per firme e-mail, documenti e moduli di caricamento, un’immagine del profilo quadrata, un set di favicon con i tag HTML e i colori del marchio come valori esatti. Partendo dall’SVG del grafico, SchweizerIMG crea ciascuno di questi file nel Suo browser, in poche elaborazioni.

Questo caso d’uso è la lista di controllo e l’ordine di lavoro. Perché il master dovrebbe essere un vettore è spiegato in SVG o PNG per il logo; quali dimensioni di icona si aspettano browser e schermate home, in dimensioni delle favicon. Un logo non ancora pubblicato — una nuova immagine coordinata prima del lancio — non lascia mai il Suo dispositivo durante il lavoro; veda la pagina sulla sicurezza.

Il kit del logo: i file di cui ha bisogno il sito di una PMI

Prima di iniziare: chiedere al grafico i file giusti

• Il master in SVG, con il testo convertito in tracciati. SchweizerIMG non carica mai font esterni e disegna il testo rimasto con i font inclusi; un logotipo in un font particolare potrebbe altrimenti cambiare.
• Il simbolo da solo, senza logotipo. Diventa la favicon e l’immagine del profilo, dove un logo completo è troppo piccolo per essere letto.
• Una versione chiara per sfondi scuri — un piè di pagina scuro, un tema e-mail scuro.
• I valori dei colori usati dal grafico, soprattutto per la stampa. I colori rilevati da un file sono valori per lo schermo.

Preparare il logo per il sito web, passo dopo passo

Ogni passaggio è un’elaborazione, e ogni elaborazione è un’operazione. Continua con un altro strumento passa un risultato senza scaricarlo nel frattempo — veda concatenare gli strumenti.

1. 1

   Ottimizzare l’SVG

   Apra Ottimizza SVG e aggiunga il file master. Sicuro (mantiene id, classi e stili) è la preimpostazione giusta se il Suo sito formatta il logo via CSS; altrimenti Aggressivo (file più piccolo). Lasci attivo Verifica che il risultato abbia un aspetto identico e mantenga titolo e descrizione: gli screen reader li leggono. Script e file collegati vengono prima rimossi.

2. 2

   Esportare le versioni PNG e WebP

   In Da SVG a PNG, JPG, WebP o AVIF imposti Dimensione per su Larghezza e inserisca più larghezze, ad esempio 400 e 800 — un’immagine ciascuna, in un’unica elaborazione. Lasci lo sfondo trasparente. Scelga PNG per e-mail e documenti, poi ripeta con WebP per le pagine web.

3. 3

   Creare un’immagine del profilo quadrata

   Esporti il simbolo in una larghezza, poi apra Estendi area con Ottieni: Quadrato e un colore di riempimento del Suo marchio. Lasci un po’ di spazio attorno al segno: molte immagini del profilo vengono mostrate come cerchio.

4. 4

   Creare il set di favicon

   Apra Favicon e icone app con l’SVG del simbolo, aggiunga un po’ di spazio e un colore di sfondo per le icone Apple e mascherabili, e indichi dove si troveranno i file sul sito. Scarichi il set e incolli i tag di snippet.html nel <head>.

5. 5

   Annotare i colori del marchio

   Apra un PNG del logo in Selettore colori e tavolozza, rilevi i colori esatti o lasci estrarre la tavolozza, e crei le variabili CSS (.css), il JSON e un’immagine dei campioni (.png). Ogni colore viene fornito in HEX, RGB, HSL, HSV e OKLCH.

Solo un JPG o un PNG del logo? Ripulirlo o vettorizzarlo

Molte PMI hanno il logo solo come immagine presa da un vecchio sito o da un’e-mail. Due strumenti aiutano, entro limiti chiari:

• Sfondo trasparente: Rimuovi colore di sfondo rende trasparente uno sfondo uniforme in base al suo colore — senza IA. Colore di sfondo su auto lo rileva dai bordi. Collegato ai bordi (mantiene le aree racchiuse) lascia il bianco dentro lettere come la O; Ovunque nell’immagine lo rimuove anche lì. Aumenti la Tolleranza per un JPG con rumore di compressione e lasci attivo Bordi smussati. Una sfumatura o una foto sullo sfondo non si tolgono in modo pulito.
• Di nuovo un vettore: Da immagine a SVG (vettorizza) ricostruisce come forme i loghi semplici a colori piatti; la preimpostazione Logo (fino a 8 colori piatti) va bene per la maggior parte. Il risultato è una ricostruzione, non il file del grafico: lo controlli in grande e in piccolo, e parta dalla sorgente più grande e pulita che ha. Quali piani includono Da immagine a SVG (vettorizza) è indicato nella pagina dei prezzi.

Prima della pubblicazione: l’ultimo controllo

• Intestazione su uno smartphone e su uno schermo ad alta densità: l’SVG deve essere nitido, il logotipo leggibile.
• Sfondi chiari e scuri: un logo scuro su un PNG trasparente sparisce in un tema e-mail scuro — lì usi la versione chiara.
• La scheda e la schermata home: la favicon deve essere riconoscibile a 16 pixel e non tagliata su uno smartphone.
• Nomi di file coerenti: ad esempio muster-ag-logo-800.png, così i colleghi scelgono il file giusto.
• Una cartella per il kit: SVG master, esportazioni, set di favicon e file dei colori insieme, così il prossimo aggiornamento parte dagli stessi file.

Le agenzie che preparano kit simili per più clienti trovano la procedura completa nella pagina per le agenzie.

Domande frequenti

Di quali file del logo ha bisogno il sito di una PMI?

Un SVG ottimizzato per il sito, PNG trasparenti in due o tre larghezze per e-mail e documenti, un’immagine del profilo quadrata, un set di favicon e i valori dei colori. Un solo SVG master basta per crearli tutti.

Posso creare una favicon da un logo con un logotipo lungo?

Usi piuttosto il simbolo o un’iniziale: un logotipo è illeggibile a 16 pixel. Se non c’è un simbolo, Favicon e icone app crea il set anche da un testo o da un’emoji su un colore del marchio.

Come trovo i valori HEX dei colori del mio marchio?

Apra il logo in Selettore colori e tavolozza e rilevi i colori. Per la stampa chieda al grafico i valori definiti: i valori CMYK mostrati sono approssimativi.

Posso togliere lo sfondo bianco da un logo in JPG?

Sì, se lo sfondo è uniforme: Rimuovi colore di sfondo lo rende trasparente e salva il risultato in PNG, WebP o AVIF. Poi il logo sta bene su qualsiasi colore.

Pronto a mettere ordine nel Suo logo? Apra gli strumenti vettoriali e gli strumenti di creazione, consulti i formati immagine supportati oppure crei un account gratuito.