Čo je favicon a prečo je dôležitý pre váš web?

Favicon (skratka z anglického „favorite icon“, teda obľúbená ikona) je malý štvorcový obrázok, ktorý reprezentuje web na kartách prehliadača, v záložkách, v zoznamoch histórie, vo výsledkoch vyhľadávania Google, na domovských obrazovkách telefónov a v nainštalovaných webových aplikáciách. Je dôležitý, pretože dáva vášmu webu rozpoznateľnú tvár na prvý pohľad, uľahčuje jeho nájdenie medzi mnohými otvorenými kartami, signalizuje, že web je profesionálny a dôveryhodný, a dnes sa zobrazuje aj vedľa názvu vášho webu vo výsledkoch Google. Bez neho návštevníci vidia všeobecnú ikonu zemegule alebo prázdnej stránky a váš server zapisuje do logov chyby 404. Kompletnú sadu faviconov môžete zadarmo vytvoriť pomocou generátora faviconov MakeFav.

Čo je favicon?

Favicon je malá značková grafika, zvyčajne zjednodušená verzia loga alebo jedno písmeno či symbol, ktorú si prehliadače a iný softvér načítajú z vášho webu a zobrazujú všade tam, kde potrebujú kompaktný vizuálny identifikátor. V desktopovom prehliadači sa zvyčajne vykresľuje v rozmeroch 16 × 16 CSS pixelov, samotný súbor by však mal byť väčší, aby zostal ostrý aj na obrazovkách s vysokou hustotou pixelov.

Technicky je favicon len obrázkový súbor, na ktorý odkazuje váš HTML kód (alebo sa nachádza na predvolenom mieste) a ktorý používateľské agenty sťahujú oddelene od obsahu stránky. Dnes už „favicon“ len zriedka tvorí jediný súbor. Moderný web zvyčajne obsahuje niekoľko verzií tej istej ikony, aby prehliadače, vyhľadávače, iOS aj Android dostali formát a veľkosť, ktoré im vyhovujú.

Stručná história faviconu

Favicon sa objavil v marci 1999, keď Microsoft vydal Internet Explorer 5. Prehliadač umožňoval ukladať stránky do zoznamu „Obľúbené“ a zároveň hľadal v koreňovom adresári webu malý súbor ikony s názvom favicon.ico, ktorý zobrazil vedľa každej uloženej položky. Myšlienka bola jednoduchá: ak web poskytol /favicon.ico, ikona sa zobrazila vedľa záložky.

Ostatné prehliadače túto funkciu čoskoro prevzali a prehliadanie na kartách ju urobilo oveľa užitočnejšou. Keď sa karty stali hlavným spôsobom navigácie, favicon sa zmenil z ozdoby záložiek na základnú navigačnú pomôcku. Postupom rokov sa prístup vyvíjal:

• Začiatok 21. storočia: prvok <link rel="icon"> umožnil webom odkazovať na ikonu na ľubovoľnej adrese URL namiesto len v koreňovom adresári a prehliadače iné ako IE začali akceptovať súbory PNG a GIF.
• 2010 – 2019: Apple predstavil apple-touch-icon pre domovské obrazovky iOS a Android a Windows pridali vlastné konvencie, ako sú ikony v manifeste a obrázky dlaždíc.
• Dnes: favicony vo formáte SVG, manifesty webových aplikácií, ikony reagujúce na tmavý režim a požiadavky Google na favicony vo výsledkoch vyhľadávania z neho urobili malú, ale skutočnú súčasť technického nastavenia webu.

Kde sa favicony zobrazujú dnes

Váš favicon sa zobrazuje na oveľa viac miestach než len na karte prehliadača. Tie hlavné sú:

