Favicon

Favicon je malá grafická ikonka, ktorá je umiestnená na kartách prehliadača pred názvom webovej stránky. Favicon slúži ako brandový prvok webu a jeho hlavným účelom je pomôcť návštevníkom ľahšie sa orientovať v prehliadači a rýchlo vizuálne priradiť každú otvorenú kartu prehliadača k určitému webu.

Zobrazenie faviconov v Google prehliadači
Zdroj: Vlastný screenshot

Termín Favicon pochádza z anglického slovného spojenia Favorite Icon – “obľúbená ikona”. Zvyčajne zobrazuje prvé písmeno názvu značky, jej logo alebo obrázok súvisiaci s témou webu alebo identitou značky. Netreba si ale mýliť pojmy favicon a logo – aj keď oba obrázky predstavujú identitu značky, sú to odlišné veci. Favicony sú príliš malé a nemajú dostatok miesta pre vizuály a slová používané vo väčšine log, preto niektoré značky používajú menšiu verziu svojho loga ako favicon, no nie vždy to funguje a niekedy to nevyzerá dobre.

Favicony je možné vidieť na rôznych miestach a v rôznych zariadeniach: 

  1. Na otvorených kartách prehliadača pred názvom webu
  2. V histórii prehliadača/vyhľadávania
  3. Na paneli so záložkami
  4. V rozbaľovacom paneli záložiek, kde si ukladáte všetky zaujímavé stránky
  5. Vo výsledkoch vyhľadávania pre počítače a mobilné zariadenia
  6. Ako ikony aplikácií pre smartfóny

Prečo je potrebné používať favicon?

Hlavným účelom faviconu je zvýrazniť a zviditeľniť váš brand alebo webovú stránku medzi kartami prehliadača. Ak nepoužívate favicon, tak sa na karte automaticky zobrazí obrázok čiernobielej zemegule, čo neumožňuje rozpoznávanie brandu a nevyzerá dôveryhodne.

Zobrazenie webu bez faviconu
Zdroj: Vlastný screenshot

Okrem toho je favicon príležitosťou pre firmy, aby ich značka bola rýchlejšie zapamätateľná pre zákazníkov. Obrázok priťahuje pozornosť a je automaticky spájaný so značkou. Neskôr, keď používatelia uvidia rovnakú ikonu vo výsledkoch vyhľadávania, reklamách alebo svojich záložkách, pripomenú im značku, čo môže mať potenciálne merateľný vplyv na miery prekliknutia.

Takým spôsobom favicon môže hrať rozhodujúcu úlohu v správaní zákazníkov a bude podporovať trvalú identitu značky v mysli spotrebiteľov.

Tip: Ak chcete aby vaše textové reklamy vo vyhľadávaní vyzerali užívateľsky atraktívnejšie pomocou faviconu, spísali sme pre vás článok s podrobnými pokynmi na implementáciu faviconu v PPC.

Formát a veľkosti faviconu

V minulosti obrázky pre favicon museli byť iba vo formáte .ico. Tento formát umožňuje určiť niekoľko veľkostí ikon s rôznou bitovou hodnotou. Nevýhodou formátu je, že prehliadače nevedia vždy vybrať správnu veľkosť obrázka a v dôsledku toho sa favicon zobrazuje v nízkom rozlíšení.

V súčasnosti medzi najpopulárnejšie formáty súborov pre favicony patria .png a .svg. Väčšina moderných platforiem a operačných systémov podporuje formát .png (okrem Internet Explorer). Okrem iného, na vytvorenie súboru .png nepotrebujete žiadne špeciálne nástroje, vďaka čomu je veľmi užívateľsky prívetivý. Čo sa týka formátu .svg,  podporujú ho iba Opera, Chrome, Firefox, MacOS Safari. Ikony v .svg sú škálované bez straty kvality.

Čo sa týka formátov .jpeg, .gif  a .apng – tieto formáty majú problémy so zobrazením kvôli nedostatku širokej podpory prehliadačov. Neodporúča sa používať pohyblivé obrázky pre favicony aj kvôli zhoršeniu používateľskej skusenosti, keďže animácie rozptyľujú pozornosť návštevníka pri prezeraní stránky a otravujú užívateľa pri zobrazení medzi kartami prehliadača.

Pre správne zobrazovanie faviconu je potrebné ho používať v správnej veľkosti. Vo všeobecnosti sa odporúča veľkosť 16x16px, pretože sa dá použiť vo všetkých prehliadačoch. Ak by ste chceli vytvoriť favicon pre každé možné použitie a splniť požiadavky platforiem na optimálne rozmery, nižšie sú uvedené najpopulárnejšie:  

  • 16x16px: Na všeobecné použitie vo všetkých prehliadačoch (pre zobrazovanie faviconu v paneli s webovou adresou, na kartách alebo zobrazeniach záložiek)
  • 24x24px: Pripnutý web v Internet Explorer 9
  • 32x32px: Stránka Nová karta v Internet Exploreri, tlačidlo na paneli úloh v systéme Windows 7+ a bočný panel “Prečítať neskôr” Safari
  • 57x57px: Štandardná domovská obrazovka iOS (iPod Touch, iPhone prvej generácie až 3G)
  • 72x72px: Ikona domovskej obrazovky iPadu
  • 96x96px: Favicon používaný platformou Google TV
  • 114x114px: Ikona domovskej obrazovky iPhone 4+
  • 128x128px: Internetový obchod Chrome
  • 195x195px: Opera Speed ​​​​Dial

Záver

Favicon je neoddeliteľnou súčasťou identity značky a technického standardu každého moderného webu. Netreba ho vnímať len ako malý obrázok, ktorý “ozdobí“ vašu stránku. Je dôležitou súčasťou identifikácie webu, brandingu a užívateľského komfortu. 

Ak chcete aby váš web vyzeral dôveryhodne, určite nesmiete zabudnúť na tento malý, ale veľmi dôležitý detail, ktorý môže ovplyvniť vnímanie vašej stránky a značky, ich rozpoznanie a dokonca aj mieru prekliknutia nielen v organike, ale aj v platenom vyhľadávaní.

Páčila sa vám táto definícia? Zdieľajte ju s priateľmi