Logostørrelser til hjemmesider, sociale medier og tryk

Der findes ingen enkelt logostørrelse, der virker overalt. Hav dit logo som en vektor-masterfil, en SVG eller PDF, der kan skaleres til enhver størrelse uden at blive uskarp, og eksportér fra den til hvert sted, det skal bruges: en SVG sat efter højden til headeren på din hjemmeside, en kvadratisk version til profilbilleder, en vandret version til bannere og en fil i 300 dpi til tryk. Det, der skifter fra sted til sted, er lærredet, og hvor meget af det logoet skal fylde.

Start med en masterfil, ikke en størrelse

Vektorfiler beskriver former frem for pixels, så den samme fil er skarp på en telefon og på en butiksfacade. Alle andre filer, du laver, skal eksporteres fra denne master, aldrig fra et skærmbillede eller en gammel PNG. Har du kun et lille rasterlogo, så få det tegnet om som vektor, før du gør noget andet; det sparer dig besvær ved hver eneste opgave bagefter.

Logostørrelse på hjemmesiden

På en hjemmeside skal du sætte logoets størrelse efter højden, ikke bredden, så et bredt ordmærke og et kompakt symbol står på samme grundlinje i din header. Brug SVG’en, så det forbliver skarpt på skærme med høj pixeltæthed, og giv det en fornuftig maksimal bredde til 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>

Dit favicon er en separat, kvadratisk, forenklet fil, ikke hele logoet formindsket. Browsere viser det i meget små størrelser, så det bliver som regel til et enkelt bogstav eller symbol. Design af favicon lister de præcise filer, og Googles retningslinjer for favicons beder om et kvadratisk ikon i et multiplum af 48 pixels.

Logostørrelse til sociale medier

Sociale platforme bruger dit logo to meget forskellige steder: det lille profilbillede og det brede cover eller banner. De kræver forskellige versioner af logoet, ikke den samme fil klemt ind.

Profilbilleder

• Upload et kvadratisk billede. De fleste platforme beskærer profilbilleder til en cirkel, så hjørnerne forsvinder.
• Brug din ikon- eller stablede version, ikke en lang vandret opsætning. Et bredt ordmærke bliver ulæseligt i en lille cirkel.
• Hold logoet inden for cirka de midterste to tredjedele af kvadratet, med jævn luft hele vejen rundt.
• Sæt det på en ensfarvet eller rolig baggrund, der fylder kvadratet, så cirklen ser bevidst ud.
• Tjek det i den rigtige størrelse på din egen telefon, før du skifter det alle steder.

Covers og bannere

Coverbilleder er brede og beskæres forskelligt på telefoner og computere, og profilbilledet overlapper ofte ét hjørne. Hold dit logo og dine ord tæt på midten, og lad baggrunden løbe ud til kanterne.

I opslag er logoet en signatur, ikke overskriften. Et godt udgangspunkt er at holde det lille, i et fast hjørne, i samme størrelse i hvert opslag, så det bygger genkendelse op uden at konkurrere med budskabet. Billedstørrelser til sociale medier har alle opslagsstørrelser.

Logostørrelser til e-mail og tryk

E-mail er den besværlige: mange mailprogrammer viser ikke SVG-billeder, så brug en gennemsigtig PNG. Eksportér den i dobbelt så stor bredde, som den skal vises i, og angiv så visningsbredden i HTML’en, så den forbliver skarp på telefonskærme med høj pixeltæthed. Til tryk skal du læse billedopløsning til tryk, før du sender noget til et trykkeri, og se design af e-mailsignatur for selve signaturen.

Sådan laver du alle størrelser ud fra ét design

Det kedelige ved logostørrelser er ikke logoet, men at bygge coveret, opslaget, storyen og kortet op omkring det hver gang. I Gradiently kan du bede Designer om de andre størrelser eller med Pro ændre et design til alle størrelser i ét trin, og din baggrund gengives på ny i hver form i stedet for at blive beskåret. Tilpassede størrelser går fra 200 til 8.000 pixels, når en leverandør beder om noget usædvanligt. Logovarianter gennemgår, hvilken version af logoet der skal i hver af dem.