# Logostørrelser til hjemmesider, sociale medier og tryk

[Canonical HTML page](https://gradiently.design/da/guide/logo-sizes)

Folk spørger efter den rigtige logostørrelse, som om der fandtes ét tal. Det gør der ikke: der er én masterfil og en fornuftig størrelse til hvert sted, den lander. Her er de steder med lærredsstørrelser og de filer, du skal bruge.

## The short version

- Der findes ingen enkelt korrekt logostørrelse; hav én vektor-masterfil, og eksportér fra den til hvert sted, logoet vises.
- På hjemmesider skal du bruge et SVG-logo og sætte størrelsen efter højden i CSS, så det forbliver skarpt på alle skærme.
- Til profilbilleder på sociale medier skal du uploade et kvadratisk billede og holde logoet et godt stykke inde i midten, fordi de fleste platforme beskærer profilbilleder til en cirkel.
- Når du eksporterer et PNG-logo, så lav det mindst dobbelt så stort, som det vises, så det forbliver skarpt på skærme med høj pixeltæthed.
- Til tryk skal du bruge en vektor-PDF eller SVG eller en rasterfil ved 300 dpi i den endelige trykte størrelse.

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.

| Fil | Type | Brug den til |
| --- | --- | --- |
| SVG | Vektor | Hjemmesider, apps og som master til skærmarbejde |
| PDF | Vektor | Trykkerier, skilte og alt, der sendes til en leverandør |
| PNG med gennemsigtighed | Raster | Slides, dokumenter, opslag på sociale medier og e-mail |
| JPG | Raster | Kun hvor en ensfarvet baggrund er fin, aldrig til et logo, der sidder på farve |

To vektorfiler og én gennemsigtig PNG dækker næsten alle ønsker. [SVG vs. PNG](https://gradiently.design/da/guide/svg-vs-png) forklarer afvejningen nærmere.

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

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

Attributterne width og height reserverer plads, så siden ikke hopper, mens logoet indlæses. Højderne her er et udgangspunkt; tilpas dem til din header.

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](https://gradiently.design/da/guide/favicon-design) lister de præcise filer, og Googles [retningslinjer for favicons](https://support.google.com/webmasters/answer/9290858) 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.

Et kvadratisk profilbillede med ordmærket fern centreret på en grøn gradient, med plads omkring til en rund beskæring

Et kort ordmærke, centreret med generøse marginer, overlever den runde beskæring.

Et bredt LinkedIn-profilbanner med ordene Fern Studio og Planter til små rum på samme grønne gradient

Banneret kan bære hele navnet og en linje om dig, fordi det har bredden til det.

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

- Facebook-cover 1640×624: 1640 × 624
- LinkedIn-banner 1584×396: 1584 × 396
- X-header 1500×500: 1500 × 500
- YouTube-kanalbillede 2560×1440: 2560 × 1440

Fire almindelige bannere, tegnet i korrekt forhold. De er alle meget bredere, end de er høje, så et vandret logo eller en enkel navnelinje passer bedst.

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](https://gradiently.design/da/guide/social-media-image-sizes) har alle opslagsstørrelser.

## Logostørrelser til e-mail og tryk

| Sted | Lærredsstørrelse | Logofil |
| --- | --- | --- |
| E-mailheader | 1200×600 | PNG, eksporteret i dobbelt visningsstørrelse |
| E-mailsignatur | 600×200 | Lille PNG; mange mailprogrammer blokerer SVG |
| Linkforhåndsvisning (Open Graph) | 1200×630 | Logoet holdt tæt på midten, PNG eller JPG |
| Visitkort | 1050×600 ved 300 dpi | Vektor-PDF fra masteren |
| A5-flyer | 1748×2480 ved 300 dpi | Vektor-PDF fra masteren |
| A4-plakat | 2480×3508 ved 300 dpi | Vektor-PDF fra masteren |

Trykstørrelser er angivet i pixels ved 300 dpi. Vektorlogoer trykkes skarpt i enhver størrelse; rasterlogoer kræver 300 dpi i den endelige trykte størrelse.

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](https://gradiently.design/da/guide/image-resolution-for-print), før du sender noget til et trykkeri, og se [design af e-mailsignatur](https://gradiently.design/da/guide/email-signature-design) for selve signaturen.

> **Eksportér i dobbelt visningsstørrelse** En PNG, der vises 200 pixels bred, skal eksporteres i 400. Skærme med høj pixeltæthed pakker to eller flere enhedspixels ind i hver CSS-pixel, og et logo eksporteret i præcis visningsstørrelsen ser blødt ud på dem.

## 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](https://gradiently.design/da/guide/logo-variations) gennemgår, hvilken version af logoet der skal i hver af dem.

## FAQ

### Hvor stort skal et logo være?

Der findes ingen enkelt størrelse. Hav en vektor-masterfil, og eksportér en version til hver brug: SVG til hjemmesider, en kvadratisk PNG til profilbilleder, brede bannere til covers og vektor-PDF til tryk.

### Hvad er den bedste logostørrelse til en hjemmeside?

Brug en SVG, og sæt den efter højden i CSS, så den passer i din header på alle skærme. Angiv attributterne width og height, så siden ikke flytter sig, mens den indlæses.

### Hvilken størrelse skal mit logo have til profilbilleder på sociale medier?

Upload et kvadratisk billede, og hold logoet i de midterste to tredjedele, fordi de fleste platforme beskærer profilbilleder til en cirkel. Brug dit ikon eller dit stablede logo frem for et bredt.

### Hvilken opløsning skal et logo have til tryk?

Brug en vektor-PDF eller SVG, som trykkes skarpt i enhver størrelse. Har du kun en rasterfil, kræver den 300 dpi i den endelige trykte størrelse.

### Hvorfor ser mit logo uskarpt ud?

Det er sandsynligvis eksporteret i visningsstørrelsen eller skaleret op fra en lille fil. Eksportér PNG’er i dobbelt visningsstørrelse fra en vektor-master, eller brug SVG på nettet.