# Logon koot verkkosivuille, someen ja painoon

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

Oikeaa logon kokoa kysytään kuin se olisi yksi luku. Yksi päätiedosto ja sopiva koko joka käyttöpaikkaan ratkaisevat asian. Tässä pinnat, niiden mitat ja käytettävät tiedostot.

## The short version

- Yhtä oikeaa logon kokoa ei ole. Säilytä yksi vektoripäätiedosto ja vie siitä versio joka käyttöpaikkaan.
- Käytä verkkosivuilla SVG-logoa ja määritä korkeus CSS:llä, jotta se pysyy terävänä kaikilla näytöillä.
- Lataa someprofiiliin neliökuva ja pidä logo keskellä, sillä useimmat alustat rajaavat profiilikuvan ympyräksi.
- Vie PNG-logo vähintään kaksinkertaisena näyttökokoonsa nähden, jotta se pysyy terävänä tiheillä näytöillä.
- Käytä painoon vektori-PDF:ää tai SVG:tä tai rasteritiedostoa 300 dpi:n tarkkuudella lopullisessa painokoossa.

Yhtä kaikkialla toimivaa **logon kokoa** ei ole. Säilytä logo vektoripäätiedostona, SVG:nä tai PDF:nä, joka skaalautuu sumentumatta. Vie siitä versio joka käyttöön: korkeuden mukaan mitoitettu SVG sivuston otsakkeeseen, neliöversio profiilikuviin, vaakaversio bannereihin ja 300 dpi:n tiedosto painoon. Käyttöpaikasta toiseen muuttuvat pinta ja se, kuinka suuren osan logo siitä täyttää.

## Aloita päätiedostosta, älä koosta

Vektoritiedosto kuvaa muotoja pikselien sijaan, joten sama tiedosto on terävä puhelimessa ja näyteikkunassa. Vie kaikki muut tiedostot tästä päätiedostosta, älä kuvakaappauksesta tai vanhasta PNG:stä. Jos sinulla on vain pieni rasterilogo, piirrä se ensin uudelleen vektorina. Se säästää vaivaa joka myöhemmässä työssä.

| Tiedosto | Tyyppi | Käyttö |
| --- | --- | --- |
| SVG | Vektori | Verkkosivut, sovellukset ja näyttötöiden päätiedosto |
| PDF | Vektori | Painot, kyltit ja toimittajille lähetettävät työt |
| Läpinäkyvä PNG | Rasteri | Diat, asiakirjat, somejulkaisut ja sähköposti |
| JPG | Rasteri | Vain kun kiinteä tausta käy, ei värin päälle asetettavalle logolle |

