Favicon, SVG logo a základná identita webu v Joomla

Pri tvorbe Joomla stránky sa veľa pozornosti venuje šablóne, rozloženiu modulov a obsahu. Základná vizuálna identita webu však vzniká už pri oveľa menších prvkoch – logu v hlavičke, ikone na karte prehliadača, použitých farbách, typografii a jednotnom štýle tlačidiel či ikon.

Práve tieto prvky rozhodujú o tom, či web pôsobí ako hotový a dôveryhodný projekt, alebo iba ako upravená ukážková šablóna. Predvolené logo Cassiopeia, všeobecná ikona Joomla či náhodne zvolené farby by preto mali byť nahradené vlastnou identitou ešte pred verejným spustením stránky.

V Joomla možno väčšinu základného brandingu nastaviť priamo v štýle šablóny. Pri rozsiahlejších úpravách je vhodné použiť súbor user.css, odvodenú šablónu alebo vlastné súbory uložené na miestach, ktoré aktualizácia neprepíše.

Čo patrí do základnej identity webu

Vizuálna identita nemusí na začiatku predstavovať rozsiahly grafický manuál. Aj menší web by však mal mať jednotne definované aspoň tieto prvky:

• hlavné logo,
• samostatný symbol alebo skrátenú verziu loga,
• favicon,
• základné a doplnkové farby,
• hlavné a sekundárne písmo,
• vzhľad tlačidiel a odkazov,
• štýl ikon a ilustračných obrázkov,
• pravidlá pre svetlé a tmavé pozadie,
• názov webu a krátky slogan.

Tieto prvky by mali pôsobiť jednotne na verejnej stránke, v mobilnom zobrazení, v e-mailoch, na sociálnych sieťach aj v dokumentoch organizácie.

Joomla šablóna určuje vzhľad webu, rozloženie prvkov a spôsob zobrazovania obsahu. Oficiálna dokumentácia zároveň odporúča pri úpravách predvolených šablón používať možnosti štýlu a odvodené šablóny, v ktorých možno uchovať iba rozdiely oproti pôvodnej šablóne.

Logo a favicon nie sú rovnaký obrázok

Jednou z najčastejších chýb je použitie rovnakého súboru ako veľkého loga v hlavičke aj ako ikony prehliadača. Obe grafiky síce vychádzajú z rovnakej identity, ale používajú sa v úplne odlišných podmienkach.

Logo v hlavičke

Logo sa zobrazuje na relatívne veľkej ploche. Môže obsahovať:

• názov organizácie alebo projektu,
• grafický symbol,
• doplnkový text,
• slogan,
• viac farieb.

Najčastejšie má vodorovné alebo mierne obdĺžnikové proporcie.

Favicon

Favicon je malá ikona zobrazovaná napríklad:

• na karte prehliadača,
• medzi záložkami,
• v histórii prehliadania,
• pri odkazoch uložených na ploche zariadenia,
• v niektorých výsledkoch vyhľadávania.

Na takom malom priestore sa dlhý názov firmy alebo zložité logo stáva nečitateľným. Favicon by preto mal používať iba jednoduchý symbol, iniciálu alebo výrazný tvar.

Odborná literatúra o Joomla šablónach odporúča vytvoriť favicon ako štvorcový, jednoduchý a dostatočne kontrastný symbol, ktorý zostane rozpoznateľný aj pri veľmi malej veľkosti. Odporúča tiež pripraviť minimálne formáty SVG a ICO.

Prečo je SVG vhodné pre logo

Formát SVG – Scalable Vector Graphics opisuje grafiku pomocou vektorových tvarov namiesto pevnej siete pixelov. Logo sa preto môže zväčšovať a zmenšovať bez straty ostrosti.

SVG je vhodné najmä pre:

• firemné logá,
• jednoduché symboly,
• piktogramy,
• favicon,
• jednofarebné značky,
• grafiku používanú v rôznych veľkostiach.

Medzi hlavné výhody patrí:

• ostré zobrazenie na bežných aj vysokokvalitných displejoch,
• malá veľkosť pri jednoduchých logách,
• podpora priehľadného pozadia,
• jednoduché prispôsobenie rôznym rozmerom,
• možnosť zachovať presné tvary a farby.

Pri fotografiách, textúrach a veľmi zložitých ilustráciách je vhodnejší rastrový formát, napríklad WebP alebo PNG.

Pozor na bezpečnosť SVG

SVG nie je iba obrázok v tradičnom zmysle. Ide o dokument založený na XML, ktorý môže obsahovať ďalšie prvky. Preto by sa na web nemali nahrávať neznáme SVG súbory získané z nedôveryhodného zdroja.

