Věnujete někdy pozornost těm malým ikonám v horní části karet prohlížeče? A co třeba když si uložíte zástupce na web nebo stránku online? Tyto drobné obrázky neboli favikony jsou navrženy speciálně pro tento účel.

Existuje poměrně výrazný rozdíl mezi tím, co tvoří dobrou a co špatnou drobnou ikonu. Dalo by se odpustit, kdybyste si mysleli, že na rozhodnutích o designu v malém měřítku záleží méně. Ale špatně navržená favicon se může špatně odrazit na vaší značce.

Dnes se podíváme na to, co jsou to ikony, základní techniky jejich návrhu a specifikace, které budete muset dodržovat.

Co je to favicon?

Favicon je zjednodušeně řečeno malá průhledná ikona používaná k reprezentaci webové stránky, značky nebo firmy. Favikony pomáhají zlepšit uživatelskou zkušenost tím, že poskytují konzistentní značku, která návštěvníkům webových stránek říká, že se při navigaci nacházejí na stejném webu díky konzistentnímu vizuálu.

Termín favicon pochází ze slova „oblíbená ikona“. Tato terminologie pochází z dob Internet Exploreru, kdy se stránkám se záložkami říkalo „oblíbené“. Poprvé byla ikona favicon přijata konsorciem World Wide Web Consortium (W3C) pro jazyk HTML 4.0 kolem roku 2000 a v následujícím roce se začala v oknech prohlížeče objevovat důsledněji.

Favicony slouží k rychlému listování mezi kartami prohlížeče, k identifikaci záložky nebo k nalezení uložené aplikace či zástupce v telefonu. Vizuální identifikátor je to, co většina lidí používá ke spojení těchto odkazů a stránek se správným tlačítkem pro přístup k nim.

Tradičně favikony používaly formát souboru .ico, ale to je nyní menší problém. Ve většině případů bude fungovat jakýkoli průhledný typ souboru; často se volí formát .png.

Technické úvahy

Kdysi byly všechny favikony super malé čtverečky o velikosti 16 pixelů. To už dnes neplatí s přibývajícími obrazovkami s vysokým rozlišením retina a ikonami zástupců, které je třeba brát v úvahu.

HTML 5 obsahuje standardy pro favikony s několika velikostmi pro nejrůznější použití, od malých ikon prohlížeče přes ikony dokovací stanice počítače až po ikony domovské obrazovky. Ve skutečnosti už ani nepotřebujete ten čtverec o velikosti 16 pixelů.

Moderní velikosti a použití favikon:

• 32×32: Standard pro většinu desktopových prohlížečů (nahrazuje 16×16)
• 128×128: Ikona obchodu Chrome a malá ikona hvězdičky obrazovky Windows 8
• 152×152:
• 167×167: dotyková ikona iPadu Retina
• 180×180: ikona iPhone Retina
• 192×192: doporučení webové aplikace Google Developer
• 196×196: Ikona na domovské obrazovce Androidu

Nejlepší postupy

Ačkoli se zdá, že taková ikona může být z hlediska celkového designu bezvýznamná, není to zdaleka pravda.

Favikona vypovídá hodně o vaší značce a webu. Uživatelé je očekávají, pokud je nemohou identifikovat podle názvu. Tyto malé prvky přispívají k celkovému uživatelskému zážitku a značce.

Jak tedy můžete z favikony vytěžit maximum?

Mějte na paměti tyto osvědčené postupy:

• Favikona by měla navazovat na identitu vaší značky, ale často je příliš malá na to, aby obsahovala celé logo. Použijte identifikovatelný prvek, například první písmeno názvu značky nebo drobnou značku, kterou používáte ve spojení se značkou.
• Myslete na tvar. Prostor pro favikonu je ve výchozím nastavení čtvercový. Pokud chcete něco jiného, je nutné průhledné pozadí. Některé systémy mohou také zaoblit okraje, takže je to další hledisko, na které je třeba pamatovat.
• Ujistěte se, že soubor je malý, ale ne příliš malý. Nahrajte takovou velikost favikony, která se bude správně vykreslovat na většině zařízení, ale nezatíží celý web.
• V návrhu favikony se vyhněte slovům nebo složitým prvkům.
• Držte se jednoduché zjednodušené barevné palety favikony. Je příliš malá na to, abyste se zbláznili do barev. Proto většina těchto malých ikon nepoužívá nic víc než barvu pozadí a popředí s velkým kontrastem mezi nimi.

Techniky návrhu

Protože je favicon malá, můžete mít tendenci navrhovat ji podle rozmaru ve Photoshopu. To není doporučená cesta pro dlouhou životnost.

Favikonu vytvořte ve vektorovém nástroji, jako je Illustrator nebo Sketch, a poté návrh exportujte do potřebných velikostí. Tím zajistíte, že při změně rozlišení obrazovky budete mít faviconu, která obstojí ve zkoušce časem. (Jediné, co budete muset udělat, je znovu vyexportovat novou velikost.)

Nejdůležitějším pravidlem vizuálního designu favikony je zachovat jednoduchý design. Nepřehánějte to s barvami, textem ani prvky značky. Když se podíváte na příklady v tomto příspěvku, uvidíte, že téměř všechny tyto drobné prvky jsou čitelné při velikosti 16 × 16 pixelů.

Vyhněte se trikům, jako jsou animace; ty zde jen překážejí.

Považujte to za výzvu pro design. Může být docela těžké vytvořit něco tak malého, aby to bylo dobře čitelné.

Ulož soubor jako průhledný png. Je to dobrý zvyk, který zajistí, že na favikoně neskončíte s divnými okraji nebo ohraničením. (Nic nevypadá hůř než zubatý bílý okraj kolem ikony.)

Používejte zásady dobrého designu. Nikdy nevíte, kdy může být favicon použita pro něco ve větší, viditelnější velikosti. Například pro uložení záložky webové stránky lze použít velkou verzi favikony. Totéž platí pro dokládání a dokonce i v náhledech výsledků vyhledávání.

I když je tato ikona malá, reprezentuje vaši značku. Navrhněte ji dobře.

Jakmile máte soubor připravený, můžete jej přidat na své webové stránky pomocí několika řádků kódu. (Mnohá témata WordPressu a tvůrci webových stránek již obsahují prvek favicon, takže na tento krok nemusíte ani myslet.)

Po nahrání souboru s obrázkem vložte do záhlaví svého webu následující kód, přičemž si všimněte, že „iconpath“ a „iconname“ odkazují na konkrétní prvek souboru:

Příklady

Následující příklady obsahují některé prvky značky s přidruženými favicony. (Nezapomeňte na ně kliknout a projevit návrhářům lásku na jejich stránkách Dribbble.)

Prodigi.Team Responsive Logotype

Butterscotch Proposed Logo System

Zobrazení favikony loga

.

Šablona favikony

Varianta 2 loga TEC

Závěr

Co favikonům chybí na velikosti, vynahrazují to uživatelským zážitkem. Tyto ikony slouží jako navigační nástroje pro návštěvníky vašich stránek a pro ty, kteří mají tendenci nechávat otevřeno příliš mnoho karet prohlížeče.

Obecně platí, že favicon je rychlý vizuální identifikátor, který uživatele spojuje s vaší digitální přítomností. Dejte si na něm záležet, aby co nejlépe a nejpřesněji reprezentoval vaši značku.