Favicon – ikonka, která pomůže vyniknout

Co to je favicon?

Jistě jste si všimli malé ikonky, která se v prohlížeči u některých stránek zobrazuje před jejich adresou. Této ikonce se říká „favicon“. Její název vznikl spojením anglických slov favorites (oblíbené) a icon (ikona). Favicon se totiž zobrazuje také v oblíbených záložkách webových adres.

K čemu je favicon dobrá?

Favicon je jednou z mnoha maličkostí, které mohou pomoci vašim stránkám vyniknout nad konkurencí. Představuje totiž další místo, kde můžete ukazovat své logo (či jeho část) a podporovat tak svou značku. Užitečná může být i v jiném případě. V dnešní době totiž mnoho uživatelů používá moderní prohlížeče podporující prohlížení v panelech. Často si také otevřou množství panelů se stránkami dopředu a až pak je prohlíží. Při více otevřených panelech však mohou trochu ztrácet orientaci. Nápadná a zajímavá „favikonka“ je může nalákat přímo na vaši stránku.

Jaká má favicon být?

Vytvoření a zasazení favikonky do stránek není nic složitého, proto ji dnes většina stránek má. Kvalita těchto ikon je však různá. Aby favikonka dobře plnila svůj učel, měla by se řídit následujícími zásadami:

• Zobrazovat schematické a jednoduché tvary.
• Respektovat svou velikost (resp. maličkost). Do prostoru 16×16 pixelů se většinou celý název společnosti nevejde :)
• Respektovat firemní design. Může obsahovat logo, jeho část, kombinaci firemních barev apod.
• Být originální a jiná než ikonky konkurence. To nikdy není na škodu.

Jak si favicon vytvořit?

Jsou dva základní způsoby jakými si ikonku vytvořit:

Vygenerovat

Vygenerovat ji z již hotového obrázku (či pomocí vložení textu) pomocí některého z řady programů. Tento způsob je poměrně jednoduchý a rychlý. Do programu stačí vložit obrázek (optimálně ve čtvercovém formátu) a nechat si vygenerovat vlastní favikonku. Výsledky jsou závislé jak na kvalitě vkládaného obrázku, tak na kvalitě programu.

Nakreslit

Namalovat si ji pixel po pixelu. Opět použijeme některý z programů. Jedná se o pracnější a na tvůrce náročnější způsob, ovšem umožňuje nám tvorbu ikonky přesně kontrolovat. Favicony vytvořené tímto způsobem bývají ostřejší a lépe čitelnější. Většina kvalitních editorů však dovoluje nahrát již hotový obrázek a ten pak ještě upravovat.

Vygenerovaný obrázek už stačí jen nahrát na web a do hlavičky stránky vložit následující kód:

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

(Tento kód funguje pouze v případě, že favikonu nahrajete do kořenové složky webu. Pokud budete chtít změnit umístění favikony, je třeba adekvátně změnit i část kódu – href=“…“.)

Programy a editory pro favicon

Programů pro editaci ikon je celá řada. My se zaměříme na online nástroje, které jsou dostupné zdarma.

Generátory:

• websiteplanet.com/cs/webtools/favicon-generator – umí toho mnoho a dokonce i češtinu – ! TIP
• tools.dynamicdrive.com/favicon – umí vytvářet i víceformátové ikonky
• antifavicon.com – vytváří čitelné ikonky pomocí vkládaného textu
• html-kit.com/favicon – umí vytvářet i ikony s animovaným textem

Editory:

• favicon.cc – přívětivé ovládání, automatický náhled ikony – ! TIP
• degraeve.com/favicon – přívětivé ovládání
• shaheeilyas.com/favicon – možnost volit velikost štětce

Pokud znáte nějaké další zajímavé nástroje, v komentářích rádi uvítáme vaše tipy.