Logo do malého kolečka: favicony, ikony aplikací a avatary na sítích

Logo do malého kolečka funguje ve chvíli, kdy přestanete zmenšovat celé logo a nakreslíte pro tento prostor samostatnou kompaktní značku. Vytváříme ji tak, aby byla čitelná ve velikosti ikony na kartě, aby se vešla do kruhového ořezu a obstála na světlém i tmavém pozadí.

Většina malých firem na tento problém přijde pozdě. Logo vypadá dobře v hlavičce webu i na vizitce, pak ho ale někdo nahraje jako avatar na LinkedIn a z názvu se stane šedá šmouha. Tento článek vysvětluje, kde se malé kolečko objevuje, co platformy očekávají a jak navrhnout a otestovat značku, která zůstane čitelná.

Proč celé logo v malém kolečku selže

Celé logo bývá široký objekt: symbol, název a někdy i slogan. Kruh je pravý opak. Je čtvercový, ořezává rohy a často se zobrazuje v několika desítkách pixelů.

Při vtěsnání horizontálního loga do takového prostoru se rozpadnou jako první tři věci:

• Písmena v názvu firmy klesnou pod velikost, při které zůstávají tahy oddělené.
• Slogan zmizí úplně.
• Symbol se zmenší na zlomek kruhu, protože šířku zabere logotyp.

Řešením není menší kopie stejného souboru. Je to druhá, jednodušší verze identity navržená přímo pro tento účel. Širší myšlenku verzí loga rozebíráme v článku o responzivním systému loga.

Kde se malé kolečko objevuje

Vaše logo se se zákazníky potkává ve více malých prostorech, než většina majitelů čeká. Každý z nich má svá pravidla.

Search Engine Journal uvádí, že dokumentace Googlu k faviconům nově stanovuje minimum 8 × 8 pixelů, zároveň ale doporučuje favicon větší než 48 × 48 pixelů, aby dobře vypadal na různých površích. Stejný článek cituje požadavek Googlu, aby byl favicon čtverec o straně násobku 48 px, nebo SVG se čtvercovým poměrem stran.

Pro plochu iPhonu a iPadu Favicon Tools popisují jediné PNG o velikosti 180 × 180 pixelů na adrese /apple-touch-icon.png. Upozorňují také, že iOS u tohoto obrázku ignoruje průhlednost a skládá ho na černou, takže ikona potřebuje nepruhledné pozadí.

Pro Android a instalovatelné webové aplikace FaviconStudio uvádí ikony Android Chrome o velikosti 192 a 512 pixelů.

Kruh přidávají sociální sítě. SocialSizes upozorňuje, že obrázky na Instagramu se nahrávají čtvercové, ale zobrazují se jako kruh, takže rohy čtverce se oříznou. Pro firemní stránky na LinkedInu La Growth Machine uvádí jako standardní velikost loga 300 × 300 pixelů a doporučuje logo před nahráním otestovat ve velikosti 40 × 40 pixelů.

Specifikace platforem se mění, proto před nahráním zkontrolujte aktuální nápovědu. Princip návrhu zůstává stejný.

Návrh loga do malého kolečka

U každé kompaktní značky držíme stejný krátký seznam.

1. Jedna myšlenka. Jedno písmeno, monogram nebo jeden jednoduchý symbol. Dvě myšlenky spolu při 32 pixelech soupeří.
2. Žádný text. Iniciály mohou zůstat, pokud jsou tučné a je jich málo. Celý název ne.
3. Silnější tahy. Vlasové linky se při zmenšení souboru ztratí. Kompaktní značku kreslete silnějšími liniemi než hlavní logo.
4. Rozumně vyplněný kruh. Značka má zabírat většinu kruhu, ale zachovat viditelný okraj, aby se jí ořez nikdy nedotkl.
5. Kontrast místo přechodů. Dvě plné barvy přežijí změnu velikosti. Jemné přechody a stíny se zakalí.

Kompaktní neznamená generické. Dobře zvolený detail z hlavního loga, třeba výrazný tvar písmene nebo zářez v ploše, přenese identitu i do malého prostoru. Pokud si nejste jistí, jaký typ loga máte, náš průvodce typy log ukazuje, jak se každé z nich zjednodušuje.

