Varianty loga: prečo jedno logo nestačí

Varianty loga sú sada verzií jedného znaku pre rôzne miesta: široká pre web, zložená pod seba pre štvorcové formáty, samotný symbol pre profilovku a zjednodušená ikonka pre favicon. Jedno logo nestačí, lebo to isté logo musí fungovať na billboarde aj v kolieske 16 pixelov v záložke prehliadača. V článku nájdete, aké varianty loga si pýtať od dizajnéra, v akých veľkostiach a formátoch, a ako si sami otestovať, či vaše logo na webe prežije.

V skratke

• Základná sada sú štyri varianty: horizontálna, vertikálna (zložená), samotný symbol a favicon.
• Google podľa svojej dokumentácie odporúča favicon väčší než 48 × 48 pixelov, zobrazuje ho však vo výsledkoch vyhľadávania drobný.
• Pre inštalovateľný web chce Chrome ikony 192 × 192 a 512 × 512 pixelov, iPhone si berie 180 × 180.
• LinkedIn chce logo firmy minimálne 268 × 268 pixelov a odporúča 400 × 400, teda štvorec.
• Najrýchlejší test: zmenšite logo na 16 pixelov. Ak z neho zostane šmuha, potrebujete zjednodušený symbol.

Prečo jedno logo nestačí?

Lebo väčšina miest, kde sa dnes logo objavuje, je štvorcová alebo okrúhla a malá, kým väčšina lôg je široká. Keď vložíte horizontálne logo do kruhu profilovky, zmenší sa tak, aby sa zmestilo na šírku, a písmo je zrazu vysoké pár pixelov. Nikto ho neprečíta.

Vidíme to pri klientoch neustále. Firma má pekné logo na tabuli pred budovou, ale na Instagrame má v kolieske nečitateľný pásik textu, vo favicone biely štvorec a v podpise e-mailu rozmazaný obrázok. Nie je to chyba loga. Je to chyba toho, že niekto dodal len jeden súbor a ostatné si ľudia „nejako prispôsobili" sami.

Svetové značky to riešia takzvaným responzívnym logom: rovnaký znak má viac úrovní detailu a na menšie miesto sa použije jednoduchšia verzia. Nie je to nový nápad. Aj staré značky mali vždy verziu na pečiatku a verziu na kamión. Len miest, kde logo musí fungovať, je dnes desaťkrát viac.

Aké varianty loga potrebujete?

Väčšina firiem vystačí so štyrmi variantmi. Viac ich potrebujete len vtedy, ak máte naozaj špecifické použitie, napríklad výšivku alebo gravírovanie. Sadu variantov si dohodnite rovno v zadaní, inak ju dizajnér nacení ako prácu navyše. Čo bežne patrí do ceny, nájdete v článku koľko stojí tvorba loga a branding.

• Horizontálna verzia: symbol vedľa názvu. Hlavička webu, e-mailový podpis, faktúra, široké bannery.
• Vertikálna (zložená) verzia: symbol nad názvom. Štvorcové formáty, obaly, titulky videí, plagáty na výšku.
• Samotný symbol alebo monogram: profilovka na sociálnych sieťach, ikona aplikácie, vodoznak vo videu.
• Favicon: najjednoduchšia verzia symbolu, často len jedno písmeno alebo tvar, ktorá je čitateľná v 16 až 32 pixeloch.

Každú z nich potrebujete ešte vo farebnej, čiernej a bielej (inverznej) podobe. Biela verzia je tá, ktorá chýba najčastejšie, a potom sa na tmavom pozadí vo videu objaví logo v bielom obdĺžniku. Ak má vaše logo názov napísaný vlastným písmom, pozrite si aj, čo je to logotyp a prečo sa pri zmenšovaní správa inak než symbol.

Aké veľkosti a formáty si pýtať od dizajnéra?

Pýtajte si vektor (SVG a PDF) ku každému variantu a pripravené PNG v konkrétnych veľkostiach pre web. Vektor je zdroj, z ktorého sa dá čokoľvek vyrobiť, PNG sú hotové súbory pre ľudí, ktorí s vektorom pracovať nevedia.

Pre web a zariadenia sú tieto čísla overené v oficiálnych zdrojoch:

• Favicon pre Google: štvorec 1:1, podľa dokumentácie Google Search aspoň 8 × 8 pixelov, odporúčane väčší než 48 × 48. V praxi dodajte ICO v 32 × 32 a SVG.
• Ikona pre iPhone (apple-touch-icon): 180 × 180 pixelov, keď si niekto uloží web na plochu.
• Ikony pre Android a inštalovateľný web: podľa web.dev od Googlu aspoň 192 × 192 a 512 × 512 pixelov.
• LinkedIn firemná stránka: podľa pomocníka LinkedInu minimálne 268 × 268, odporúčane 400 × 400 pixelov.

