Ve webdesignu, jak asi víte, záleží na každém detailu. Osoba, která přešla na váš zdroj, nevidí každý z prvků samostatně, ale vnímá celý obrázek jako balíček skládající se z dalších malých detailů. Pokud vám tedy něco v procesu vývoje vašeho zdroje unikne, tento detail může později zkazit celý komplex, celou kompozici.
Takovou drobností může být například pozadí tlačítka, špatně zvolený font nějakého malého prvku a třeba i favicon. Přesvědčte se sami – velké, známé stránky mají individuální ikonu, která to označuje v části „Záložky“v prohlížeči uživatele. Bez něj by vývojáři zdroje nebyli schopni vytvořit kompozici, o kterou původně usilovali.
Při vytváření designu vašich stránek byste si proto měli dát pozor na takový detail, jako je favicon. V tomto článku budeme hovořit o tom, jak jej sladit s obecným stylem zdroje, a také o tom, jaké velikosti by tento obrázek měl mít.
Ikona webu
Nejprve si definujme, co tento prvek je. Právě teď se podívejte na název karty vašeho prohlížeče. Jak vidíte, vlevo od něj je malý obrázek, který označuje zjednodušenou verzi loga zdroje. Stejný obrázek je také u názvu webu zobrazeného ve výsledcích vyhledávání. Tím se uživatel řídí, když vidí název.
Mnoho webmasterů chápe, že takový obrázek je potřeba – ale jen málo lidí ví, jaká velikost favicon pro daný web bude nejvhodnější. Proto v tomto článku poskytneme nejen informace o tom, jak vytvořit takovou ikonu a jak ji můžete nainstalovat do svého zdroje, ale také mluvit o velikostech obrázků.
Účel favicon
Pro identifikaci tedy slouží obrázek poblíž záhlaví webu. Toto je jeho původní účel: vyjádřit web, jehož jméno vidíme, a vyniknout v očích ostatních. To se děje co nejjednodušeji pomocí grafiky: intuitivně vnímáme informace na obrázcích mnohem rychleji a snadněji než v textovém formátu. Favicony nám v tom pomáhají. Ale nezapomeňte, že velikost favicon je v očích uživatele minimální. Toto není logo v „záhlaví“webu, které může obsahovat další informace ve formě nápisů, některých upřesnění nebo kontaktních informací. Vše, co lze zobrazit v ikoně u názvu, by mělo co nejvíce odpovídat velikosti favicon. A on, jak již bylo naznačeno, je prostě miniaturní (pouze 16 x 16 pixelů).
Jak si vybratfavicon?
Jak tedy může webmaster navrhnout ikonu pro svůj web? Je třeba poznamenat, že jednoduchá komprimace loga webu, nejčastěji, nebude fungovat. Na emblémech, které jsou umístěny ve formě loga konkrétního zdroje, jsou často viditelné různé prvky, které nebudou vždy správně zobrazeny v miniaturní podobě. Je lepší takový závazek okamžitě opustit.
Velikost favicon samozřejmě neumožňuje mluvit o pouhém vložení nápisu. Jakýkoli text bude v tomto rozlišení jednoduše neviditelný. Potřebujeme vyvinout novou ikonu, která by vyjadřovala styl webu. Abychom našli řešení, znovu se podívejme na největší weby.
Mnoho lidí používá stylizované první písmeno názvu služby jako favicon. Touto cestou jsou například Bing, Yahoo, Yandex, Wikipedia, Google. Existuje další přístup – pokud máte krátký název webu, můžete jej nastavit jako pozadí vaší ikony. Aby velikost favicon (v pixelech dosahuje, opakuji 16 x 16 pixelů) správně zobrazila tento nápis, neměla by být delší než 3 písmena. To dělá například služba Aol.
Jak vytvořit favicon?
Existuje několik způsobů, jak vytvořit ikonu pro název webu. Nejjednodušší je samozřejmě pracovat s různými hotovými řešeními. Můžeme mluvit o některých službách nebo programech, které umožňují udělat ikonu z plnohodnotného obrázku jeho zmenšením. Doporučil bych však takové logo vyvinout vlastními silami. To dá za prvémožnost se něco naučit; a za druhé, poskytne více nástrojů. Stačí k tomu vědět, co kreslit, a také vědět, jakou velikost by favicon měla mít ve finální verzi. O velikosti ikony pro web budeme hovořit o něco později, ale zatím si všimneme některých jemností práce s takovými obrázky. Zejména bez zmínky o velikosti favicon webu by měl být objasněn formát takového obrázku. Jak poznamenali zkušení designéři, obrázek musí být uložen jako-p.webp
Obrázek můžete uložit např. pomocí Photoshopu, kde bude znak nakreslen.
Rozměry favicon
Teď si tedy pojďme promluvit o tom, jak velký by měl být obrázek, který vidíme vedle názvu webu ve výsledcích vyhledávání. Ve výchozím nastavení, jak již bylo zmíněno, je jeho velikost pouze 16 pixelů (na každé straně). Pokud však zkusíte tento obrázek upravit ve Photoshopu, sami uvidíte, jak je to nepohodlné. Proto doporučujeme pracovat se zvětšeným obrázkem, který lze v budoucnu jednoduše zkomprimovat podél okrajů a uložit v požadovaném formátu.
Multiplatformní
Když však mluvíme o tom, jak velká by měla být favicon na vašem webu, je třeba mít na paměti ještě jednu věc. Ne všechny platformy zobrazují obrázek zdroje stejným způsobem. Například zařízení s displejem Retina „vidí“vaši favicon s rozlišením 32 x 32 pixelů. A v Safari a na nové platformě Windows a vůbec tyto ikony dosahují velikosti 64pixelů.
Proto doporučujeme uložit různé verze ikony a jednoduše zajistit její budoucí změnu v závislosti na platformě uživatele. Další zajímavý bod - můžete zkusit načíst ikonu v největším formátu, počítejte s tím, že se bude „zmenšovat“v závislosti na prohlížeči.
Externí redaktoři
Samozřejmě je dobré, když umíte pracovat s Photoshopem a víte, jakou velikost by favicon měla mít a jak toho dosáhnout při ukládání obrázku. Je však spousta začátečníků, kteří se s grafickými editory jen tak zblízka nesetkali, takže požadovaný obrázek tak snadno nenakreslí. Na pomoc takovým webmasterům existují různé služby, které vám umožní automaticky vytvořit ikonu, která vás zajímá. Mnohé z nich jsou dokonce zdarma, což od uživatele nevyžaduje žádné investice.
Někdy se stačí zaregistrovat, abyste mohli pracovat, ale jak víte, to se provádí jednou - koneckonců společnosti nemění svou favicon tak často. Podívejte se na Google, který mění logo každý den, ale nedotýká se ikony.
Jak nainstalovat favicon?
Obecně je nastavení vašich stránek tak, aby správně zobrazovaly obrázek, který potřebujete, velmi jednoduché. Stačí provést řadu jednoduchých kroků, které umožní vyhledávačům i jednoduchým prohlížečům číst informace.
Aby to bylo možné, musí být výsledný obrázek uložen spojmenované favicon.ico a umístěné v kořenovém adresáři vašeho zdroje. To je vše, nyní bude váš obrázek rozpoznán automaticky a po nějaké době bude propojen s vaším webem.
Kromě této vazby můžete přidat ještě jeden řádek, který „naznačí“, kde se vaše ikona nachází. Vypadá to takto:
Nainstalujte kód do záhlaví webu.
Závěry
Po přečtení našeho článku jste tedy přišli na to, jakou velikost by měla mít favicon pro web a jaká to je. Také si myslím, že jste pochopili, že nalezení správné ikony pro váš zdroj je nutností, protože vám to hraje do karet jak z hlediska zvýšení uznání, tak z hlediska nějakého dalšího vyniknutí mezi vašimi konkurenty. Alespoň ty největší weby dělají totéž, což lze brát jako ukázkový příklad. A kromě toho to nevyvolá velké úsilí – jakmile jednou vytvoříte favicon a správně ji nainstalujete na svůj web, můžete na něj na několik měsíců zapomenout.
Neváhejte proto experimentovat, vymýšlet něco nového, zkoušet – a všechno bude fungovat!