Joomla umožňuje nastaviť povolené typy súborov v možnostiach správcu médií, ale jej dokumentácia výslovne upozorňuje, že nahrávanie súborov vrátane SVG má bezpečnostné dôsledky.

Používajte preto iba vlastné alebo dôveryhodné SVG súbory a pred nahratím z nich odstráňte:

• skripty,
• externé odkazy,
• nepotrebné metadáta,
• vložené rastrové obrázky,
• skryté vrstvy a objekty z grafického programu.

Ak Joomla nahratie SVG cez správcu médií nepovolí, neupravujte zoznam povolených formátov bez zváženia bezpečnostných dôsledkov. Správca webu môže dôveryhodný súbor uložiť aj priamo do priečinka šablóny pomocou SFTP alebo správcu súborov hostingu.

Ako pripraviť správne SVG logo

Pred exportom loga je vhodné skontrolovať niekoľko vlastností.

Rozmery kresliacej plochy

Kresliaca plocha má presne kopírovať obsah loga. Ak okolo grafiky zostane veľký prázdny priestor, logo bude na stránke pôsobiť malé aj pri nastavenej veľkej šírke.

Atribút viewBox

SVG by malo obsahovať správny atribút viewBox. Ten umožňuje prehliadaču zachovať proporcie pri zmene veľkosti.

Text v logu

Použité písmo nemusí byť dostupné na každom zariadení. Pri finálnom exporte je preto vhodné previesť text loga na krivky. Tak sa zachová jeho presný vzhľad bez potreby načítavať príslušný font.

Pôvodný upraviteľný súbor si však ponechajte. Text prevedený na krivky už nemožno jednoducho opravovať alebo prepisovať.

Priehľadné pozadie

Logo určené pre hlavičku by spravidla malo mať priehľadné pozadie. Nevytvárajte v SVG biely obdĺžnik, ak nie je zámernou súčasťou značky.

Farby

Farby definujte jednotne a uložte si ich presné hodnoty, napríklad:

Primárna modrá: #164E9B
Doplnková oranžová: #F58220
Tmavý text: #172033
Svetlé pozadie: #F5F7FA

Tieto hodnoty potom používajte v šablóne, obrázkoch aj ďalších materiáloch.

Veľkosť súboru

Jednoduché logo by nemalo obsahovať tisíce zbytočných bodov a objektov. Pred použitím ho optimalizujte, ale vždy si uchovajte aj pôvodnú pracovnú verziu.

Odporúčaná sada súborov

Pre nový web je vhodné pripraviť malý balík grafických súborov:

Názvy sú iba odporúčaním. Pri favikone však treba rešpektovať názvy, ktoré očakáva použitá šablóna.

Nastavenie loga v šablóne Cassiopeia

Cassiopeia umožňuje nastaviť základnú identitu bez úpravy zdrojového kódu.

V administrácii otvorte:

Systém → Šablóny → Štýly šablón webu

Potom vyberte aktívny štýl, napríklad Cassiopeia – Predvolená, a otvorte kartu Rozšírené.

Cassiopeia obsahuje nastavenia:

• Značka – zapnutie alebo vypnutie celej oblasti s logom,
• Logo – výber obrazového súboru,
• Názov – textový názov použitý namiesto obrázka,
• Slogan – krátky text pod logom,
• farebná schéma,
• schéma písma,
• rozloženie stránky.

Ak je vybraný obrázok loga, zobrazí sa namiesto predvoleného loga Cassiopeia. Ak obrázok vybraný nie je, možno použiť text z poľa Názov. Slogan sa zobrazuje pod obrazovým alebo textovým logom.

Odporúčaný postup

1. Nahrajte dôveryhodné SVG logo do samostatného priečinka, napríklad images/branding.
2. Otvorte štýl šablóny Cassiopeia.
3. Nastavte Značka: Áno.
4. V poli Logo vyberte súbor SVG.
5. Doplňte názov webu a prípadný slogan.
6. Uložte nastavenia.
7. Skontrolujte hlavičku na počítači aj mobilnom telefóne.
8. Overte kontrast loga voči pozadiu hlavičky.

V dostupnej literatúre sa rovnako odporúča používať SVG alebo PNG logo s priehľadným pozadím a skontrolovať jeho alternatívny text.

Úprava veľkosti loga pomocou CSS

Nie každé logo má rovnaké proporcie. Po jeho vložení preto môže byť príliš malé, vysoké alebo neprimerane odsúvať navigáciu.