Jedna technická poznámka, ktorá ušetrí nervy: SVG favicon síce podľa Can I use podporuje väčšina prehliadačov, Safari ho však podporuje až od verzie 26. Preto vždy nechajte aj PNG alebo ICO záložnú verziu. Pekné bonusové vylepšenie je SVG favicon, ktorý sa sám prepne na svetlú verziu, keď má človek zapnutý tmavý režim.

Ako otestovať, či logo funguje v 16 pixeloch?

Vyrobte si z loga štvorec 16 × 16 pixelov, zväčšite ho na obrazovke bez vyhladenia a pozrite sa naň z dvoch metrov. Ak spoznáte tvar, je to dobré. Ak vidíte len farebnú škvrnu, symbol treba na túto veľkosť zjednodušiť.

Tento test robíme pri každom logu, ktoré navrhujeme v rámci našej kreatívnej práce, a pridávame k nemu ešte tri:

• Test kruhu: vložte symbol do kruhu tak, ako ho oreže Instagram alebo LinkedIn. Nesmie sa odrezať nič podstatné a okolo musí zostať vzduch.
• Test čiernobielej: vytlačte logo na obyčajnej čiernobielej tlačiarni. Ak stojí len na farbe, v jednej farbe sa rozpadne.
• Test tmavého pozadia: položte bielu verziu na fotku alebo tmavý záber z videa. Tenké čiary a malý text zmiznú ako prvé.

Pre inšpiráciu, ako si s tým poradili iní, stojí za pozretie aj rozsiahly návod o tom, čo patrí do tvorby loga na skillmea.sk.

Kedy celú sadu variantov netreba?

Ak máte logo, ktoré je už samo o sebe kompaktné, napríklad krátky názov alebo jednoduchý symbol v štvorci, často vám stačí jedna verzia plus favicon. Nerobte variácie len preto, že ich majú veľké značky. Každý variant navyše je ďalší súbor, ktorý niekto použije zle, a päť verzií bez pravidiel je horšie než dve verzie s jasným návodom.

Úprimne povedané, pri niektorých logách varianty nepomôžu. Ak je symbol založený na jemnej ilustrácii alebo na dlhom texte, zmenšiť sa jednoducho nedá a zjednodušená verzia nebude pripomínať originál. Vtedy je poctivé priznať, že logo potrebuje väčší zásah, nie ďalší export.

Kde mať varianty loga uložené, aby ich ľudia používali správne?

V jednom zdieľanom priečinku s jasnými názvami a v krátkom manuáli, ktorý povie, ktorá verzia patrí kam. Súbor „logo_final_2_nove.png" v e-maile spred troch rokov je najčastejší dôvod, prečo sa logo firmy na webe objavuje v piatich podobách.

Stačí jednoduchá štruktúra: priečinok pre každý variant, v ňom SVG, PDF a PNG vo farbe, čiernej a bielej. K tomu jedna strana s pravidlami, ktorá patrí do brand manuálu. Ak ho ešte nemáte, v článku prečo mať brand manuál nájdete, čo v ňom má byť a čo je zbytočné.

Najčastejšie otázky o variantoch loga

Aký rozmer má mať logo na web?

Do hlavičky webu dajte ideálne SVG, ktoré je ostré v každej veľkosti. Ak musíte použiť PNG, pripravte ho aspoň v dvojnásobku veľkosti, v akej sa zobrazuje, aby bolo ostré aj na retina displejoch.

Aký je rozdiel medzi symbolom a faviconom?

Symbol je plná verzia znaku bez názvu, favicon je jeho ešte jednoduchšia podoba pre 16 až 32 pixelov. Pri jednoduchých symboloch môžu byť rovnaké, pri detailnejších treba favicon prekresliť zvlášť.

Môžem favicon vyrobiť sám z loga?

Technicky áno, stačí zmenšiť symbol. Ak však po zmenšení nie je čitateľný, automatický nástroj ho nezachráni. Zjednodušenie tvaru je dizajnérska práca, nie export.

Koľko variantov loga potrebuje malá firma?

Väčšinou štyri: horizontálnu, vertikálnu, symbol a favicon, každú vo farebnej, čiernej a bielej verzii. Viac len pri špecifickom použití, napríklad výšivke alebo gravírovaní.

Ak vaše logo vo favicone či na sociálnych sieťach nevidno a neviete, či stačí nový export, alebo treba prekresliť symbol, ozvite sa nám. Zvyčajne to vieme posúdiť z jedného screenshotu.