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

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

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

Následně pak nastavte cestu, odkud se budou favicony načítat, ve tvaru: /user/documents/ (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

Rozbalené ikonky pak nahrajte na FTP (ideálně přes WinSCP) do výchozí složky /user/documents/ (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

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