Responzivní logo

Jak udělat logo, které se na užší obrazovce zjednoduší: živá ukázka, postup a hotový kód s container query, <picture> nebo SVG spritem.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

Živá ukázka

Místo pro logo: 504 px → varianta Plné logo se sloganem (od 320 px).

  1. Plné logo se sloganem≥ 320 px
  2. Značka a název≥ 180 px
  3. Jen název≥ 120 px
  4. Jen značka≥ 0 px

Nastavení a kód

Logo se přepíná podle šířky svého rodiče (container query). Funguje ve všech současných prohlížečích a stáhne se jen použitý soubor.

VariantaSouborOd šířky loga (px)
Plné logo se sloganem
Značka a název
Jen název
Jen značka
HTML
<a class="logo" href="/">
  <span class="logo-mark" role="img" aria-label="Zrnko – pražírna kávy"></span>
</a>
CSS
/* Varianta se řídí šířkou, kterou má logo k dispozici, ne šířkou okna.
   Stáhne se jen právě použitý soubor. */
.logo {
  display: block;
  container: logo / inline-size;
  /* v flex hlavičce: logo dostane zbytek místa a smí se zmenšit */
  flex: 1 1 auto;
  min-width: 0;
}
.logo-mark {
  display: block;
  height: 48px;
  background: url("logo-icon.svg") left center / contain no-repeat;
}
@container logo (min-width: 120px) {
  .logo-mark { background-image: url("logo-compact.svg"); }
}
@container logo (min-width: 180px) {
  .logo-mark { background-image: url("logo-wide.svg"); }
}
@container logo (min-width: 320px) {
  .logo-mark { background-image: url("logo-full.svg"); }
}

Jak na responzivní logo

  1. Navrhni varianty od nejbohatší po nejjednodušší. Typicky plné logo se sloganem, značka s názvem, samotný název a nakonec jen značka (symbol), kterou použiješ i jako favicon. Každá další varianta něco ubírá, nic nepřidává, a musí zůstat na první pohled stejnou značkou: stejné barvy, tvar i písmo.
  2. Nezmenšuj, zjednodušuj. Plné logo zmenšené na mobil má nečitelný slogan a rozmazané detaily. Na úzkém displeji je lepší menší obsah ve čitelné velikosti než celé logo v miniatuře.
  3. Každou variantu exportuj jako samostatné SVG se stejnou výškou a oříznutým viewBox (bez prázdného okraje), aby všechny seděly na stejnou linku. Texty převeď na křivky, nebo počítej s tím, že se písmo v <img> nenačte.
  4. Zvol, podle čeho přepínat. Container query reaguje na místo, které logo skutečně má (hlavička s menu, postranní panel, patička), a proto je nejspolehlivější. Media query v <picture> řeší šířku celého okna. Sprite s background-position je starší technika z doby před container queries.
  5. Zlomy nastav podle šířky variant. Varianta se má zapnout až tehdy, když se vejde celá i s odstupem od menu. V ukázce nahoře posouvej šířku a sleduj, kdy by se sousední prvky dotkly.
  6. Nezapomeň na přístupnost a tmavý režim. Alternativní text je název firmy, ne slovo „logo“. Barvy v SVG můžeš přepnout pomocí @media (prefers-color-scheme: dark) přímo uvnitř souboru, nebo použij fill="currentColor" u vloženého SVG.

Jak použít: Responzivní logo

Responzivní logo se na úzké obrazovce nezmenšuje, ale zjednodušuje: z plného loga se sloganem zbude značka s názvem, pak jen název a nakonec samotný symbol. Stránka ukazuje princip na živé ukázce, vysvětluje postup a vygeneruje kód pro container query, element <picture> nebo klasický SVG sprite.

  1. Posouvej šířku hlavičky v živé ukázce a sleduj, kdy se logo přepne na jednodušší variantu.
  2. V části Nastavení a kód vyber techniku, názvy souborů svých variant a šířky, od kterých se mají použít.
  3. Zkopíruj HTML a CSS do svého webu a v prohlížeči zkontroluj přepínání při zúžení okna.