Kaksi vektoritiedostoa ja yksi läpinäkyvä PNG riittävät lähes kaikkiin pyyntöihin. [SVG ja PNG](https://gradiently.design/fi/guide/svg-vs-png) selittää valinnan tarkemmin.

## Verkkosivun logon koko

Mitoita verkkosivun logo korkeuden mukaan, jotta leveä nimilogo ja tiivis symboli istuvat samalla peruslinjalla otsakkeessa. Käytä SVG:tä terävyyden säilyttämiseen tiheillä näytöillä ja anna sille järkevä enimmäisleveys pienille puhelimille.

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

width- ja height-attribuutit varaavat tilaa, joten sivu ei hypähdä logon latautuessa. Korkeudet ovat lähtökohtia; säädä otsakkeeseesi sopiviksi.

Favicon on erillinen, neliömuotoinen ja pelkistetty tiedosto. Selaimet näyttävät sen hyvin pienenä, joten siitä tulee yleensä yksi kirjain tai symboli. [Faviconin suunnittelu](https://gradiently.design/fi/guide/favicon-design) luettelee tarkat tiedostot, ja Googlen [favicon-ohjeet](https://support.google.com/webmasters/answer/9290858) pyytävät neliökuvaketta, jonka koko on 48 pikselin monikerta.

## Logon koko sosiaaliseen mediaan

Somealustat käyttävät logoa kahdessa hyvin erilaisessa paikassa: pienessä profiilikuvassa ja leveässä kannessa tai bannerissa. Ne tarvitsevat eri logoversiot.

### Profiilikuvat

- Lataa **neliökuva**. Useimmat alustat rajaavat profiilikuvat ympyräksi, jolloin nurkat katoavat.
- Käytä **kuvake- tai pystyversiota**, älä pitkää vaakayhdistelmää. Leveä nimilogo muuttuu pienessä ympyrässä lukukelvottomaksi.
- Pidä logo suunnilleen neliön **keskimmäisten kahden kolmanneksen** sisällä, tasainen tila ympärillä.
- Aseta se **yksiväriselle tai rauhalliselle taustalle**, joka täyttää neliön, jotta ympyrä näyttää harkitulta.
- Tarkista todellisessa koossa omalla puhelimellasi ennen kaikkialle vaihtamista.

Neliömuotoinen profiilikuva, jossa nimilogo fern on vihreällä liukuvärillä ja ympärillä tilaa ympyrärajaukselle

Keskitetty lyhyt nimilogo väljillä marginaaleilla säilyy ympyrärajauksessa.

Leveä LinkedIn-profiilibanneri, jossa Fern Studio ja Kasveja pieniin tiloihin ovat samalla vihreällä liukuvärillä

Banneriin mahtuu koko nimi ja kuvaava rivi, sillä siinä on tarvittava leveys.

### Kannet ja bannerit

Kansikuvat ovat leveitä ja rajautuvat puhelimilla sekä tietokoneilla eri tavoin. Profiilikuva peittää usein yhtä nurkkaa. Pidä logo ja sanat lähellä keskustaa ja jatka tausta reunoille.

- Facebook-kansi 1640×624: 1640 × 624
- LinkedIn-banneri 1584×396: 1584 × 396
- X-otsake 1500×500: 1500 × 500
- YouTube-kanavakuva 2560×1440: 2560 × 1440

Neljä yleistä banneria mittakaavassa. Kaikki ovat selvästi korkeuttaan leveämpiä, joten vaakalogo tai yksinkertainen nimirivi sopii parhaiten.

Julkaisuissa logo on allekirjoitus. Hyvä lähtökohta on pitää se pienenä samassa nurkassa ja samankokoisena joka julkaisussa. Näin se rakentaa tunnistamista kilpailematta viestin kanssa. [Sosiaalisen median kuvakoot](https://gradiently.design/fi/guide/social-media-image-sizes) sisältää kaikki julkaisukoot.

## Logon koot sähköpostiin ja painoon

| Paikka | Pinnan koko | Logotiedosto |
| --- | --- | --- |
| Sähköpostin otsake | 1200×600 | PNG, viety kaksinkertaisena näyttökokoonsa nähden |
| Sähköpostin allekirjoitus | 600×200 | Pieni PNG; monet sähköpostisovellukset estävät SVG:n |
| Linkin esikatselu (Open Graph) | 1200×630 | Logo lähellä keskustaa, PNG tai JPG |
| Käyntikortti | 1050×600, 300 dpi | Vektori-PDF päätiedostosta |
| A5-esite | 1748×2480, 300 dpi | Vektori-PDF päätiedostosta |
| A4-juliste | 2480×3508, 300 dpi | Vektori-PDF päätiedostosta |

Painokoot annetaan pikseleinä 300 dpi:n tarkkuudella. Vektorilogo painuu terävänä joka koossa; rasterilogo tarvitsee 300 dpi lopullisessa painokoossa.

Sähköposti on hankala: moni sähköpostisovellus ei näytä SVG-kuvia, joten käytä läpinäkyvää PNG:tä. Vie se kaksi kertaa tavoitellun näyttöleveyden kokoisena ja määritä näyttöleveys HTML:ssä. Näin se pysyy terävänä tiheillä puhelinnäytöillä. Lue painoa varten [kuvan tarkkuus painoon](https://gradiently.design/fi/guide/image-resolution-for-print) ennen tiedoston lähettämistä painoon ja [sähköpostiallekirjoituksen suunnittelu](https://gradiently.design/fi/guide/email-signature-design) itse allekirjoituksesta.

> **Vie kaksinkertaisena näyttökokoon nähden** 200 pikselin leveänä näkyvä PNG pitäisi viedä 400 pikselin levyisenä. Tiheät näytöt pakkaavat jokaiseen CSS-pikseliin kaksi tai useampia laitepikseleitä. Täsmälleen näyttökoossa viety logo näyttää niillä pehmeältä.

## Jokainen koko yhdestä suunnitelmasta

Logon kokojen työläs osa on kannen, julkaisun, tarinan ja kortin rakentaminen sen ympärille yhä uudelleen. Gradientlyssä voit pyytää Designerilta muita kokoja tai muuttaa Prolla suunnitelman kaikkiin kokoihin yhdellä kertaa. Tausta piirtyy uudelleen joka muotoon. Mukautetut koot ovat 200:sta 8 000 pikseliin, jos toimittaja pyytää poikkeavaa kokoa. [Logoversiot](https://gradiently.design/fi/guide/logo-variations) kertoo, minkä version laitat mihinkin.

## FAQ

### Minkä kokoinen logon pitäisi olla?

Yhtä kokoa ei ole. Säilytä vektoripäätiedosto ja vie versio joka käyttöön: SVG sivustolle, neliö-PNG profiilikuviin, leveät bannerit kansiin ja vektori-PDF painoon.

### Mikä on paras logon koko verkkosivulle?

Käytä SVG:tä ja määritä korkeus CSS:llä, jotta se sopii otsakkeeseen joka näytöllä. Lisää width- ja height-attribuutit, ettei sivu siirry latauksen aikana.

### Minkä kokoinen logon pitäisi olla someprofiilikuvissa?

Lataa neliökuva ja pidä logo keskimmäisten kahden kolmanneksen sisällä, sillä useimmat alustat rajaavat profiilikuvat ympyräksi. Käytä kuvaketta tai pystylogoa leveän sijaan.

### Mitä tarkkuutta logo tarvitsee painoon?

Käytä vektori-PDF:ää tai SVG:tä, joka painuu terävänä joka koossa. Rasteritiedosto tarvitsee 300 dpi:n tarkkuuden lopullisessa painokoossa.

### Miksi logoni näyttää sumealta?

Se on luultavasti viety näyttökoossa tai suurennettu pienestä tiedostosta. Vie PNG:t vektoripäätiedostosta kaksinkertaisina näyttökokoonsa nähden tai käytä verkossa SVG:tä.