Favicona

Co je to favicona

Favicona nebo favicon je ikonka, která se objevuje v levé části adresního řádku (obrázek 01). Faviconou může být třeba zmenšené logo vašeho internetového obchodu.

Obrázek 01
Obrázek 01

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

  • Soubor musí být ve formátu *.ico.
  • Je nutné obrázek uložit v tomto formátu, uložení klasického obrázku (*.jpg, *.gif apod.) a jeho následné přejmenování nebude fungovat.
  • Rozměry obrázku musí být 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.

Obrázek 02
Obrázek 02

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

Favicona se v dnešní době zobrazuje trochu jiným způsobem v běžném prohlížeči na počítači a na mobilním telefonu nebo tabletu. Doporučujeme tedy využít službu Real Favicon Generator, kde máte možnost vytvořit si vlastní faviconu a přizpůsobit ji pro každý typ zařízení.

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 zařízení, u Android Chrome je však nutné doplnit i název, který se spolu s faviconou bude zobrazovat (obrázek 03).

Obrázek 03
Obrázek 03

Následně pak nastavte cestu, odkud se budou favicony načítat, ve tvaru: /user/documents/ (obrázek 04).

Obrázek 04
Obrázek 04

Po potvrzení dojde k vygenerování samotných favicon a HTML kódu. 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.

Obrázek 05
Obrázek 05

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

Obrázek 06
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).

Obrázek 07
Obrázek 07

Po uložení kódu se pak začne zobrazovat favicona na všech typech zařízení.

Pokud faviconu po nahrání nevidíte, může to být proto, že váš prohlížeč vám zobrazuje ze své mezipaměti (tzv. cache) starší verzi obchodu. 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).