Cassiopeia možno upravovať pomocou súboru user.css, čím sa znižuje potreba zasahovať do pôvodných štýlov šablóny. Túto možnosť uvádza aj oficiálna dokumentácia šablóny.

Príklad základného pravidla:

.container-header .navbar-brand img {
    width: auto;
    max-width: 240px;
    max-height: 72px;
}

Pre menšie obrazovky možno nastaviť inú veľkosť:

@media (max-width: 767.98px) {
    .container-header .navbar-brand img {
        max-width: 180px;
        max-height: 54px;
    }
}

Selektory sa môžu líšiť podľa verzie alebo použitej šablóny. Pred ich použitím preto skontrolujte HTML štruktúru stránky pomocou vývojárskych nástrojov prehliadača.

Nepoužívajte pevne nastavenú šírku aj výšku

Pri logu je zvyčajne lepšie nastaviť jednu hlavnú veľkosť a druhý rozmer ponechať na hodnotu auto. Inak môže dôjsť k deformácii grafiky.

Nevhodné nastavenie:

width: 220px;
height: 60px;

Bezpečnejšie nastavenie:

width: 220px;
height: auto;

Nastavenie favicon v Cassiopeia

Cassiopeia načítava tri súbory:

• joomla-favicon.svg,
• favicon.ico,
• joomla-favicon-pinned.svg.

Prvý je určený pre moderné prehliadače, druhý slúži ako alternatívna ikona a tretí môže byť použitý ako jednofarebná ikona pripnutej karty.

Šablóna hľadá vlastné favikony najskôr v priečinku:

media/templates/site/cassiopeia/images/

Ak ich tam nenájde, použije systémové ikony Joomla z priečinka:

media/system/images/

Ak teda používate Cassiopeia, pripravte svoje súbory pod názvami očakávanými šablónou a uložte ich do priečinka obrázkov Cassiopeia. Dokumentácia uvádza, že vlastné favikony na tomto mieste nemajú byť prepísané bežnou aktualizáciou šablóny.

Základný postup

1. Vytvorte jednoduchý štvorcový symbol.
2. Exportujte ho ako SVG.
3. Vytvorte alternatívny súbor ICO.
4. Premenujte súbory podľa požiadaviek šablóny.
5. Nahrajte ich do priečinka obrázkov Cassiopeia.
6. Vymažte vyrovnávaciu pamäť Joomla.
7. Obnovte stránku bez použitia cache prehliadača.
8. Skontrolujte výsledok v niekoľkých prehliadačoch.

Súbor ICO môže obsahovať viacero veľkostí, napríklad 16 × 16, 32 × 32 a 48 × 48 pixelov.

Favicon vo vlastnej šablóne

Ak používate vlastnú Joomla šablónu, favicon musí byť načítaný v jej súbore index.php. Kniha The Joomla 4 Templates opisuje registráciu hlavného SVG faviconu a alternatívneho ICO súboru prostredníctvom metódy addHeadLink. Súbory potom umiestňuje do priečinka obrázkov danej šablóny.

Zjednodušený princíp je:

use Joomla\CMS\HTML\HTMLHelper;

$this->addHeadLink(
    HTMLHelper::_('image', 'favicon.svg', '', [], true, 1),
    'icon',
    'rel',
    ['type' => 'image/svg+xml']
);

$this->addHeadLink(
    HTMLHelper::_('image', 'favicon.ico', '', [], true, 1),
    'alternate icon',
    'rel',
    ['type' => 'image/vnd.microsoft.icon']
);

Presné riešenie závisí od štruktúry šablóny. Pred dopĺňaním kódu najskôr skontrolujte, či už šablóna favicon nenačítava sama.

Komerčné šablóny a frameworky

Šablóny postavené na frameworkoch, ako sú Helix Ultimate, T4 alebo Gantry, majú vlastné možnosti brandingu. Logo a favicon sa v nich môžu nastavovať:

• v štýle Joomla šablóny,
• v samostatnom ovládacom paneli frameworku,
• v nastavení hlavičky,
• v správcovi rozloženia,
• v globálnych nastaveniach šablóny.

Pri komerčnej šablóne preto postupujte v tomto poradí:

1. Skontrolujte nastavenia štýlu šablóny.
2. Vyhľadajte sekciu Logo, Branding, Header alebo Favicon.
3. Preštudujte dokumentáciu výrobcu.
4. Až potom upravujte súbory.
5. Vlastné zásahy ukladajte do custom.css, odvodeného štýlu alebo detskej šablóny.

