# Logotypstorlekar för webbplatser, sociala medier och tryck

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

Folk frågar efter rätt logotypstorlek som om det fanns ett enda tal. Det gör det inte: det finns en masterfil och en vettig storlek för varje plats den hamnar på. Här är de platserna, med ytstorlekarna och filerna att använda.

## The short version

- Det finns ingen enskild korrekt logotypstorlek, så behåll en vektormasterfil och exportera från den för varje plats logotypen visas på.
- På webbplatser använder du en SVG-logotyp och sätter dess storlek efter höjd i CSS så att den förblir skarp på varje skärm.
- För profilbilder i sociala medier laddar du upp en kvadratisk bild och håller logotypen väl innanför mitten, eftersom de flesta plattformar beskär profilbilder till en cirkel.
- När du exporterar en PNG-logotyp, gör den minst dubbelt så stor som den ska visas så att den förblir skarp på skärmar med hög pixeltäthet.
- För tryck använder du en PDF eller SVG i vektor, eller en rasterfil i 300 dpi i den slutliga tryckta storleken.

Det finns ingen enskild **logotypstorlek** som fungerar överallt. Behåll din logotyp som en vektormaster, en SVG eller PDF, som skalas till vilken storlek som helst utan att bli suddig, och exportera från den för varje plats den hamnar på: en SVG med storlek efter höjd för webbplatsens huvud, en kvadratisk version för profilbilder, en horisontell version för bannrar och en fil i 300 dpi för tryck. Det som ändras från plats till plats är ytan och hur mycket av den logotypen ska fylla.

## Börja med en masterfil, inte en storlek

Vektorfiler beskriver former snarare än pixlar, så samma fil är skarp i en telefon och på en butiksfasad. Varje annan fil du gör ska exporteras från den här mastern, aldrig från en skärmbild eller en gammal PNG. Om du bara har en liten rasterlogotyp, låt rita om den som vektor före allt annat, för det sparar dig besvär i varje jobb efteråt.

| Fil | Typ | Använd till |
| --- | --- | --- |
| SVG | Vektor | Webbplatser, appar och som master för skärmarbete |
| PDF | Vektor | Tryckerier, skyltning och allt som skickas till en leverantör |
| PNG med transparens | Raster | Presentationer, dokument, inlägg i sociala medier och e-post |
| JPG | Raster | Bara där en enfärgad bakgrund går bra, aldrig för en logotyp som ligger på färg |

