Favicona

Čo je to favicona

Favicona alebo favicon je ikonka, ktorá sa objavuje v ľavej časti adresného riadku (obrázok 01). Faviconou môže byť napríklad zmenšené logo vášho internetového obchodu.

Príprava favicony v prípade priameho nahrania na e-shop

• Súbor musí byť vo formáte ICO (meno súboru napr. favicon.ico).
• Je nutné obrázok uložiť v tomto formáte, uloženie klasického obrázku (JPG, GIF apod.) a jeho následné premenovanie nebude fungovať.
• Rozmery obrázku musia byť 16 x 16 pixelov.

Faviconu si môžete pripraviť napr. vo formáte JPG alebo GIF a následne použiť niektorú online službu, ktorá vám obrázok automaticky prevedie do požadovaného formátu (napr. Favicon Generator alebo Favicon.cc).

Ako vložiť faviconu na vaše stránky

V administrácii e-shopu Vzhľad a obsah → Editor → Ďalšie nastavenia zvoľte tlačidlo Nahrať (obrázok 02). Tu nahráte vami pripravený súbor vo formáte ICO.

Vytvorenie favicony pre všetky typy zariadení

Favicona sa v dnešnej dobe zobrazuje trochu iným spôsobom v bežnom prehliadači na počítači a na mobilnom telefóne či tablete. Odporúčame teda využiť službu Real Favicon Generator, kde máte možnosť vytvoriť si vlastnú faviconu a prispôsobiť ju pre každý typ zariadenia.

Pripravte si obrázok, ktorý má rozmery aspoň 260 x 260 px. Tým zaistíte jeho kvalitné zobrazenie naprieč všetkými prehliadačmi.

Po nahraní obrázku potom vidíte náhľady u jednotlivých zariadení, u Android Chrome je však nutné doplniť aj názov, ktorý sa spolu s faviconou bude zobrazovať (obrázok 03).

Následne potom nastavte cestu, odkiaľ sa budú favicony načítať, v tvare: /user/documents/ (obrázok 04).

Po potvrdení dôjde k vygenerovaniu samotných favicon a HTML kódu. Ikony stiahnite do počítača pomocou kliknutia na tlačidlo Favicon package (obrázok 05). Obsah súboru rozbaľte. Stránku zatiaľ nezatvárajte, budete ju ešte potrebovať.

Rozbalené ikonky potom nahrajte na FTP (ideálne cez WinSCP) do predvolenej zložky /user/documents/ (obrázok 06).

Po uložení ikoniek na FTP prejdete na e-shope do sekcie HTML editoru Vzhľad a obsah → Editor → HTML kód a vložte do časti  Záhlavie kód vygenerovaný na stránke spoločne s faviconami (obrázok 07).

Po uložení kódu sa potom začne zobrazovať favicona na všetkých typoch zariadení.