Favicon, alebo ikona webovej stránky, je malý, ale dôležitý prvok, ktorý prispieva k identite vašej značky a zlepšuje používateľskú skúsenosť. Často býva zamieňaný s logom, no favicon je ikona, ktorá sa spája s konkrétnou webovou stránkou.
Favicon (tak sa píše po anglicky) si však zasluhuje trošku viac vysvetlenia a pozornosti. Je za ním viac než tá ikonka hore na karte prehliadača.
Favicon či favicona (z anglického „favorite icon“ alebo obľúbená ikona) je ikona stránky, ktorá bola pôvodne určená pre lepšiu prehľadnosť tzv. obľúbených záložiek v prehliadači.
V tomto článku sa pozrieme na to, čo favicon je, prečo je dôležitý a ako ho vytvoriť a implementovať na vašu webovú stránku.
26 | AKO VYTVORIŤ HTML FAVICON | 2023 | Kompletný kurz HTML a CSS pre začiatočníkov
Čo je Favicon?
Favicon je malá ikona s rozmermi 16 x 16 pixelov, ktorá sa zobrazuje na kartách prehliadača, v histórii vyhľadávania a v zoznamoch záložiek. Jej hlavným účelom je pomôcť návštevníkom nájsť vašu stránku rýchlejšie a jednoduchšie, napríklad keď majú otvorených viacero kariet v prehliadači.
Favicony sú malé súbory s ikonami rozmerov 16 × 16 pixelov (32 x 32, alebo iné), ktoré sa zobrazujú na rôznych miestach - podľa zariadenia i prehliadača.
Niekde ich nájdete vedľa URL adresy webu v políčku s adresou, inde na karte pred názvom web-stránok v prehľade otvorených kariet. Taktiež ich vídate v zozname záložiek, v prehľade histórie, na paneli záložiek, na otvorených kartách v smartfónoch, tiež môžu vystupovať ako ikony aplikácií ploche telefónov,… Vo všetkých prípadoch ich vídame na exponovaných miestach s cieľom uľahčiť používateľovi rýchlu identifikáciu medzi ostatnými webmi.
Všimli ste si, že väčšina kariet vášho prehliadača má na boku svoj vlastný rozlišovací obrázok?
Veľa ľudí nevie úplne presne, čo je favicon a často si ho zamieňa s logom.
Logo je symbol alebo emblém, ktorý funguje ako ochranná známka, zatiaľ čo favicon je vo webovom dizajne ikona, ktorá sa spája s konkrétnou webovou stránkou.
História Favicon
Za vznikom faviconu stojí Microsoft - firma, ktorá priniesla do sveta počítačov okrem operačného systému DOS a Windows aj prehliadač Internet Explorer.
Zaujímavosť: Favicon bol po prvýkrát podporený v roku 1999 v prehliadači Internet Explorer 5 od Microsoftu. Pôvodne bol favicon súborom s názvom favicon.ico a bol umiestnený v koreňovom adresári webovej stránky.
Prečo je Favicon Dôležitý?
Aj keď favicon nemá priamy vplyv na SEO, zohráva dôležitú úlohu v rámci brandingu a marketingu.
Favicon je vizuálnou reprezentáciou vašej webstránky a tak umožňuje používateľom identifikovať a stotožniť sa s vašou značkou.
A čím viditeľnejší váš web je, tým väčšiu šancu máte, že naň používatelia kliknú a zapamätajú si, kto ste.
Favicon je totiž nepriamo zodpovedný za vašu optimalizáciu pre vyhľadávače, pretože je dôležitým nástrojom na zlepšenie vášho hodnotenia vo vyhľadávačoch.
User-friendly webstránka nepriamo zlepšuje vaše hodnotenie vo vyhľadávačoch.
Viditeľná ikona faviconu na kartách prehliadača, v záložkách, v histórii vyhľadávanie a podobne pomáha vašim používateľom a návštevníkom šetriť čas tým, že im umožňuje bez problémov identifikovať a prehliadať vašu webstránku, čím sa zvyšuje pravdepodobnosť interakcie používateľa s vašim webom.
Okrem toho:
- Zlepšuje používateľskú skúsenosť: Uľahčuje navigáciu a orientáciu na webe.
- Posilňuje branding: Pomáha budovať povedomie o značke.
- Zvyšuje dôveryhodnosť: Profesionálny vzhľad webu zvyšuje dôveru návštevníkov.
Ako Vytvoriť Efektívny Favicon
Pri vytváraní favicou pre vašu webstránku je potrebné brať do úvahy niekoľko vecí. Aj keď je favicon malý, má a mal by mať veľký vplyv. Pretože práve podľa faviconu budú používatelia identifikovať vašu značku.
Favicon nemôže byť vždy len menšou verziou loga. Najlepšie favicony sú tie najjednoduchšie.
Vzhľadom na malú veľkosť a jednoduchosť použitých tvarov je dôležitým faktorom práve farba. Favicon by mal upútať pozornosť a vynikať spomedzi potenciálnych konkurentov.
Vyhnite sa však príliš veľa detailom, tie môžu spôsobiť, že favicon bude vyzerať neprehľadne a chaoticky.
Ak je vlastné logo jednoduché, môže byť favicon len zmenšeninou loga (napr. IT Learning, OTP Banka, Škoda, VW, PayPal, Hewlett-Packard atď.).
Častejšie však býva vytvorený z jedného či dvoch písmen názvu firmy (napr. Amazon, Alza, dolu v prehľade Nu’Clinic), alebo grafickou značkou korešpondujúcou s činnosťou subjektu (dolu v prehľade napr. FS Úsmev, Aha).
Tu je niekoľko tipov:
- Jednoduchosť: Zvoľte jednoduchý dizajn, ktorý je ľahko rozpoznateľný aj v malých rozmeroch.
- Relevantnosť: Favicon by mal súvisieť s vašou značkou alebo obsahom webu.
- Farby: Používajte farby, ktoré sú v súlade s vašou značkou.
- Formát: Používajte formáty PNG alebo ICO.
Formáty Faviconov
V minulosti musel byť favicon vo formáte Windows ICO.
- Windows ICO: Súbory ICO sa zvyknú využívať najčastejšie, pretože veľkosť súboru je menšia a je podporovaná vo všetkých hlavných prehliadačoch.
- PNG: Formát PNG je praktickým riešením, pretože nepotrebujete žiadne špeciálne nástroje. Poskytuje najmenšiu možnú veľkosť súboru.
Ako Implementovať Favicon na Webovú Stránku
Ikonu favicon.ico vie väčšina dnešných služieb a prehliadačov automaticky detekovať zo zdrojovej zložky stránok.
Ikonu preto stačí nahrať cez FTP rozhranie do root zložky. Využiť na to môžete prístupové údaje vášho webhostingu a správcu súborov, napr.
Tip: Ikona sa dá v niektorých šablónach nahrať priamo v nastavení.
Existujú dva hlavné spôsoby, ako pridať favicon na vašu webovú stránku:
- Pridanie do koreňového adresára: Uložte súbor favicon.ico do koreňového adresára vašej webovej stránky.
- Pridanie kódu do hlavičky stránky: Vložte nasledujúci kód do hlavičky () vašej webovej stránky:
<link rel="icon" href="favicon.ico" type="image/x-icon">
V prípade, že s WordPressom začínate, preskočte generovanie a vkladanie favicon.ico a svoj otestovaný favicon vo formáte .jpg alebo .png jednoducho vložte na stránku v menu WordPressu v časti Vzhľad > Prispôsobenie > Identita stránky (v nej dáva väčšina tém možnosť upraviť názov stránky, slogan, vložiť logo, a tiež vložiť favicon).
Niektoré témy, napr. populárna Sydney, túto sekciu nazývajú Názov stránky / slogan / logo a pod.
Nástroje na Tvorbu Faviconov
Pomocnú ruku vám podajú aj online generátory, ak nechcete hľadať grafika. Ideálnym podkladom pre tvorbu ikony je logo vo formáte PNG alebo JPEG.
Každá dobrá firemná stránka, e-shop či blog by nejaké logo mala mať. Logo si ľudia, ako dôležitý prvok firemnej identity, zväčša dobre pamätajú.
Niektoré služby dokážu generovať celú sériu rôznych veľkostí i keď základná verzia ikony má len 16×16 pixelov. Stretnúť sa s nimi môžeme napr. pri mobilných aplikáciách.
Ak sa rozhodnete odlíšiť, zrealizovať všetko potrebné okolo faviconu nie je ťažké. Chce to trochu času, trochu zručností s niektorým grafickým programom a know-how. Také ľahké to je.
Ak ste na základe tohoto know-how favicon vymysleli a máte ho už v grafickom programe pripravený, treba ho uložiť v správnom formáte.
Tu je niekoľko užitočných nástrojov na tvorbu faviconov:
- Real Favicon Generator: Nástroj na otestovanie vzhľadu faviconu pre rôzne zariadenia a prehliadače.
- Favicon checker: Nástrojom Favicon checker môžete na stránke Real Favicon Generator otestovať vzhľad svojho faviconu pre tmavé i svetlé pozadie kariet prehliadačov a pre rôzne zariadenia.Umožňuje vám tiež upraviť pozadie faviconu podľa potreby pomocou jednoduchého editora. Fantázia!
- Favicon.io: Generátor faviconov z textu alebo obrázkov.
- Favicon.ico & App Icon Generator: Nástroj na generovanie faviconov pre rôzne platformy.
- Favicon.ico & App Icon Generator: Všetky tri stránky umožňujú tiež vygenerovať súbor .ico použiteľný pre všetky prehľadávače a tiež skupinu faviconov pre rôzne platformy.
Testovanie Faviconu
Pred nasadením do ostrej prevádzky svoj favicon ešte otestujte. Aby ste neboli sklamaný z výsledkov farebných kontrastov, ktoré vznikajú na rôznom farebnom pozadí.
Nástrojom Favicon checker môžete na stránke Real Favicon Generator otestovať vzhľad svojho faviconu pre tmavé i svetlé pozadie kariet prehliadačov a pre rôzne zariadenia.
Záver
Favicon je malý, ale dôležitý prvok webovej stránky, ktorý prispieva k brandingu a zlepšuje používateľskú skúsenosť. Vytvorenie efektívneho faviconu a jeho správna implementácia môže mať pozitívny vplyv na vnímanie vašej značky a návštevnosť webu.
Favicony sú ako malé drahokamy. Ako správne drahokamy by mali byť aj na pohľad pekné a lákavé. Farbou, tvarom, štruktúrou, veľkosťou,… Keď ich vhodne venujete v správnej chvíli žene alebo mužovi, získate si možno aj ich srdce.
Hoci sú favicony nedocenené, majú význam. Ako drahokamy, ako vizuálne indikátory vášho záujmu o vzťah. Nielenže pomáhajú návštevníkom ľahšie identifikovať vaše stránky v ich prehliadači, ale tiež odovzdávajú emóciu. Ako sa na drahokamy patrí - tých pekných a cenných nebýva veľa, preto ich ľudia, ktorým sú určené, vedia oceniť. Aj milovať.