Två vektorfiler och en transparent PNG täcker nästan alla önskemål. [SVG eller PNG](https://gradiently.design/sv/guide/svg-vs-png) förklarar avvägningen mer i detalj.

## Logotypstorlek för webbplatser

På en webbplats ska logotypen storleksätts efter höjd, inte bredd, så att ett brett ordmärke och en kompakt symbol ligger på samma baslinje i ditt huvud. Använd SVG så att den förblir skarp på skärmar med hög pixeltäthet och ge den en vettig maxbredd för 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>
```

Attributen width och height reserverar plats så att sidan inte hoppar medan logotypen laddas. Höjderna här är en utgångspunkt, så anpassa dem till ditt huvud.

Din favicon är en separat, kvadratisk, förenklad fil, inte den hela logotypen förminskad. Webbläsare visar den i mycket små storlekar, så den blir oftast en enda bokstav eller symbol. [Favicon-design](https://gradiently.design/sv/guide/favicon-design) listar de exakta filerna, och Googles [riktlinjer för favicon](https://support.google.com/webmasters/answer/9290858) kräver en kvadratisk ikon i en multipel av 48 pixlar.

## Logotypstorlek för sociala medier

Sociala plattformar använder din logotyp på två mycket olika ställen: den lilla profilbilden och det breda omslaget eller bannern. De behöver olika versioner av logotypen, inte samma fil hoptryckt.

### Profilbilder

- Ladda upp en **kvadratisk** bild. De flesta plattformar beskär profilbilder till en cirkel, så hörnen försvinner.
- Använd din **ikon- eller staplade** version, inte en lång horisontell lockup. Ett brett ordmärke blir oläsligt i en liten cirkel.
- Håll logotypen inom ungefär **mittersta två tredjedelarna** av kvadraten, med jämnt avstånd runt om.
- Lägg den på en **enfärgad eller lugn bakgrund** som fyller kvadraten, så att cirkeln ser avsiktlig ut.
- Kontrollera den i verklig storlek i din egen telefon innan du byter den överallt.

En kvadratisk profilbild med ordmärket fern centrerat på en grön gradient, med utrymme runt för en rund beskärning

Ett kort ordmärke centrerat med generösa marginaler klarar den runda beskärningen.

En bred LinkedIn-profilbanner med orden Fern Studio och Växter för små utrymmen på samma gröna gradient

Bannern kan bära hela namnet och en rad om dig, eftersom den har bredden för det.

### Omslag och bannrar

Omslagsbilder är breda och beskärs olika på telefoner och datorer, och profilbilden överlappar ofta ett hörn. Håll logotypen och orden nära mitten och låt bakgrunden bära ut till kanterna.

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

Fyra vanliga bannrar, ritade i skala. De är alla mycket bredare än höga, så en horisontell logotyp eller en enkel namnrad passar dem bäst.

I inlägg är logotypen en signatur, inte rubriken. En bra utgångspunkt är att hålla den liten, i ett konsekvent hörn, i samma storlek i varje inlägg, så att den bygger igenkänning utan att konkurrera med budskapet. [Bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes) har varje inläggsstorlek.

## Logotypstorlekar för e-post och tryck

| Plats | Ytstorlek | Logotypfil |
| --- | --- | --- |
| E-posthuvud | 1200×600 | PNG, exporterad i dubbla visningsstorleken |
| E-postsignatur | 600×200 | Liten PNG, många e-postappar blockerar SVG |
| Länkförhandsvisning (Open Graph) | 1200×630 | Logotypen nära mitten, PNG eller JPG |
| Visitkort | 1050×600 i 300 dpi | PDF i vektor från mastern |
| A5-flygblad | 1748×2480 i 300 dpi | PDF i vektor från mastern |
| A4-affisch | 2480×3508 i 300 dpi | PDF i vektor från mastern |

Tryckstorlekar anges i pixlar vid 300 dpi. Vektorlogotyper trycks skarpt i vilken storlek som helst, medan rasterlogotyper behöver 300 dpi i den slutliga tryckta storleken.

E-post är den krångliga: många e-postappar visar inte SVG-bilder, så använd en transparent PNG. Exportera den i dubbla bredden mot den du vill visa den i och sätt sedan visningsbredden i HTML, så att den förblir skarp på telefonskärmar med hög pixeltäthet. För tryck, läs [bildupplösning för tryck](https://gradiently.design/sv/guide/image-resolution-for-print) innan du skickar något till ett tryckeri, och se [design av e-postsignatur](https://gradiently.design/sv/guide/email-signature-design) för själva signaturen.

> **Exportera i dubbla visningsstorleken** En PNG som visas 200 pixlar bred ska exporteras i 400. Skärmar med hög pixeltäthet packar två eller fler enhetspixlar i varje CSS-pixel, och en logotyp exporterad i exakt visningsstorlek ser mjuk ut på dem.

## Gör varje storlek från en design

Det tråkiga med logotypstorlekar är inte logotypen, utan att bygga om omslaget, inlägget, storyn och kortet runt den varje gång. I Gradiently kan du be Designer om de andra storlekarna, eller med Pro ändra storlek på en design till alla storlekar i ett steg, och din bakgrund renderas på nytt i varje form i stället för att beskäras. Egna storlekar går från 200 till 8 000 pixlar när en leverantör ber om något ovanligt. [Logotypvarianter](https://gradiently.design/sv/guide/logo-variations) tar upp vilken version av logotypen som ska in i varje.

## FAQ

### Vilken storlek ska en logotyp ha?

Det finns ingen enskild storlek. Behåll en vektormasterfil och exportera en version för varje användning: SVG för webbplatser, en kvadratisk PNG för profilbilder, breda bannrar för omslag och PDF i vektor för tryck.

### Vilken är den bästa logotypstorleken för en webbplats?

Använd en SVG och sätt den efter höjd i CSS så att den passar ditt huvud på varje skärm. Ange attributen width och height så att sidan inte flyttar sig medan den laddas.

### Vilken storlek ska min logotyp ha för profilbilder i sociala medier?

Ladda upp en kvadratisk bild och håll logotypen i de mittersta två tredjedelarna, eftersom de flesta plattformar beskär profilbilder till en cirkel. Använd din ikon eller staplade logotyp i stället för en bred.

### Vilken upplösning ska en logotyp ha för tryck?

Använd en PDF eller SVG i vektor, som trycks skarpt i vilken storlek som helst. Om du bara har en rasterfil behöver den 300 dpi i den slutliga tryckta storleken.

### Varför ser min logotyp suddig ut?

Den exporterades förmodligen i sin visningsstorlek, eller skalades upp från en liten fil. Exportera PNG-filer i dubbla visningsstorleken från en vektormaster, eller använd SVG på webben.