Logoformaten voor websites, socials en drukwerk

Er is geen enkel logoformaat dat overal werkt. Bewaar je logo als vectormaster, een SVG of PDF, die naar elk formaat schaalt zonder te vervagen, en exporteer daaruit voor elke plek waar het naartoe gaat: een SVG op hoogte voor de header van je website, een vierkante versie voor profielfoto's, een horizontale versie voor banners en een bestand van 300 dpi voor drukwerk. Wat van plek tot plek verandert is het canvas en hoeveel daarvan het logo moet vullen.

Begin met een masterbestand, niet met een formaat

Vectorbestanden beschrijven vormen in plaats van pixels, dus hetzelfde bestand is scherp op een telefoon en op een winkelpui. Elk ander bestand dat je maakt, exporteer je uit deze master, nooit uit een screenshot of een oude PNG. Heb je alleen een klein rasterlogo, laat het dan eerst opnieuw als vector tekenen; dat scheelt je gedoe bij elke klus daarna.

Logoformaat voor een website

Stel op een website het logo in op hoogte, niet op breedte, zodat een breed woordmerk en een compact symbool in je header op dezelfde basislijn staan. Gebruik de SVG zodat het scherp blijft op schermen met hoge dichtheid, en geef het een verstandige maximale breedte voor kleine telefoons.

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

Je favicon is een apart, vierkant, vereenvoudigd bestand, geen verkleind volledig logo. Browsers tonen het op heel kleine formaten, dus het wordt meestal één letter of symbool. Favicon ontwerpen somt de exacte bestanden op, en de favicon-richtlijnen van Google vragen om een vierkant icoon op een veelvoud van 48 pixels.

Logoformaat voor social media

Socialplatforms gebruiken je logo op twee heel verschillende plekken: de kleine profielfoto en de brede cover of banner. Ze hebben verschillende versies van het logo nodig, niet hetzelfde bestand erin geperst.

Profielfoto's

• Upload een vierkante afbeelding. De meeste platforms snijden profielfoto's bij tot een cirkel, dus de hoeken verdwijnen.
• Gebruik je icoon- of gestapelde versie, niet een lange horizontale opstelling. Een breed woordmerk wordt onleesbaar in een klein cirkeltje.
• Houd het logo binnen ongeveer de middelste twee derde van het vierkant, met gelijkmatige ruimte rondom.
• Zet het op een effen kleur of rustige achtergrond die het vierkant vult, zodat de cirkel bedoeld oogt.
• Controleer het op de echte grootte op je eigen telefoon voordat je het overal wijzigt.

Covers en banners

Coverafbeeldingen zijn breed en worden op telefoons en desktops anders bijgesneden, en de profielfoto overlapt vaak een hoek. Houd je logo en woorden dicht bij het midden en laat de achtergrond doorlopen tot aan de randen.

Op posts is het logo een handtekening, niet de kop. Een goed startpunt is het klein te houden, in een vaste hoek, op elke post even groot, zodat het herkenning opbouwt zonder met de boodschap te concurreren. Afbeeldingsformaten voor social media heeft elk postformaat.

Logoformaten voor e-mail en drukwerk

E-mail is de lastige: veel e-mailapps tonen geen SVG-afbeeldingen, dus gebruik een transparante PNG. Exporteer hem op twee keer de breedte waarop je hem wilt tonen en stel de weergavebreedte in via de HTML, zodat hij scherp blijft op telefoonschermen met hoge dichtheid. Lees voor drukwerk beeldresolutie voor drukwerk voordat je iets naar een drukker stuurt, en zie e-mailhandtekening ontwerpen voor de handtekening zelf.

Elk formaat maken vanuit één ontwerp

Het vervelende aan logoformaten is niet het logo, maar de cover, de post, de story en de kaart er telkens omheen opnieuw opbouwen. In Gradiently vraag je de Designer om de andere formaten, of schaal je met Pro een ontwerp in één stap naar elk formaat, en je achtergrond wordt voor elke vorm opnieuw gerenderd in plaats van bijgesneden. Eigen formaten gaan van 200 tot 8.000 pixels als een leverancier om iets ongewoons vraagt. Logovarianten behandelt welke versie van het logo je in elk formaat zet.