# Logostørrelser for nettsider, sosiale medier og trykk

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

Folk spør etter riktig logostørrelse som om svaret var ett tall. Det er det ikke: du trenger én originalfil og en passende størrelse for hvert brukssted. Her finner du formatene og filene du bør bruke.

## The short version

- Det finnes ingen enkelt riktig logostørrelse; behold én vektororiginal og eksporter fra den til hvert sted logoen skal vises.
- På nettsider bruker du en SVG-logo og angir høyden i CSS, slik at den holder seg skarp på alle skjermer.
- Til profilbilder i sosiale medier laster du opp et kvadratisk bilde og holder logoen godt innenfor midten, fordi de fleste plattformer beskjærer profilbilder til sirkler.
- Når du eksporterer en PNG-logo, bør den være minst dobbelt så stor som visningsstørrelsen for å være skarp på skjermer med høy pikseltetthet.
- Til trykk bruker du en vektor-PDF eller SVG, eller en rasterfil med 300 dpi i den endelige trykkstørrelsen.

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.

| Fil | Type | Brukes til |
| --- | --- | --- |
| SVG | Vektor | Nettsider, apper og som original til skjermbruk |
| PDF | Vektor | Trykkerier, skilt og alt som sendes til en leverandør |
| PNG med gjennomsiktighet | Raster | Presentasjoner, dokumenter, innlegg og e-post |
| JPG | Raster | Bare når en ensfarget bakgrunn er greit, aldri for en logo som skal ligge på farge |

To vektorfiler og én gjennomsiktig PNG dekker nesten alle behov. [SVG eller PNG](https://gradiently.design/nb/guide/svg-vs-png) forklarer avveiningen nærmere.

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

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

Bredde- og høydeattributtene reserverer plass så siden ikke hopper mens logoen lastes. Høydene her er et utgangspunkt; tilpass dem til toppfeltet ditt.

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](https://gradiently.design/nb/guide/favicon-design) lister de nøyaktige filene, og Googles [retningslinjer for favicon](https://support.google.com/webmasters/answer/9290858) 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.

Et kvadratisk profilbilde med ordlogoen fern midt på en grønn gradient, med plass rundt til sirkelbeskjæring

En kort ordlogo midtstilt med romslige marger tåler sirkelbeskjæringen.

Et bredt LinkedIn-profilbanner med teksten Fern Studio og Planter til små rom på den samme grønne gradienten

Banneret kan ha fullt navn og en linje om deg, fordi det har plass i bredden.

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

- Facebook-forside 1640×624: 1640 × 624
- LinkedIn-banner 1584×396: 1584 × 396
- X-toppbilde 1500×500: 1500 × 500
- YouTube-kanalbilde 2560×1440: 2560 × 1440

Fire vanlige bannere tegnet i riktig forhold. Alle er langt bredere enn de er høye, så en liggende logo eller en enkel navnelinje passer best.

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

## Logostørrelser for e-post og trykk

| Sted | Lerretsstørrelse | Logofil |
| --- | --- | --- |
| Toppbilde i e-post | 1200×600 | PNG, eksportert i dobbelt visningsstørrelse |
| E-postsignatur | 600×200 | Liten PNG; mange e-postapper blokkerer SVG |
| Lenkeforhåndsvisning (Open Graph) | 1200×630 | Logo nær midten, PNG eller JPG |
| Visittkort | 1050×600 ved 300 dpi | Vektor-PDF fra originalen |
| A5-flyer | 1748×2480 ved 300 dpi | Vektor-PDF fra originalen |
| A4-plakat | 2480×3508 ved 300 dpi | Vektor-PDF fra originalen |

Trykkstørrelsene er oppgitt i piksler ved 300 dpi. Vektorlogoer trykkes skarpt i alle størrelser; rasterlogoer trenger 300 dpi i endelig trykkstørrelse.

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](https://gradiently.design/nb/guide/image-resolution-for-print) før du sender noe til et trykkeri. Se [design av e-postsignatur](https://gradiently.design/nb/guide/email-signature-design) for selve signaturen.

> **Eksporter i dobbelt visningsstørrelse** En PNG som vises 200 piksler bred, bør eksporteres i 400. Skjermer med høy pikseltetthet pakker to eller flere skjermpiksler inn i hver CSS-piksel. En logo eksportert i nøyaktig visningsstørrelse ser derfor uskarp ut på dem.

## 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](https://gradiently.design/nb/guide/logo-variations) forklarer hvilken logoversjon du bør bruke i hvert format.

## FAQ

### Hvor stor bør en logo være?

Det finnes ingen enkelt størrelse. Behold en vektororiginal og eksporter en versjon til hvert formål: SVG til nettsider, kvadratisk PNG til profilbilder, brede bannere til forsidebilder og vektor-PDF til trykk.

### Hva er beste logostørrelse på en nettside?

Bruk SVG og angi høyden i CSS så den passer toppfeltet på alle skjermer. Oppgi bredde- og høydeattributter så siden ikke flytter seg under lasting.

### Hvor stor bør logoen være i profilbilder på sosiale medier?

Last opp et kvadratisk bilde og hold logoen innenfor de midterste to tredelene, fordi de fleste plattformer beskjærer profilbilder til sirkler. Bruk ikonvarianten eller den stående logoen fremfor en bred versjon.

### Hvilken oppløsning trenger en logo til trykk?

Bruk vektor-PDF eller SVG, som trykkes skarpt i alle størrelser. Har du bare en rasterfil, trenger den 300 dpi i den endelige trykkstørrelsen.

### Hvorfor ser logoen min uskarp ut?

Den ble trolig eksportert i visningsstørrelse eller skalert opp fra en liten fil. Eksporter PNG i dobbelt visningsstørrelse fra en vektororiginal, eller bruk SVG på nettet.