Znáte ji, takovou tu ikonku, co se zobrazuje v prohlížeči vedle adresy, v záložce, v oblíbených u uložené adresy. Na vašem webu ji nejsnadnější poskytnete k použití pomocí souboru favicon.ico. A pokud nemáte žádný extra vhodný nástroj k vytvoření a nejste zkušení na vytváření grafických záležitosti, tak můžete zkusit nejeden nástroj použitelný online.
Než si ukážeme jaké, tak ale něco málo o tom, co to ta favicon (favorite icon) vlastně je a co byste o ní měli vědět. Protože od doby co tohle vzniklo (to byl rok 1999) se toho hodně změnilo. Třeba i to, že dnes už to nemusí nutně být soubor jménem favicon.ico uložený v hlavní složce vašeho webu.
Dnešní favicon vychází te standardu, který W3C (World Wide Web Consortium) přijalo někdy v roce 2000 a nasazení favicon na váš web je dnes spíše věcí html značky (nebo spíše i více značek) LINK s identifikací rel=“shortcut icon“ a odpovídajícím určením, kde se nachází. Což hlavně znamená, že původní .ICO formát už dnes není nutný a jako favicon v zásadě poslouží jakýkoliv obrázek (ale má to různá ale). Poměrně hodně toho o favicon je na Wikipedii v hesle Favicon.
Obrázek v podobě favicon je v zásadě vždy čtvercový (16×16, 32×32, 48×48 nebo 64×64 bodů) s 8/24/32 bitovou barevností. Aby to bylo ještě komplikovanější, tak Apple iOS a některé Androidy podporují specifickou podobu (hlavně velikost) favicon – ta se použije jako ikona na ploše a měla by mít 60×60 bodů jako základ, ale 120×120 bodů pro lepší displeje u iPhone, zatímco pro iPad je to opět komplikovanější, zde jde o 76×76 a 152×152 bodů. U Androidů to může být ještě komplikovanější, protože tady je v oblibě 129×192 bodů v PNG podobě.
Pokud provozujete web, tak byste měli vědět, že je opravdu dobrý nápad si favicon pořídit, zejména v původní favicon.ico podobě, jinak budete příliš často v 404 logu sledovat požadavky na něco, co neexistuje.
TIP: U WordPress.com, na kterém @365tipů jede, se tahle ikonu řeší přes „gravatar“, což je dobré vědět, až to budete marně hledat.
Co vám tedy pomůže si opatřit favicon.ico?
www.favicon.cc je jedna možná varianta. Můžete zkusit štěstí a ručně si ikonku namalovat. Není to až tak obtížné, samotná ikonka je malá a po bodech si ji můžete hezky naklikat. Případně můžete udělat to, že někde vezmete nějaký větší obrázek, ideálně čtvercový a naimportujete si ho. Pokud byl větší, tak se samozřejmě hodně zmenší a možná bude nesmyslný – při trošce štěstí ale výsledná malá ikonka může vypadat docela dobře.
Hned po importu uvidíte jak výsledná ikonka vypadá v „preview“ dole, ale také přímo v záložce (tabu) prohlížeče (tedy alespoň v Chrome tomu tak určitě bude). Pak už stačí zvolit Download Favicon (uprostřed dole) a stažený soubor umístit na váš web.
favicon-generator.org nabízí prakticky totožnou funkčnost, buď ruční vytvoření nebo import souboru, který zmenší a poskytne ke stažení jako favicon.ico. Oproti předchozímu má jediný nedostatek, import a tvorba vlastní ikonky jsou odděleny, takže si nemůžete natáhnout soubor a poté ho opravovat. V Galerii se navíc můžete podívat na nějaké ty skoro dva miliony hotových ikonek. Výhoda může být, že vám vygeneruje i všechny ty záhadné LINK REL značky.
tools.dynamicdrive.com/favicon umí pouze import, ale může se hodit pokud chcete vytvořit i ikonu pro desktop (32×32 bodů a 48×48 bodů). Podobně tomu je u www.favicon.co.uk kde opět můžete pouze nahrát soubor a nechat si vytvořit výsledek ve více velikostech.
Další možnosti? Třeba favicon.htmlkit.com/favicon, realfavicongenerator.net či www.genfavicon.com. Další najdete snadno, pokud si prostě do Google napíšete, že hledáte „favicon„.
A poslední tip na www.degraeve.com/favicon nabízí při importu možnost oříznutí importovaného obrázku – a to jak výřezem, tak zmenšením. Výsledek poté umožňuje editovat, ale náhled na to jak ikonka vypadá nabídne až po vytvoření.
