Příklady Favicon, osvědčené postupy a techniky

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

Existuje značný rozdíl mezi tím, co vytváří dobrou nebo špatnou drobnou ikonu. Bylo by vám odpuštěno, kdybyste si mysleli, že návrhová rozhodnutí v malém měřítku záleží méně. Ale špatně navržený favicon se může na vaši značku špatně odrazit.

Dnes se podíváme na to, co tyto ikony jsou, základní designové techniky pro ně a specifikace, které musíte dodržovat.

Prozkoumejte prvky Envato

Co je Favicon?

Jednoduše řečeno, favicon je malá, průhledná ikona sloužící k reprezentaci webové stránky, značky nebo firmy. Favikony pomáhají vylepšovat uživatelské prostředí tím, že poskytují konzistentní značku, která návštěvníkům webových stránek sděluje, že jsou na stejném webu, na kterém se pohybují, díky konzistentní vizuální podobě.

Termín favicon pochází z „oblíbené ikony“. Tato terminologie se datuje do dnů aplikace Internet Explorer, kdy byly stránky označené záložkou „Oblíbené“. Favicon byl poprvé přijat World Wide Web Consortium (W3C) pro HTML 4.0, circa 2000, a začal se důsledněji objevovat v oknech prohlížeče následující rok.

Pomocí favicon můžete rychle listovat mezi kartami prohlížeče, identifikovat záložku nebo najít uloženou aplikaci nebo zkratku v telefonu. Vizuální identifikátor je to, co většina lidí používá k přiřazení těchto odkazů a stránek k pravému tlačítku pro přístup k nim.

Favicons tradičně používal formát souboru .ico, ale to už teď není problém. Ve většině případů bude fungovat jakýkoli typ transparentního souboru; .png je často formát volby.

Technické úvahy

Najednou byly všechny favicony velmi malými 16-pixelovými čtverci. To už neplatí s více obrazovkami sítnice s vysokým rozlišením a zástupci ikon, které je třeba zvážit.

HTML 5 zahrnuje standardy pro favikony s různými velikostmi pro všechny druhy použití, od malých ikon prohlížeče po dokovací stanice počítačů až po ikony domovské obrazovky. Už ani nepotřebujete 16-pixelový čtverec.

Moderní velikosti a použití favicon:

• 32 × 32: Standard pro většinu prohlížečů stolních počítačů (nahrazuje 16 × 16)
• 128 × 128: Obchod Chrome a malá ikona obrazovky s 8 hvězdičkami systému Windows
• 152 × 152: Dotyková ikona iPadu
• 167 × 167: Dotyková ikona sítnice iPad
• 180 × 180: ikona sítnice iPhone
• 192 × 192: Doporučení webové aplikace Google Developer
• 196 × 196: Ikona domovské obrazovky Android

Osvědčené postupy

I když to vypadá jako ikona, která by tak mohla být z hlediska celkového designu nevýznamná, to zdaleka není pravda.

Favicon říká hodně o vaší značce a webových stránkách. Uživatelé je očekávali, pokud je nemohou identifikovat podle jména. Tyto malé prvky přispívají k celkové zkušenosti uživatelů a značky.

Jak tedy můžete co nejlépe využít favicon?

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

• Favicon by se měl připojit k vaší identitě značky, ale je často příliš malý na to, aby obsahoval celé logo. Použijte identifikovatelný prvek, například první písmeno vaší obchodní značky nebo malou značku, kterou používáte ve spojení se značkou.
• Přemýšlejte o tvaru. Prostor pro favicon je ve výchozím nastavení čtvercový. Pokud chcete něco jiného, ​​je nutné průhledné pozadí. Některé systémy mohou také zaokrouhlit hrany, takže je třeba mít na paměti další úvahy.
• Zkontrolujte, zda je soubor malý, ale ne příliš malý. Nahrajte velikost favicon, která se bude správně vykreslovat na většině zařízení, ale nebude zapadat do celého webu.
• Vyhněte se slovům nebo složitým prvkům v návrhu favicon.
• Držte se jednoduché zjednodušené palety barev pro favicon. Je příliš malý na to, aby se zbláznil barvou. To je důvod, proč většina těchto drobných ikon používá o něco více než barvu pozadí a popředí s velkým kontrastem mezi nimi.

Techniky designu

Vzhledem k tomu, že je favicon malý, můžete jej ve Photoshopu naklonit k rozmaru. To není doporučená cesta dlouhověkosti.

Hlavním pravidlem vizuálního designu faviconů je zachování jednoduchého designu. Nechoďte přes palubu s barvou nebo textem nebo prvky značky.

Vytvořte si svůj favicon ve vektorovém nástroji, jako je Illustrator nebo Skica, a poté exportujte návrh do potřebných velikostí. Tím zajistíte, že se při změně rozlišení obrazovky objeví favicon, který obstojí ve zkoušce času. (Vše, co musíte udělat, je znovu exportovat do nové velikosti.)

Hlavním pravidlem vizuálního designu faviconů je zachování jednoduchého designu. Nechoďte přes palubu s barvou nebo textem nebo 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é v rozlišení 16 x 16 pixelů.

Vyhněte se trikům, jako je animace; jen se sem dostanou do cesty.

Považujte to za konstrukční výzvu. Může být docela těžké vytvořit něco tak malého, že je snadno čitelné.

Uložte soubor jako průhledný png. Je to dobrý zvyk, který zajistí, že na favicon neskončí liché okraje nebo okraje. (Nic nevypadá hůře než zubatý bílý okraj obklopující ikonu.)

Používejte zásady dobrého designu. Nikdy nevíte, kdy může být favicon použit pro něco většího, viditelnějšího. Například uložení webové záložky může použít velkou verzi favicon. Totéž platí pro dokování a dokonce i v náhledech výsledků vyhledávače.

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

Až budete mít soubor připravený, můžete jej přidat na svůj web pomocí několika řádků kódu. (Mnoho témat WordPress a tvůrců webových stránek již obsahuje prvek favicon, takže o tomto kroku ani nemusíte přemýšlet.)

Po nahrání souboru obrázku vložte do záhlaví svého webu následující kód a poznamenejte, že „iconpath“ a „iconname“ odkazují na váš konkrétní prvek souboru:

• Indexový soubor HTML:
• WordPress:

Příklady

Níže uvedené příklady zahrnují některé prvky značky s přidruženými favicony. (Nezapomeňte prokliknout a ukázat návrhářům nějakou lásku na jejich stránkách Dribbble.)

Prodigi.team Responsive Logotype

Butterscotch Navržený systém loga

Logo Favicon Display

Šablona Favicon

Možnost TEC Logo 2

Závěr

Co favicon postrádá velikost, oni vymyslí v uživatelském zážitku. Tyto ikony slouží jako navigační nástroje pro návštěvníky vašeho webu a ty, které mají tendenci nechat otevřeno příliš mnoho karet prohlížeče.

Obecně platí, že favicon je rychlý vizuální identifikátor, který spojuje uživatele s vaší digitální přítomností. Postarejte se o to, abyste zajistili nejlepší a přesnější zastoupení vaší značky.