Ikona stránek favicon.ico – malý obrázek, který nesmí chybět na žádném webu

Malá ikonka je v prostředí internetu mnohem důležitější, než se může na první pohled zdát. Potkáte ji v okně prohlížeče, v záložkách, ve vyhledávání, v historii prohlížeče a tím výčet zdaleka nekončí. K čemu je ikona stránky dobrá, jak ji vytvořit a nasadit na web? Vše se dozvíte v našem článku.

Co je favicon?

Favicon či favicona (z anglického „favorite icon“ neboli oblíbená ikona) je ikona stránky, která byla původně určena pro větší přehlednost tzv. oblíbených záložek v prohlížeči. Dnes ji však můžete vidět v horní liště prohlížeče u otevřených oken a záložek, v historii a ve vyhledávačích.

Záložky

Je tedy zřejmé, že se jedná o důležitý prvek stránek. Ikona o velikosti 16×16 px pomáhá zlepšit přehlednost a identifikovatelnost vašich stránek.

Ikona je důležitá také pro SEO – využívají ji i vyhledávače

Přestože Google ikonu stránek v SERPu nezobrazuje, některé další vyhledávače ji zohledňují a zobrazují. Za zmínku stojí například čím dál populárnější DuckDuckgo.com.

Active seznam

Faviconu nově zobrazuje u výsledků hledání místo náhledu stránek také Seznam.cz. Jedná se tedy o užitečné vodítko pro uživatele, kteří si mohou pamatovat ikonu z předchozího prohlížení stránek a snadněji díky ní naleznou, co hledají.

Jak vložit favicon.ico do WordPress stránek

Ikonu favicon.ico umí většina dnešních služeb a prohlížečů automaticky detekovat ze zdrojové složky stránek. Stačí tedy ikonu nahrát skrze FTP rozhraní do root složky. Využít k tomu můžete přístupové údaje vašeho webhostingu a správce souborů, např. Total Commander či FileZilla.

Některé starší prohlížeče vyžadují odkaz na ikonu v kódu:

  • V administraci stránek najeďte na „Vzhled“ > „Editor“
  • Zde vyberte v pravém sloupci soubor header.php - Vyhledejte řádek kódu začínající na <link rel="shortcut icon" a končí /favicon.ico" />
  • Nahraďte jej kódem <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
  • Pokud jej nemůžete najít, vložte zmíněný kód pod hlavičku, tedy za <head> tag

Některé šablony mají možnost nahrání ikony přímo ve svém nastavení. Nejprve se tedy podívejte, zda tam taková možnost není.

Jak vytvořit favicon.ico? Vygenerujte si obrázek online

Ikonu lze snadno vytvořit ve standardních grafických editorech, jako je GIMP nebo Photoshop. Důležité je, aby byl výstupem obrázek ve formátu ICO s rozlišením 16×16 obrazových bodů.

Pokud nemáte po ruce grafika, který by vám ikonu vytvořil, je nejjednodušším řešením sáhnout po online generátorech. Tyto internetové služby fungují na principu, kdy převedou uživatelem nahraný obrázek na miniaturní ikonku ve správném formátu a velikosti.

Google

Ideálním podkladem pro tvorbu ikony je logo ve formátu PNG, nebo JPEG. Ať už jde o firemní stránku, e-shop či blog, většinou již nějaké logo bývá hotové. Právě logo si jako důležitý prvek firemní identity lidé často pamatují, a právě proto by z něj favicona měla vycházet.

Přestože základní verze ikony má jen 16×16 pixelů, umí některé služby generovat celou sérii různých velikostí, které je z dnešního pohledu dobré neopomenout. Pracují s nimi např. mobilní aplikace. Dobrou zprávou je, že pro uživatele to neznamená prakticky žádnou práci navíc.

Nejlepší online favicon.ico generátory:

Generátor favicon

A co byste měli dělat, když nemáte logo ani vhodný obrázek? Pokud není logo k dispozici, lze si ikonu vytvořit po svém. Stačí zvolit text, barvu a během chvilky máte ikonu vygenerovanou a připravenou k použití.

Správná favicona zlepší zapamatovatelnost značky

Moderní prohlížeče operují se záložkami, kterých můžete mít naráz v jednom okně spuštěných klidně desítky. Favicona je pak důležitým prvkem pro orientaci uživatele. V případě, že si otevře vícero stránek, orientuje se nejrychleji právě podle ikony.

Záložky A24

Pokud se podíváte do historie prohlížení stránek, ukážou vám nejpoužívanější prohlížeče současnosti vedle adresy a jména stránky právě ikonu favicon. To samé platí pro oblíbené záložky.

Hodnocení článku

Průměrné hodnocení: 4.8/5

Počet hlasů: 5