Časté chyby a tipy

Container query
Přepíná podle místa, které logo opravdu má, takže funguje i v postranním panelu nebo v patičce. Hlavička musí logu dát šířku, třeba přes flex: 1 1 auto.
Stejná výška variant
Exportuj všechny varianty se stejnou výškou a oříznutým viewBox, aby při přepnutí logo neposkočilo.
Optimalizace SVG
Soubory z grafického editoru bývají zbytečně velké. Před nasazením je zmenši optimalizátorem SVG.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

Optimalizace SVG →

Další nástroje v kategorii Web a ladění

  • JWT dekodér a ověření podpisu Dekódování JWT tokenu, kontrola platnosti (exp, nbf, iat) a ověření podpisu.
  • Tester regulárních výrazů Tester regexů pro JavaScript, PHP, Python, Go, .NET, Javu i Rust: shody, vysvětlení, mapa výrazu, náhrada, testy a hotový kód.
  • Kontrola a vyčištění SVG Kontrola SVG na skripty, zakódované stránky v Base64, vložené soubory, phishingové formuláře a externí zdroje a jejich bezpečné odstranění.
  • Validátor XML feedu pro Heureku a Zboží.cz Kontrola produktového XML feedu podle specifikace Heureka.cz a Zboží.cz: povinné elementy, formát ceny, dostupnosti a EAN, kódy dopravců, duplicitní ITEM_ID a jmenný prostor.
  • Náhled HTML a CSS Bezpečný náhled HTML a CSS v izolovaném rámu s výběrem šířky zařízení.
  • Porovnání dvou textů (diff) Porovnání dvou textů po řádcích, slovech nebo znacích, včetně unified diff.
  • Náhled Markdownu Živý náhled Markdownu (GitHub Flavored) s bezpečným HTML výstupem.
  • Převodník barev (HEX, RGB, HSL, OKLCH) Převod barev mezi HEX, RGB, HSL, HWB, OKLCH a Lab s kontrastem podle WCAG.
  • Vysvětlení cron výrazu Popis cron výrazu česky, výpis dalších spuštění a převod na crontab, systemd timer, launchd (macOS) a Plánovač úloh Windows.
  • Dekodér certifikátů X.509 Rozbor certifikátů X.509: subjekt, platnost, klíč, alternativní názvy, rozšíření a otisky.
  • Porovnání XML Strukturní porovnání dvou XML dokumentů s cestou ke každé změně.
  • Porovnání JSON Sémantické porovnání dvou JSON dokumentů bez ohledu na pořadí klíčů.
  • IP a CIDR kalkulačka Rozbor IPv4 a IPv6 adres a sítí: maska, rozsah hostitelů, broadcast, typ adresy a kontrola příslušnosti.
  • Rozbor řetězce User-Agent Rozpoznání prohlížeče, jádra, operačního systému a zařízení z řetězce User-Agent.
  • Rozbor e-mailových hlaviček Rozbor hlaviček e-mailu: odesílatel, předmět, datum, cesta zprávy přes servery (Received) a všechny hlavičky.
  • ASN.1 / DER dekodér Výpis struktury ASN.1 DER z PEM, Base64 nebo Hex: typy, OID se jmény, vnořené struktury (certifikáty, klíče).
  • Kontrast barev podle WCAG Kontrastní poměr textu a pozadí podle WCAG 2.2 (AA, AAA) a APCA pro barvy v libovolném CSS zápisu, s náhledem a návrhem vyhovující barvy.
  • Kalkulačka specificity CSS Výpočet specificity CSS selektorů včetně :is(), :not(), :has() a :where(), barevný rozbor a seřazení podle síly.
  • Kódy kláves v JavaScriptu Stiskni klávesu a uvidíš event.key, event.code, keyCode a location, s ukázkou obsluhy a tabulkou kódů kláves.
  • Porovnání hodnot v JavaScriptu (== a ===) Tabulka, které hodnoty se v JavaScriptu rovnají podle ==, === a Object.is(), s vysvětlením převodu typů krok po kroku.