Favicona

Favicona nebo favicon je ikonka, která se objevuje v levé části adresního řádku, oblíbených záložkách, nebo také ve výsledcích internetových vyhledávačů (Obrázek 01). Faviconou může být třeba zmenšené logo a nebo ikona, která dobře vystihuje váš e-shop.

Faviconu lze nastavit dvěma způsoby, a to buď prostřednictvím nastavení vzhledu, nebo prostřednictvím FTP úložiště a HTML editoru. První způsob nabízí rychlou možnost nastavení, která vám zajistí kompatibilitu favicony s většinou moderních prohlížečů. Druhá možnost rozšiřuje kompatibilitu favicony s dalšími externími službami a různými typy zařízení.

Níže si popíšeme oba způsoby nastavení.

Příprava favicony v případě přímého nahrání na e-shop

Před nahráním favicony do e-shopu je třeba, aby vybraný obrázek splňoval následující parametry:

• Soubor musí být ve formátu ICO (přípona .ico). V tomto formátu musí být obrázek přímo uložen, pouhé přepsání přípony obrázku například z .jpg či .gif na .ico nebude fungovat.
• Obrázek musí mít rozlišení 16 x 16 pixelů.

Faviconu si můžete připravit např. ve formátu JPG nebo GIF a následně použít některou online službu, která vám obrázek automaticky převede do požadovaného formátu (např. Favicon Generator nebo Favicon.cc).

Jak vložit faviconu na vaše stránky

V administraci e-shopu Vzhled a obsah → Editor → Další nastavenízvolte tlačítko Nahrát (Obrázek 02). Zde nahrajete vámi připravený soubor ve formátu ICO.

Vytvoření favicony pro všechny typy zařízení

Některé typy zařízení a externí služby využívají favicony i ve vyšším než standardním rozlišení 16 x 16 pixelů. Specifická rozlišení favicon používají například smartphony a tablety při uložení stránky na plochu. Stejně tak s vyššími rozlišeními pracuje například Google. Doporučujeme tedy využít službu Real Favicon Generator, kde máte možnost hromadně vytvořit více verzí vaší favicony.

Připravte si obrázek, který má rozměry alespoň 260 x 260 px. Tím zajistíte jeho kvalitní zobrazení napříč všemi prohlížeči.

Po nahrání obrázku pak vidíte náhledy u jednotlivých typů zařízení. U Android Chrome je však nutné doplnit i název, který se spolu s faviconou bude zobrazovat (Obrázek 03).

Pod náhledy favicony nastavte cestu, odkud se budou favicony z úložiště vašeho e-shopu načítat, a to ve tvaru: /user/documents/ (Obrázek 04).

Po potvrzení dojde k vygenerování samotných favicon a HTML kódu pro jejich nasazení do e-shopu. Ikony stáhněte do počítače pomocí kliknutí na tlačítko Favicon package (Obrázek 05). Obsah souboru rozbalte. Stránku zatím nezavírejte, budete ji ještě potřebovat.

Rozbalené ikonky pak nahrajte na FTP (např. pomocí programu WinSCP) do výchozí složky /user/documents/ (Obrázek 06).

Po uložení ikonek na FTP přejděte na e-shopu do sekce HTML editoru Vzhled a obsah → Editor → HTML kód a vložte do části Záhlaví kód vygenerovaný na stránce společně s faviconami (Obrázek 07).

Po uložení kódu se favicona začne zobrazovat na všech typech zařízení. Pokud by se vám favicona po uložení změn v prohlížeči nezobrazovala, může to být proto, že váš prohlížeč vám zobrazuje ze své mezipaměti (tzv. cache) starší verzi obchody bez favicony. Doporučujeme pak znovunačíst stránku s vynuceným promazáním mezipaměti, čehož lze ve většině prohlížečů docílit klávesovou zkratkou Ctrl + Shift + R nebo Ctrl + F5 (na Windows), nebo Cmd + Shift + R (na MacOS). Nebo si případně zkuste e-shop zobrazit prostřednictvím režimu inkognito či anonymního okna.