Logostørrelser for nettsider, sosiale medier og trykk

Ingen enkelt logostørrelse fungerer overalt. Behold logoen som en vektororiginal, en SVG eller PDF, som kan skaleres uten å bli uskarp. Eksporter fra den til hvert brukssted: en SVG med angitt høyde til toppfeltet på nettsiden, en kvadratisk versjon til profilbilder, en liggende versjon til bannere og en fil med 300 dpi til trykk. Det som endrer seg mellom bruksstedene, er lerretet og hvor mye av det logoen skal fylle.

Begynn med en originalfil, ikke en størrelse

Vektorfiler beskriver former fremfor piksler, så samme fil er skarp både på en telefon og en butikkfasade. Alle andre filer bør eksporteres fra denne originalen, aldri fra et skjermbilde eller en gammel PNG. Har du bare en liten rasterlogo, bør du få den tegnet på nytt som vektor først; det sparer deg for problemer i alt senere arbeid.

Logostørrelse på nettsider

På en nettside angir du logostørrelsen etter høyde, ikke bredde, slik at en bred ordlogo og et kompakt symbol står på samme grunnlinje i toppfeltet. Bruk SVG for skarphet på skjermer med høy pikseltetthet, og sett en fornuftig maksimal bredde for små telefoner.

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

Et favicon er en egen, kvadratisk og forenklet fil, ikke hele logoen krympet. Nettlesere viser det i svært små størrelser, så det blir vanligvis én bokstav eller ett symbol. Favicon-design lister de nøyaktige filene, og Googles retningslinjer for favicon ber om et kvadratisk ikon med mål som er et multiplum av 48 piksler.

Logostørrelse i sosiale medier

Sosiale plattformer bruker logoen på to svært ulike steder: det lille profilbildet og det brede forsidebildet eller banneret. De trenger ulike logovarianter, ikke den samme filen presset inn.

Profilbilder

• Last opp et kvadratisk bilde. De fleste plattformer beskjærer profilbilder til en sirkel, så hjørnene forsvinner.
• Bruk ikonet eller den stående varianten, ikke en lang liggende kombinasjon. En bred ordlogo blir uleselig i en liten sirkel.
• Hold logoen innenfor omtrent de midterste to tredelene av kvadratet, med jevn luft rundt.
• Legg den på en ensfarget eller rolig bakgrunn som fyller kvadratet, så sirkelen ser gjennomtenkt ut.
• Sjekk den i faktisk størrelse på din egen telefon før du endrer den overalt.

Forsidebilder og bannere

Forsidebilder er brede og beskjæres ulikt på telefoner og datamaskiner. Profilbildet overlapper ofte ett hjørne. Hold logo og tekst nær midten, og la bakgrunnen fortsette ut til kantene.

I innlegg er logoen en signatur, ikke overskriften. Et godt utgangspunkt er å holde den liten, i et fast hjørne og i samme størrelse i hvert innlegg. Da bygger den gjenkjennelse uten å konkurrere med budskapet. Bildestørrelser i sosiale medier har alle innleggsformatene.

Logostørrelser for e-post og trykk

E-post er det vanskelige tilfellet: mange e-postapper viser ikke SVG-bilder, så bruk en gjennomsiktig PNG. Eksporter den i dobbelt ønsket visningsbredde, og sett deretter visningsbredden i HTML, så den er skarp på telefonskjermer med høy pikseltetthet. Til trykk bør du lese bildeoppløsning for trykk før du sender noe til et trykkeri. Se design av e-postsignatur for selve signaturen.

Lag alle størrelser fra ett design

Det tidkrevende ved logostørrelser er ikke logoen, men å bygge forsidebildet, innlegget, storyen og kortet rundt den på nytt hver gang. I Gradiently kan du be Designer om de andre størrelsene, eller med Pro endre et design til alle størrelser i ett trinn. Bakgrunnen gjengis på nytt i hvert format fremfor å beskjæres. Egendefinerte størrelser går fra 200 til 8 000 piksler når en leverandør ber om noe uvanlig. Logovarianter forklarer hvilken logoversjon du bør bruke i hvert format.