Ikona stránek (favicon)

Favicon je malá ikonka webu, která se zobrazuje v záložce prohlížeče (případně i na dalších místech v prohlížeči). Nejčastěji se používá formát .ico, podporovaný je však i .svg.

Vzhled faviconu obvykle vychází z loga, aby ladil s celkovým stylem webu. I přes miniaturní velikost by měla být ikona snadno rozpoznatelná – rychleji si všimnete ikonky než textového popisku v záložkách.

(příklady ikon v záložkách prohlížeče)

Vlastní favicon vám pomůže odlišit váš web od ostatních. Níže najdete postup, jak favicon vytvořit a nastavit v inPage.

Jak vytvořit ikonu stránek

Favicon (soubor favicon.ico) můžete vytvořit v libovolném grafickém programu. Nejčastěji se používá velikost 16 × 16 px nebo 32 × 32 px. Pro moderní zařízení existují i větší varianty (např. 180 × 180 px). Do faviconu je vhodné použít jednoduchý motiv – ideálně výřez z loga.

Vytvoření ikony v grafickém programu

Mezi programy, které umožňují ukládání do formátu .ico, patří například PixelToolbox nebo Gimp.

Pokud používáte jiný program (např. Malování, Zoner Photo Studio, Adobe Photoshop apod.), který formát .ico nepodporuje, nevadí. Připravte si obrázek, uložte jej jako .png nebo .jpg (ideálně jako čtverec) a následně jej převeďte pomocí online konvertoru.

K dispozici je řada online konvertorů, například FreeConvert, Favicon Generator, Picflow a další.

Převedení obrázku do formátu .ico přes online generátor

Pro převod můžete použít například online nástroj RealFaviconGenerator. Doporučujeme si připravit čtvercový obrázek (např. 260 × 260 px). Nástroj převede obrázek z běžných formátů (jpg, jpeg, gif, png, bmp) do .ico a obvykle vygeneruje i další velikosti ikon a HTML kód. Pro inPage budete typicky potřebovat pouze soubor s koncovkou .ico.

1. Klikněte na tlačítko Select your Favicon picture a vyberte připravený obrázek ve vašem počítači.

2. Pokud obrázek není čtvercový, zobrazí se upozornění. Můžete obrázek upravit a nahrát znovu, nebo pokračovat – generátor doplní chybějící prostor.

3. Níže na stránce potvrďte vytvoření ikon kliknutím na Generate your Favicons and HTML code.

4. Stáhněte balíček tlačítkem Favicon package a rozbalte jej na počítači.

Po stažení už stačí ikonku nahrát do administrace inPage a nastavit ji jako favicon webu.

Nastavení faviconu v inPage

Ikonu nahrajte do administrace v sekci Soubory pomocí tlačítka Přidat soubor. V otevřeném okně:

1. Zadejte název souboru favicon.ico.
2. Pomocí tlačítka Vybrat soubor vyberte z počítače soubor ve formátu .ico.
3. V nastavení zvolte možnost otevřít v prohlížeči.

Ostatní parametry ponechte beze změn a nahrání dokončete kliknutím na Uložit.

Nastavení a zobrazení ikonky na webu

Jakmile je soubor nahraný, nastavte favicon v sekci Vzhled → Favicon. Zvolte Existující soubor a v poli Vybrat favicon ze svých souborů vyberte nahraný soubor. Poté změny uložte.

Na co si dát při tvorbě faviconu pozor

Nejčastější chybou je pouhé přejmenování souboru z .png nebo .jpg na .ico. Takto „vytvořený“ favicon fungovat nebude. Je potřeba ikonu správně exportovat do formátu .ico (v grafickém programu, který to podporuje), nebo obrázek převést pomocí online generátoru.