• Karty prehliadača: najviditeľnejšie miesto, kde je ikona často jediné, čo vidíte, keď je otvorených veľa kariet.
• Záložky a obľúbené položky: ikona sa nachádza vedľa názvu stránky v paneloch záložiek a v ponukách.
• História a najnavštevovanejšie stránky: prehliadače zobrazujú favicony v zoznamoch histórie a na stránkach novej karty.
• Výsledky vyhľadávania Google: v mobilnej aj desktopovej verzii Google zobrazuje favicon webu vedľa názvu webu a adresy URL.
• Domovské obrazovky: keď návštevník pridá váš web na domovskú obrazovku v iOS alebo Androide, ikona touch alebo ikona z manifestu sa stane odkazom v štýle aplikácie.
• Nainštalované PWA: progresívna webová aplikácia používa ikony zo svojho manifestu webovej aplikácie ako ikonu spúšťača, na úvodnej obrazovke a v prepínači úloh.
• Dlaždice Windows a pripnuté weby: staršie verzie Windows a Edge používali obrázky dlaždíc definované pre pripnuté weby; moderné verzie väčšinou využívajú vaše štandardné ikony.
• Náhľady odkazov v niektorých aplikáciách: niektoré komunikačné a produktivitné nástroje (známym príkladom je Slack) zobrazujú favicon webu vedľa rozbaleného odkazu. Väčšina náhľadov sa opiera hlavne o obrázky Open Graph, ale favicon často dodáva malú značku brandu.

Prečo je favicon pre váš web dôležitý

Rozpoznateľnosť značky

Ľudia rozpoznajú farby a tvary rýchlejšie, než prečítajú text. Jednotná ikona opakujúca sa na kartách, v záložkách a vo výsledkoch vyhľadávania buduje povedomie pri každom jej zobrazení, čo je bezplatná prezentácia značky pri každej návšteve.

Dôvera a dôveryhodnosť

Chýbajúci favicon spôsobuje, že web pôsobí nedokončene. Čistá, správne vykreslená ikona je malým signálom, že sa niekto stará o detaily, čo podporuje dojem, že web je legitímny. Nie je to bezpečnostná funkcia a phishingové weby môžu ikony kopírovať, ale prázdna predvolená ikona firme len zriedka pomôže pôsobiť etablovane.

Miera prekliku vo výsledkoch vyhľadávania

Keďže Google zobrazuje favicon vedľa vášho výsledku, stáva sa súčasťou toho, ako váš výsledok vyzerá v porovnaní s konkurenciou. Google nezverejňuje žiadny vplyv faviconov na poradie a nemali by ste očakávať zlepšenie pozícií. Prínos spočíva vo vizuálnej rozpoznateľnosti: používatelia, ktorí poznajú vašu ikonu, si váš výsledok pravdepodobnejšie všimnú a vyberú, najmä na mobiloch, kde sú výsledky kompaktné.

Použiteľnosť pri mnohých otvorených kartách

Keď má prehliadač otvorených dvadsať kariet, názvy sa skrátia na nič a zostane len favicon. Výrazná ikona umožní ľuďom okamžite nájsť vašu kartu a vrátiť sa k nej namiesto otvárania duplikátu alebo zabudnutia na ňu.

Profesionálny dojem

Dobre navrhnutý favicon ukazuje rovnakú pozornosť venovanú detailom ako zvyšok vášho webu. Pre produktové stránky, dokumentáciu, blogy aj webové aplikácie je to jeden z najlacnejších spôsobov, ako pridať na kvalite.

Prístupnosť pri hľadaní kariet

Ikony pomáhajú používateľom, ktorí skenujú vizuálne namiesto čítania, vrátane ľudí s dyslexiou alebo kognitívnymi odlišnosťami, a každému, kto rýchlo prepína medzi úlohami. Kontrastnú ikonu s jednoduchým tvarom je ľahšie rozpoznať. Pamätajte však, že favicon je doplnok: nenahrádza jasný názov stránky, na ktorý sa spoliehajú čítačky obrazovky a asistenčné technológie.

Čo sa stane, ak favicon nemáte

Prehliadače automaticky žiadajú /favicon.ico z koreňa vašej domény, aj keď váš HTML kód žiadny nespomína. Ak súbor neexistuje, stane sa niekoľko vecí:

