Menu
Přihlásit
Vyzkoušet zdarma
Menu

    Favicon: Co to je a proč je důležité mít ji na webu?

    Pokud vlastníte web, pravděpodobně jste slyšeli o faviconu. Pro vás, kteří tento pojem neznáte: Favicon je malý ikonový obrázek, který se obvykle nachází vedle názvu vašeho webu v záložkách prohlížeče. Ale co to přesně je favicon a proč by měl být na vašem webu přítomen? V tomto článku se podíváme na všechny aspekty faviconu a jeho důležitosti pro váš web.

    Co je to favicon?

    Favicon je zkrácenina pro “favorite icon” (oblíbená ikona) a je to malý ikonový obrázek, který se používá k identifikaci vašeho webu v prohlížeči. Obvykle se nachází vedle názvu stránky v záložce prohlížeče a také se zobrazuje v záložce při přidání stránky do oblíbených. Většinou má velikost 16×16 pixelů, ale může být větší, například 32×32 pixelů.

    Jak favicona funguje?

    Když uživatel navštíví váš web, jeho prohlížeč stáhne faviconu ze serveru vašeho webu a uloží ho do mezipaměti pro další použití. To umožňuje prohlížeči rychle načíst ikonu, aniž by musel opakovaně navštěvovat server. Favicona také umožňuje uživateli rychleji identifikovat vaši stránku mezi mnoha otevřenými záložkami v prohlížeči.

    Proč je důležité mít faviconu na vašem webu?

    Mít faviconu na vašem webu má mnoho výhod:

    1. Zlepšuje uživatelskou zkušenost: I když se může zdát, že je to malý detail, favicona pomáhá zlepšit uživatelskou zkušenost tím, že umožňuje uživateli rychleji identifikovat vaši stránku mezi mnoha otevřenými záložkami v prohlížeči.
    2. Posiluje vaši značku: Favicona může být další způsob, jak posílit vaši značku a dát uživatelům vědět, že se nacházejí na vašem webu.
    3. Zvyšuje důvěryhodnost: I když je favicona malá, může pomoci zvýšit důvěryhodnost vašeho webu tím, že ukazuje, že se staráte o detaily.
    Chci zvýšit tržby mého e-shopu

    Jak vytvořit faviconu?

    Vytvoření favicony je relativně snadné. Existuje několik způsobů, jak to udělat:

    1. Použití grafického editoru: Pokud máte zkušenosti s grafickými editory, můžete si snadno vytvořit vlastní faviconu. Použijte svůj oblíbený grafický editor, abyste vytvořili ikonu ve velikosti 16×16 pixelů (nebo jiné, pokud to vyžaduje váš design) a uložte ji jako favicon.ico.
    2. Použití online generátoru: Pokud nevlastníte grafický editor nebo nemáte zkušenosti s designem, můžete použít online generátor favicon. Existuje mnoho webových stránek, které vám umožní snadno vytvořit vlastní faviconu, například favicon-generator.org nebo favicon.io.
    3. Použití již hotových ikon: Pokud nechcete trávit čas vytvářením vlastní favicony, můžete použít některý z již hotových icon setů, které jsou k dispozici online, jako například Font Awesome nebo Material Design Icons. Stačí stáhnout soubor s ikonami a použít požadovanou ikonu jako faviconu.

    Jak faviconu nahrát na váš web?

    Jakmile máte vytvořenou faviconu, můžete ji nahrát na váš web. Postup je různý v závislosti na vaší platformě. Ve většině krabicových řešení jako je například Shoptet, stačí nahrát obrázek v požadovaném formátu na příslušné místo.

    Pokud si web programujete na zelené louce nebo váš systém neumožňuje vložení favicony jiným způsobem, postupujte takto: 

    1. Uložte ikonu jako favicon.ico.
    2. Nahrajte ikonu na váš web. Obvykle se jedná o umístění souboru favicon.ico do kořenového adresáře vašeho webu.
    3. Přidejte kód do záhlaví HTML vašeho webu. Kód by měl vypadat následovně:

    <head>
    <link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
    <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
    </head>

    Tento kód říká prohlížeči, aby použil favicon.ico jako ikonu pro váš web.

    Závěr

    Favicona je malý detail, ale může mít velký dopad na uživatelskou zkušenost a důvěryhodnost vašeho webu. Vytvořit vlastní faviconu je snadné a může být zábavné, pokud máte zájem o design. Pokud se rozhodnete vytvořit vlastní faviconu, nebojte se experimentovat s barvami a tvary, aby odpovídaly vaší značce a pomohly vašemu webu vyniknout.

    Chci zvýšit tržby mého e-shopu

    Další články:

    Facebook Youtube
    Menu
    Menu
    Vyzkoušet zdarma