Priame nahradenie súboru vo vnútri hlavnej šablóny môže fungovať iba do najbližšej aktualizácie.

Prečo používať odvodenú šablónu

Odvodená šablóna uchováva vlastné odlišnosti oddelene od rodičovskej šablóny. Je vhodná najmä vtedy, keď základná identita zahŕňa:

• vlastné logo a favicon,
• zmenené farby,
• vlastnú typografiu,
• upravené rozloženie hlavičky,
• alternatívne výstupy modulov,
• vlastné CSS a JavaScript súbory.

Joomla umožňuje pri predvolených šablónach vytvoriť odvodenú šablónu, v ktorej sa definujú iba zmeny oproti rodičovi. Tento prístup zjednodušuje aktualizáciu a znižuje riziko straty vlastných úprav.

Pri jednoduchom nastavení loga a farieb nemusí byť odvodená šablóna nevyhnutná. Je však vhodná pri rozsiahlejších zásahoch do hlavičky alebo zdrojových súborov.

Farby webu

Logo je iba jednou časťou identity. Rovnakú pozornosť treba venovať farbám.

Pre väčšinu menších webov postačuje:

• jedna primárna farba,
• jedna doplnková farba,
• tmavá farba textu,
• svetlá farba pozadia,
• farby informačných, varovných a chybových stavov.

Primárnu farbu možno používať pre:

• hlavné tlačidlá,
• aktívne odkazy,
• zvýraznené nadpisy,
• ikony,
• aktívne položky menu.

Doplnková farba má zvýrazňovať dôležité prvky, nie súperiť s primárnou farbou na každej časti stránky.

Kontrast je dôležitejší než presný odtieň

Farba, ktorá vyzerá dobre v logu, nemusí byť vhodná pre drobný text alebo tlačidlo. Pri nastavovaní identity kontrolujte:

• čitateľnosť textu na pozadí,
• stav pri prejdení myšou,
• zobrazenie aktívnej položky,
• kontrast tlačidiel,
• zobrazenie pri zvýšenom kontraste,
• vzhľad na displejoch s rôznym jasom.

Typografia

Základná identita webu by mala používať najviac niekoľko navzájom kompatibilných rezov písma.

Praktickým riešením je:

• jedno písmo pre nadpisy a text,
• alebo jedno písmo pre nadpisy a druhé pre bežný obsah,
• obmedzený počet hrúbok,
• jednotná hierarchia veľkostí.

Pred použitím externého webového fontu zvážte:

• rýchlosť načítania,
• licenčné podmienky,
• ochranu súkromia,
• podporu slovenských znakov,
• čitateľnosť pri menších veľkostiach.

Logo môže používať osobitné písmo, ale text webu by mal zostať ľahko čitateľný.

Textový názov a slogan

Ak ešte nemáte hotové logo, Cassiopeia umožňuje použiť textový názov a slogan. Je to lepšie riešenie než narýchlo vytvorený nekvalitný obrázok.

Textové logo má niekoľko výhod:

• zostáva ostré pri každom rozlíšení,
• je ľahko upraviteľné,
• načíta sa bez ďalšieho obrázka,
• môže sa automaticky prispôsobiť obrazovke.

Neskôr ho možno nahradiť hotovým SVG logom bez zmeny obsahu stránky.

Slogan by mal byť stručný. Nemá opakovať dlhý opis služieb, ale jednou vetou vysvetliť zameranie webu.

Príklady:

Praktické návody pre používateľov Joomla

Moderné webové riešenia pre malé firmy

Informácie, skúsenosti a bezpečné postupy

Alternatívny text loga

Logo nesmie byť jediným spôsobom, ako návštevník zistí názov webu. Jeho textová alternatíva by mala primerane vyjadrovať názov organizácie alebo projektu.

Nevhodné alternatívne texty:

• logo,
• obrázok,
• logo-final-2026,
• prázdna hodnota pri logu, ktoré zároveň plní funkciu odkazu na domovskú stránku.

Vhodnejšie príklady:

• Môj CMS,
• Logo spoločnosti Dantel,
• Naturizmus.sk,
• Big Head Barbershop.

Ak použitá šablóna nevytvára vhodný alternatívny text automaticky, skontrolujte jej možnosti alebo príslušný override výstupu.

Responzívne logo

Logo musí fungovať aj na mobilnom telefóne. Široké logo s dlhým sloganom môže zaberať väčšinu hlavičky a vytláčať menu.

Možné riešenia sú:

• zmenšenie loga pomocou CSS,
• skrytie sloganu na menších obrazovkách,
• použitie skráteného loga,
• samostatný symbol pre mobilnú verziu,
• presunutie sloganu mimo hlavičky,
• použitie mobilného rozloženia frameworku.