• Všeobecná ikona: návštevníci vidia na karte a v záložkách predvolenú ikonu zemegule, dokumentu alebo prázdnu ikonu, ktorá pôsobí anonymne.
• Chyby 404 vo vašich logoch: každý prehliadač, ktorý si súbor vyžiada, vytvorí neúspešnú požiadavku. Na rušných weboch to pridáva šum do prístupových logov, monitorovania chýb a analytiky a môže to zakryť skutočné problémy.
• Žiadna ikona vo výsledkoch Google: bez platného favicon súboru dostupného pre prehľadávanie Google zobrazí vedľa vášho výsledku svoj predvolený zástupný symbol.
• Zbytočné požiadavky: prehliadače to môžu skúšať opakovane, čím na váš server pridávajú malú, ale zbytočnú záťaž.

Aj veľmi jednoduchá ikona je lepšia ako žiadna, pretože odstráni chyby 404 a dá používateľom niečo rozpoznateľné.

Formáty faviconov vysvetlené

Žiadny jednotlivý formát nepokrýva všetky platformy, preto väčšina webov používa malú sadu súborov.

Staršie obrázky dlaždíc Windows (konfigurované cez browserconfig.xml) boli potrebné pre Internet Explorer 11 a starý Edge. Dnes sú len zriedka nevyhnutné, pokiaľ nemusíte podporovať tieto prostredia.

Pokyny Google k faviconom vo výsledkoch vyhľadávania

Ak chcete, aby sa vaša ikona zobrazovala vo Vyhľadávaní Google, dodržiavajte zverejnené požiadavky Google:

• Veľkosť: obrázok musí byť štvorcový (1:1) a jeho rozmery musia byť násobkom 48 pixelov, napríklad 48x48, 96x96 alebo 144x144. Google ho potom na zobrazenie zmenší na 16x16. Minimálna podporovaná veľkosť je 8x8, odporúča sa však 48x48 alebo viac.
• Formáty: funguje akýkoľvek formát podporovaný prehliadačmi vrátane ICO, PNG a SVG.
• Stabilná adresa URL: adresu URL faviconu často nemeňte. Stabilná adresa pomáha Google udržiavať vašu ikonu aktuálnu.
• Prehľadávateľnosť: súbor faviconu aj vaša domovská stránka musia byť dostupné pre Googlebot. Neblokujte ich v robots.txt ani za prihlásením.
• Jedna deklarácia na web: ikona je viazaná na domovskú stránku webu, preto umiestnite značku <link> do hlavičky domovskej stránky.
• Reprezentatívna a vhodná: ikona by mala odrážať vašu značku a Google môže nahradiť tú, ktorá je urážlivá alebo zavádzajúca, svojou predvolenou.

Po zverejnení alebo zmene faviconu môže Google trvať dni až týždne, kým ho znova prehľadá a aktualizuje, preto neočakávajte okamžitú zmenu.

Ako rýchlo vytvoriť favicon pomocou MakeFav

Nepotrebujete dizajnérsky softvér ani príkazový riadok. Generátor MakeFav premení jeden zdrojový obrázok na súbory popísané vyššie.

1. Pripravte si grafiku. Použite štvorcové logo alebo symbol s rozmerom 512 × 512 px alebo väčší. Najlepšie fungujú jednoduché tvary, pretože ikona sa bude zobrazovať v 16 px.
2. Nahrajte ju na domovskej stránke MakeFav alebo otvorte editor a pred exportom upravte obrázok, pozadie a odsadenie.
3. Pozrite si náhľad výsledku v malých veľkostiach a na svetlom aj tmavom pozadí, aby ste sa uistili, že zostáva čitateľný.
4. Stiahnite balík. Obsahuje ICO, veľkosti PNG, Apple touch icon, ikony manifestu a HTML úryvok na vloženie.
5. Nahrajte súbory do koreňového adresára vášho webu, aby boli dostupné na cestách ako /favicon.ico.
6. Pridajte HTML do <head> každej stránky alebo do spoločného layoutu či šablóny.
7. Overte pomocou kontroly faviconov, potom vymažte vyrovnávaciu pamäť prehliadača a obnovte stránku, aby ste videli novú ikonu.

Príklad HTML úryvku

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Atribút sizes="48x48" pri odkaze na ICO pomáha prehliadačom uprednostniť SVG, ak ho podporujú, a zároveň ponechať ICO ako záložnú možnosť. PNG s veľkosťou 96 px spĺňa pravidlo Google o násobku 48.

