Favicon pro web, aneb jak vytvořit a přidat ikonu webu
Favicon je ikonka webu, jinak řečeno malý obrázek, který se zobrazuje například v adresním řádku nebo v přehledu otevřených stránek, podle typu prohlížeče, operačního systému a zařízení. Ikonka by měla být ideálně velmi jednoduchým a výrazným grafickým symbolem, který usnadní uživateli orientaci a napomůže k zapamatování.
Obecně je nejjednodušší řešení vytvořit favicon o velikosti 16x16 px v grafickém editoru, pojmenovat soubor favicon.ico a umístit jej do kořenového adresáře domény. Všechny současné prohlížeče si takto zpracovanou faviconu najdou a zobrazí. Není k tomu potřeba žádný HTML kód ani jiné značky.
V kódu webové stránky je ale lepší mít vše přesně definováno. Proto se na webu používá kód v umístěný mezi tagy HEAD:
Tím má web svou ikonku. Chcete-li ale pokrýt celou problematiku zobrazování ikonky webu napříč všemi prohlížeči, operačními systémy a zobrazovacími zařízeními, nevystačíte si s touto jednou malou ikonkou. Budete potřebovat ve výsledku několik desítek přesně definovaných obrázků v různých formátech a velikostech a k tomu stejně tolik řádků v kódu, plus několik speciálních souborů.
Tady je pár tipů a nástrojů, jak se s tím celkem jednoduše poprat.
Favicon je věda
Proč nestačí jednoduchá ikonka? Proč je potřeba takový cirkus? Protože favicon se v různých prohlížečích zobrazuje v různém režimu. Například v historii zobrazených stránek, v seznamu oblíbených webů, v záložkách, jako dlaždice na výchozí stránce, apod. Potom máme nejrozšířenější operační systémy Windows, iOS, Android a různé typy zařízení (stolní počítače, tablety, mobilní telefony. Tím vzniká mnoho kombinací prohlížečů, opračních sytémů a zařízení. A pro každou kombinaci chceme zobrazit tu naši krásnou a jedinečnou ikonku tak, aby byla ostrá, flexibilní a čitelná. Jak vyzrát na tuhle džungli?
Pomůže Favicon generátor
Favicon generátor je program nebo aplikace, která umí vyrobit všechny požadované typy, formáty a velikosti ikonky. Navíc umí vygenerovat potřebný kód, který potom vložíte na svůj web. Favicon generátorů existuje celá řada, některé dovedou vytvořit jen neúplnou sadu ikon, takže potom je třeba zkombinovat více generátorů, abyste dosáhli na dokonalost.
Jednoduché, elegantní a komplexní řešení nabízí online dostupný Favicon generátor. Nahrajete připravený obrázek (ikonu) o velikosti alespoň 260x260 px, potom můžete upravit nastavení pro zobrazení jednotlivých zařízeních a operačních systémech. Aplikace poté vygeneruje sadu ikon a souborů určených k uploadu do kořenového adresáře webu a také kód pro vložení do hlavičky webu.
Aplikace dále nabízí možnost otestovat favicon webu, zda jsou správně nastaveny všechny cesty k příslušným ikonám a pomůže tak doladit výsledek k dokonalosti.
Další šikovné webové aplikace:
Hledáte-li možnost, jak si ikonku jednoduše nakreslit, vyzkoušejte aplikaci favicon.cc.
Chcete-li si něco ověřit nebo prozkoumat problematiku favicon hlouběji, projděte si favicon-cheat-sheet, kde je vše přehledně zpracováno, včetně užitečných odkazů do různých hloubek celé problematiky.
Favicon pro hračičky a hloubaly
Pro hračičky existuje další možnost - favicon jako animace, video nebo třeba notifikace. Tedy ikonka, která se pohybuje, vybarvuje, tančí anebo dynamicky oznamuje například změny na stránce. Já říkám všeho moc škodí, ale najdete-li smysluplné využití, zkoumejte možnosti další šikovné aplikace favico.js. Nutno podotknout, že taková vychytávka již není úplně standardní a nemusí se tudíž korektně zobrazovat v každém prohlížeči.
Refenční definice pro nastavení favicony pro mobilní zařízení najdete na stránce Web App Manifest a také na Google dokumentu The Web App Manifest.
Pár praktických odkazů
Zpět na předchozí stránku