Maskovatelné ikony a bezpečná zóna

Android a některé spouštěče na vaši ikonu aplikují vlastní masku. Pokud grafika sahá až k okraji, maska ji useká.

Favicon Tools uvádí pravidlo: důležitý obsah držte uvnitř vnitřních 80 % plátna, což je u ikony 512 × 512 pixelů kruh o průměru asi 410 pixelů. Vnější prstenec je spad. Má obsahovat jen pozadí, žádné logo ani text.

V praxi dodáváme dvě verze ikony aplikace. Jedna má průhledné nebo neutrální pozadí pro místa, kde se zobrazuje beze změny. Druhá je verze s odsazením a plnou barvou sahající až k okrajům, aby značka zůstala nedotčená při jakémkoli tvaru masky.

Test před nahráním

Desetiminutový test zachytí většinu problémů. Nepotřebujete nic kromě obrazovky a telefonu.

• Exportujte kompaktní značku ve velikostech 512, 180, 96 a 32 pixelů a každou si prohlédněte ve skutečné velikosti, ne přiblíženou.
• Umístěte ji na bílé a pak na tmavé pozadí. Karty prohlížeče i motivy telefonů používají obojí.
• Použijte kruhovou masku a ověřte, že se žádná část značky nedotýká okraje.
• Převeďte ji do odstínů šedi. Pokud se dva prvky slijí, barevný kontrast odvádí příliš mnoho práce.
• Podívejte se na ni z dálky natažené paže. Pokud nepoznáte značku jen podle tvaru, zjednodušte ji znovu.

Potom ji nahrajte a prohlédněte si výsledek naživo. Platformy obrázky znovu komprimují a Google aktualizuje favicony ve vyhledávání podle vlastního plánu. Search Engine Journal uvádí doporučení, ale favicon se ve výsledcích nemusí zobrazit, ani když splníte všechna pravidla. Počítejte s tím, že změna může trvat několik dní.

Pokud spravujete i záznam na mapě, objeví se tam stejná malá značka. Tomuto kontaktnímu bodu se věnuje náš článek o logu a fotkách ve Firemním profilu Google.

Kolik u nás kompaktní značka stojí

Pracujeme s pevnými konečnými cenami. Naše balíčky loga začínají na 9 490 Kč a zahrnují 4 koncepty, až 4 kola revizí, vektorové soubory ve formátech SVG, AI, EPS a CDR plus JPG a PNG a 12 měsíců bezplatných úprav. Pokud v zadání uvedete, že logo bude žít ve faviconech, ikonách aplikací a kulatých avatarech, kreslíme koncepty s ohledem na tento ořez od první skici.

Logo Start stojí 6 900 Kč a zahrnuje 2 koncepty a 2 kola revizí. Pokud už logo máte a potřebuje jen čistší a jednodušší verzi pro malé velikosti, je tu Logo Refresh za 3 900 Kč s jedním konceptem. Dodání trvá do 5 pracovních dnů a platí záruka vrácení peněz: pokud nebude vyhovovat žádný z prvních konceptů loga, vrátíme vám celou částku do 5 pracovních dnů. Logo se platí ze 100 % předem. Všechny ceny najdete na stránce s ceníkem.

K otázkám kolem souborů, například který export kam patří, se podívejte na článek který soubor loga kdy použít.

Zkontrolujte své logo v malém kolečku

Vezměte své současné logo, zmenšete ho na 40 pixelů uvnitř kruhu a podívejte se na něj. Pokud je název nečitelný nebo symbol plave v prázdném prostoru, vaší identitě chybí kompaktní verze.

Nabízíme bezplatnou kontrolu značky v 5 bodech na /contact/. Do 48 hodin v pracovní dny dostanete jednostránkové PDF, bez obchodního hovoru. Mezi jinými body zahrnuje i to, jak se vaše logo chová v malých velikostech. Pokud už víte, že potřebujete novou nebo osvěženou značku, pošlete zadání přes poptávkový formulář loga.