Pri testovaní skontrolujte aspoň:

• veľký monitor,
• notebook,
• tablet na výšku,
• mobilný telefón,
• zväčšenie stránky na 200 %.

Ďalšie prvky, ktoré sa často zamieňajú s faviconom

Obrázok pre sociálne siete

Obrázok zobrazený pri zdieľaní článku na Facebooku alebo LinkedIne nie je favicon. Ide o samostatný obrázok definovaný pomocou metadát Open Graph.

Mal by mať obdĺžnikový formát a obsahovať:

• názov webu alebo článku,
• výrazný vizuál,
• dostatočne veľké písmo,
• bezpečné okraje.

Ikona webovej aplikácie

Ikona používaná pri pridaní webu na domovskú obrazovku môže pochádzať z manifestu webovej aplikácie alebo zo samostatných metaúdajov. Favicon preto nemusí automaticky pokryť všetky zariadenia.

Logo v e-mailoch

E-maily odosielané Joomla majú vlastné šablóny a značku. Zmena loga webovej šablóny nemusí automaticky zmeniť logo v systémových e-mailoch.

Najčastejšie chyby

Použitie príliš zložitého faviconu

Kompletné logo s dlhým názvom sa pri malej veľkosti zmení na nečitateľnú škvrnu. Použite iba samostatný symbol.

Rastrové logo s nízkym rozlíšením

Malý JPEG alebo PNG sa na modernom displeji rozmaže. Pre jednoduché logo uprednostnite SVG.

Logo bez priehľadnosti

Biele pozadie obrázka vytvorí v tmavej hlavičke viditeľný obdĺžnik.

Príliš vysoké logo

Logo môže zbytočne zväčšiť hlavičku a posunúť obsah pod hranicu obrazovky.

Úprava pôvodných súborov šablóny

Aktualizácia môže vlastné súbory prepísať. Použite možnosti štýlu, user.css alebo odvodenú šablónu.

Nahratie neovereného SVG

Cudzí SVG súbor môže obsahovať nepotrebné alebo rizikové prvky. Pred použitím ho skontrolujte a optimalizujte.

Nekonzistentné farby

Iný odtieň modrej v logu, menu, tlačidlách a obrázkoch oslabuje jednotný vzhľad projektu.

Chýbajúca mobilná kontrola

Logo, ktoré vyzerá dobre na monitore, môže na telefóne prekrývať menu alebo zaberať príliš veľa priestoru.

Zabudnutý predvolený favicon

Web má vlastné logo, ale na karte prehliadača sa stále zobrazuje ikona Joomla. Takýto detail pôsobí ako nedokončená konfigurácia.

Kontrolný zoznam pred spustením webu

Pred zverejnením Joomla stránky skontrolujte:

• vlastné logo je nastavené v aktívnom štýle šablóny,
• logo je ostré a má správne proporcie,
• pozadie loga je priehľadné,
• favicon je jednoduchý a rozpoznateľný,
• favicon sa zobrazuje na karte prehliadača,
• pripravený je SVG aj alternatívny ICO súbor,
• logo funguje na svetlom aj tmavom pozadí,
• hlavička je správne zobrazená na mobile,
• farby tlačidiel a odkazov sú jednotné,
• text má dostatočný kontrast,
• slovenské znaky sa zobrazujú správne,
• logo má vhodnú textovú alternatívu,
• vlastné úpravy nie sú uložené v súboroch, ktoré aktualizácia prepíše,
• obrázok pre sociálne zdieľanie je nastavený samostatne.

Záver

Favicon, logo, farby a typografia sú relatívne malé časti webového projektu, ale výrazne ovplyvňujú jeho dôveryhodnosť a zapamätateľnosť. Joomla umožňuje základnú identitu nastaviť priamo v štýle šablóny a pri šablóne Cassiopeia možno jednoducho použiť vlastné obrazové logo, textový názov aj slogan.

Pre hlavné logo je zvyčajne najvhodnejší optimalizovaný SVG súbor s priehľadným pozadím. Favicon by mal byť samostatnou, výrazne zjednodušenou verziou značky. Pri Cassiopeia treba rešpektovať názvy a umiestnenie súborov, ktoré šablóna očakáva.

Rozsiahlejšie zmeny ukladajte do user.css alebo odvodenej šablóny. Vyhnete sa tak strate vlastných úprav po aktualizácii a vytvoríte identitu, ktorú možno dlhodobo udržiavať spolu s webom.