Vlastní ikona stránek - favicon.ico

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

Vlastní ikona vám pomůže odlišit vaše stránky od ostatních webů. Chcete-li mít na svých stránkách také vlastní ikonku, následující návod vám poradí jak na to.

Jak vytvořit ikonu stránek?

Ikonku stránek (tzv. soubor Favicon.ico) lze vytvořit pomocí libovolného grafického programu určeného na tvorbu a úpravu obrázků. Většina počítačů obsahuje základní program Malování, ve kterém lze vlastní obrázek vytvořit. Použít lze však jakýkoliv váš oblíbený grafický program. Zatím nejpoužívanější velikost favicony je 16 x 16 px nebo 32 x 32 px. S nástupem mobilních zařízení však vznikly i další velikosti např. 180 x 180 px nebo 120 x 120 px. Velikost favicony 16 x 16 px podporuje většina prohlížečů. Do favicony lze zvolit např. část loga, vhodné jsou jednoduché motivy.

Vytvoření ikony v grafickém programu

Mezi grafické programy, které umožňují tvorbu faviconu patří např. program PixelToolbox, s jehož pomocí můžete navrhnout a vytvořit vlastní ikonku stránek v požadovaném formátu .ico. Další program, který podporuje ukládání obrázků ve formátu .ico je Gimp. 

Pokud při vytváření ikonky použijete některý z jiných grafických programů (např. Malování, Zoner Photo Studio, Adobe Photoshop aj.), které formát .ico nepodporují (obrázek v tomto formátu nelze uložit), nevadí. Jednoduše připravte obrázek, uložte jej pod názvem favicon ve formátu .jpg nebo .png a použijte online favicon generátor.

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

Pro převod formátu jsme zvolili online Favicon Generátor, pro který je vhodné připravit obrázek o velikosti 260 x 260 px. Tento užitečný nástroj snadno a rychle převede vámi vytvořený obrázek z formátu (jpg, jpeg, gif, png, bmp ) do požadovaného formátu .ico. Generátor vygeneruje i další velikosti ikon a HTML kód pro jejich umístění. My využijeme pouze soubor s koncovkou .ico

1. Jednoduše klikněte na tlačítko Select your Favicon picture a vyberte připravený obrázek na vašem pc.
   
2. V případě, že není váš obrázek přesný čtverec, ukáže se upozornění. Můžete tedy znovu upravit obrázek a vložit jej do generátoru znovu, anebo pokračovat dál, s tím, že generátor zbývající prostor doplní.
   
3. Níže na stránce potvrďte vytvoření favicony tlačítkem Generate your Favicons and HTML code
   
   
4. Posledním krokem je stažení balíčku tlačítkem Favicon package a rozbalení jej na vašem počítači.
   

Po stažení balíčku zbývá již jediné, a to nahrát ikonku do administrace inPage a nastavit jako vlastní ikonu stránek.

Nastavení ikony v inPage

Ikonu přidejte do administrace inPage v sekci Soubory tlačítkem Přidat soubor. V otevřeném okně:

1. zadejte název souboru Favicon.ico
2. pomocí tlačítka Vybrat soubor vyberte z PC soubor s ikonkou ve formátu .ico
3.  a v části nastavení zvolte - otevřít v prohlížeči 

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

Nastavení a zobrazení ikonky na webu

Jakmile jste nahráli vaši ikonku do souborů v administraci, zbývá provést poslední krok, a tím je nastavení favicony v sekci Vzhled → Favicon → Existující soubor → pole Vybrat favicon ze svých souborů. V poli vyberte váš soubor a úpravy uložte.

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

Nejčastější chybou, kterou mnozí uživatelé dělají při vytváření ikonky stránek, je přejmenování původního obrázku z formátu .jpg nebo .png do formátu .ico. Ikonka vytvořená tímto nesprávným způsobem vám na webu nebude fungovat, je potřeba ikonku vytvořit správně v grafickém programu podporující formáty .ico nebo váš obrázek převeďte do formátu .ico přes online generátor, ušetříte si tím čas i práci!