Príklad manifestu webovej aplikácie

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Ak pracujete s build pipeline alebo chcete tvorbu ikon automatizovať, pozrite si zdroje pre vývojárov.

Tipy na dizajn funkčného faviconu

• Nech je jednoduchý. Jeden tvar, jedno písmeno alebo výrazné monogram je lepšie než detailné logo, ktoré sa v 16 px zmení na kašu.
• Používajte silný kontrast. Uistite sa, že ikona je viditeľná v svetlej aj tmavej téme prehliadača. Pomáha farebná dlaždica na pozadí.
• Vyhnite sa textu. Jedno iniciálne písmeno je v poriadku; slová sú v tejto veľkosti nečitateľné.
• Nechajte malé odsadenie pri maskovateľných ikonách a ikonách so zaoblenými rohmi, aby sa nič dôležité neorezalo.
• Buďte konzistentní s logom a farbami značky, aby favicon posilňoval rozpoznateľnosť.
• Testujte na skutočných zariadeniach a skontrolujte, ako vyzerá na karte, v záložke a vo výsledku Google.

Bežné problémy s faviconmi

Ak sa vaša ikona nezobrazuje, zvyčajnými príčinami sú ukladanie do vyrovnávacej pamäte, nesprávne cesty a blokované súbory. Prehliadače ukladajú favicony agresívne do vyrovnávacej pamäte, takže na zobrazenie aktualizácií často stačí tvrdé obnovenie alebo nové súkromné okno. Skontrolujte, či adresa URL súboru vracia stav 200 a správny typ obsahu a či sa značka <link> nachádza v <head>. Pre vyhľadávanie sa uistite, že robots.txt neblokuje ikonu ani domovskú stránku. Kontrola MakeFav vám môže pomôcť tieto problémy rýchlo odhaliť.

Často kladené otázky

Čo znamená skratka favicon?

Favicon je skratka z anglického „favorite icon“ (obľúbená ikona). Názov pochádza z Internet Exploreru 5, ktorý v roku 1999 prvýkrát použil malý súbor ikony na ozdobenie položiek v zozname Obľúbené v prehliadači. Pojem sa udržal, hoci sa ikona dnes zobrazuje na mnohých ďalších miestach.

Pomáha favicon SEO?

Favicon nie je priamy faktor hodnotenia. Zobrazuje sa však vedľa názvu vášho webu vo výsledkoch Google v mobile aj na desktope, takže môže zlepšiť rozpoznateľnosť značky a vizuálnu atraktivitu vášho výsledku, čo môže nepriamo podporiť kliknutia. Dodržiavanie pokynov Google je to, vďaka čomu sa ikona môže zobraziť.

Akú veľkosť by mal mať favicon?

Pre Vyhľadávanie Google použite štvorcový obrázok, ktorého rozmery sú násobkom 48 pixelov, napríklad 48x48 alebo 96x96. Pre širšie pokrytie poskytnite aj súbor ICO, Apple touch icon 180x180 a ikony manifestu 192x192 a 512x512. SVG je dobrým doplnkom z hľadiska škálovateľnosti.

Potrebujem favicon.ico, ak používam PNG alebo SVG?

Stále je to dobrý nápad. Prehliadače a niektoré nástroje si predvolene vyžiadajú /favicon.ico a staršie programy sa naň spoliehajú. Ponechanie súboru ICO v koreňovom adresári webu zabraňuje chybám 404 a poskytuje bezpečnú zálohu, keď SVG alebo PNG nie je podporované.

Prečo sa môj favicon neaktualizuje?

Prehliadače a vyhľadávače ukladajú favicony do vyrovnávacej pamäte na dlhý čas. Skúste tvrdé obnovenie, súkromné okno alebo vymazanie vyrovnávacej pamäte. Uistite sa, že cesta k súboru je správna a nový súbor sa poskytuje. Vo Vyhľadávaní Google môže opätovné prehľadanie a aktualizácia zmenenej ikony trvať dni alebo týždne.