Čo je Favicon?
Favicon je malá ikona s rozmermi 16 × 16 pixelov, ktorá slúži ako branding vášho webu. Jeho hlavným účelom je pomôcť návštevníkom ľahšie nájsť vašu stránku, keď majú otvorených viacero kariet.
Vďaka svojej malej veľkosti fungujú ikony favicon najlepšie ako jednoduché obrázky alebo text s jedným až tromi znakmi. Favicony by sa nemali zamieňať s logami, ale niekedy sú rovnaké. Kvôli svojej malej veľkosti a rozlíšeniu môže byť potrebné, aby favicon mala ešte menšiu veľkosť alebo bola súčasťou pôvodného loga spoločnosti.
Kde môžete vidieť favicon?
Favicony sa nachádzajú vedľa čohokoľvek, čo identifikuje váš web. Patria sem záložky, karty, aplikácie panela s nástrojmi, výsledky histórie a vyhľadávacie panely. Pozrite si príklady obrázkov nižšie:
- Odporúčania vyhľadávacieho panela
Prečo sú obľúbené ikony dôležité?
Vytvorenie favicon je malý, ale dôležitý krok k nastaveniu firemnej webovej stránky. Dodáva legitímnosť vašej stránky a pomáha posilniť vašu online značku, ako aj dôveru potenciálnych spotrebiteľov.
Sú okamžitou vizuálnou značkou pre webovú stránku, ktorá umožňuje jednoduchú a rýchlu identifikáciu pre používateľov webu, ako aj zjednocuje všetky rôzne komponenty prehliadača do dobre značkového zážitku z prehliadania.
Sú obľúbené ikony dôležité pre SEO?
Favicony nie sú priamo zodpovedné za vašu optimalizáciu pre vyhľadávače, sú však zodpovedné nepriamo a sú dôležitým nástrojom na zlepšenie vášho hodnotenia vo vyhľadávačoch. Nižšie uvádzame niekoľko príkladov toho, ako môže favicon pomôcť vášmu SEO:
Používateľsky prívetivé webové stránky vedú k zvýšenému používaniu
Užívateľsky prívetivá webstránka nepriamo zlepšuje pozíciu vášho vyhľadávača. Viditeľná ikona favicon na kartách prehliadača, záložkách, archívoch histórie atď. pomáha vašim používateľom šetriť čas tým, že im umožňuje bez problémov identifikovať a prehliadať vašu webovú stránku, čím sa zvyšuje pravdepodobnosť interakcie používateľa s vašou webovou stránkou.
Tým sa zlepší čas strávený a interakcie s vašou webovou stránkou, čo znamená, že viac očí bude na vašej webovej stránke dlhšie, čím sa zlepší vaše SEO.
Záložky
Favicon vám dáva výhodu oproti webovým stránkam, ktoré ju nepoužívajú. Prehliadač Chrome od spoločnosti Google odpočítava určité signály hodnotenia vyhľadávania pre webové stránky uložené na webe ako záložky. Ak na svojom webe nemáte favicon, môžete prísť o možnosť, že budete v prehliadači Chrome uložený ako záložka a nepriamo tak prídete o jeden z mnohých signálov hodnotenia vyhľadávania.
Pridanie do záložiek a následné vizuálne vyčnievanie v tomto zozname záložiek vďaka vašej favicon dáva vašej webovej lokalite lepšiu pozíciu na to, aby ju používatelia znova navštívili. To všetko zvyšuje návštevnosť vášho webu a SEO.
Značka a viditeľnosť
Favicon je vizuálna reprezentácia vašej webovej stránky a firmy, takže používatelia sa s vašou značkou stotožnia na základe favicon, ktorý používate. SEO je o brandingu a marketingu a čím viditeľnejší je váš web, tým viac používateľov pravdepodobne klikne na váš web a zapamätá si, kto ste.
Ako vytvoriť dobrý favicon
Keď je potrebné vziať do úvahy veľa vecí vytvorenie a navrhnutie favicon pre váš web. Aj keď je malý a jednoduchý, môže (a mal by) mať veľký vplyv. Je dôležité uistiť sa, že vytvoríte najlepšiu možnú ikonu favicon, pretože podľa nej budú používatelia identifikovať vašu značku. Tu je niekoľko vecí, ktoré treba mať na pamäti pri vytváraní vašej favicon:
Využívajte priestor rozumne
Favicon niekedy nemôže byť jednoducho menšou verziou loga vašej spoločnosti. Je potrebné zvážiť celkovú veľkosť vašej favicon. Mali by ste sa držať 16px, pretože to je prijateľné pre všetky prehliadače (ďalšie príklady však nájdete nižšie).
Jednoduchosť
Aj keď je favicon vizuálnou tvárou vašej značky, chcete, aby bol váš dizajn čo najjednoduchší. Najlepšie favicony sú najjednoduchšie. Vzhľadom na malú veľkosť favicon a jednoduchosť použitých tvarov sú farby životne dôležité, aby upútali oko potenciálnych spotrebiteľov a vynikli. Príliš veľa detailov spôsobí, že favicon bude vyzerať neprehľadne a chaoticky.
Identita značky
Vaša favicon je vizuálna ikona vašej značky, takže by mala používateľom vizuálne povedať, čo vaša firma predstavuje. To im okamžite povie o čom je vaša značka a čo robí.
Aj keď je to veľmi ťažké urobiť s takým malým a jednoduchým dizajnom, skúste byť kreatívni. Nižšie uvedené príklady demonštrujú silu malých, kreatívnych favicon; na prvý pohľad môžete okamžite zistiť, o čom značka je a čo predstavuje:
Skrátenie
Nájdenie dokonalého vizuálu nemusí byť praktické pre to, čo robí vaša firma. Bežným riešením je použiť prvé písmeno obchodného mena alebo skratky. Môžete sa tiež rozhodnúť použiť skratku názvu vašej spoločnosti. Pohrajte sa s rôznymi variáciami a vyberte si tú, ktorá vám najlepšie vyhovuje:
Koordinácia farieb
Do hry by mal vstúpiť aj výber farby. Kontrastné farby uľahčujú oku rozpoznávanie tvarov a ohniska vašej favicon. Vzhľadom na malú povahu favicon musíte jasne reprezentovať vašu spoločnosť pre používateľa a použitie farieb môže byť životne dôležité. Majte na pamäti, že všetky prehliadače sa mierne líšia. Niektoré majú napríklad sivé, čierne alebo biele pozadie, na ktoré bude umiestnená vaša favicon.
Aké veľkosti sú potrebné pre favicon v každom prehliadači?
Ako je uvedené vyššie, 16px sa vo všeobecnosti odporúča, pretože sa dá použiť vo všetkých prehliadačoch, ale ak by ste chceli vytvoriť favicon pre každé možné použitie, postupujte podľa pokynov nižšie:
- 16px: Na všeobecné použitie vo všetkých prehliadačoch sa môže zobraziť v paneli s adresou, kartách alebo zobrazeniach záložiek
- 24px: Pripnutá lokalita v programe Internet Explorer 9
- 32 pixelov: 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
- 57 pixelov: Štandardná domovská obrazovka iOS (iPod Touch, iPhone prvej generácie až 3G)
- 72 pixelov: Ikona domovskej obrazovky iPadu
- 96 pixelov: Favicon používaná platformou Google TV
- 114 pixelov: Ikona domovskej obrazovky iPhone 4+ (dvojnásobok štandardnej veľkosti pre sietnicový displej)
- 128 pixelov: Internetový obchod Chrome
- 195 pixelov: Rýchla voľba Opera
Aké formáty používam pre favicon?
Na rozdiel od minulosti, keď favicon musela byť vo formáte Windows ICO, teraz existuje niekoľko rôznych možností formátovania. Nižšie je uvedený podrobnejší pohľad na každý z nich:
- Windows ICO: ICO je zďaleka najviac podporovaný súbor. Výhodou ICO je, že môže obsahovať viacero rozlíšení a bitových hĺbok, čo funguje veľmi dobre a je to užitočné najmä pre Windows. ICO tiež ponúka 32-pixelovú ikonu, ktorá je užitočná pre panel úloh programu Internet Explorer Windows 7. Je to tiež jediný formát, ktorý nepoužíva prvok .
- PNG: Formát PNG je užitočný z niekoľkých rôznych dôvodov. Na vytvorenie súboru PNG nepotrebujete žiadne špeciálne nástroje, vďaka čomu je veľmi užívateľsky prívetivý. Poskytuje nám najmenšiu možnú veľkosť súboru a podporuje priehľadnosť alfa. Veľkou nevýhodou tohto štýlu však je, že Internet Explorer nepodporuje súbor PNG; podporuje iba súbory ICO.
- SVG: Tento formát je možné použiť a je podporovaný prehliadačmi Opera.
- GIF: Tento formát neponúka žiadne výhody okrem použitia v starých prehliadačoch. Aj keď pritiahnu viac pozornosti na používateľov, majú tiež tendenciu dráždiť a všeobecná zhoda je, že v žiadnom prípade nie sú výhodou.
- JPG: Hoci tento formát možno použiť, nie je bežný a neposkytuje takú kvalitu rozlíšenia ako PNG. Navyše kvôli malej veľkosti favicon stráca JPEG všetky svoje výhody.
- APNG: Toto je animovaná verzia PNG a hoci môže byť podporovaná prehliadačmi Firefox a Opera, má rovnaké problémy ako animovaný GIF, ktorý odvádza pozornosť používateľov pri pohľade na ich rozhranie.
Ako pridať favicon na váš web WordPress
Ak chcete pridať favicon na svoj web WordPress, prejdite na Vzhľad > Prispôsobiť:
Ďalej prejdite do ponuky umiestnenej na ľavom bočnom paneli; nájsť a kliknúť na Identita lokality:
The Ikona lokality sekcia je miesto, kde si môžete vybrať svoj obrázok a pridať favicon, ktorý chcete zobraziť:
Ak vám vaša téma neumožňuje nahrať ikonu favicon do nastavení prispôsobenia témy, môžete použiť a skutočný generátor favicon a nahrať do Plugin Vložiť hlavičku a pätu.
Budete musieť kliknúť Vyberte svoj obrázok Favicon:
Nahrajte svoju favicon na WordPress Media, aby ste si mohli vygenerovať URL pre svoju favicon. Vyberiete druhú možnosť a do poľa prilepíte svoju adresu URL. Kliknite Vygenerujte si obľúbené ikony a kód HTML:
Skutočná favicon vygeneruje HTML kód a môžete skopírovať celý kód:
Choďte na Vložiť hlavičky a päty plugin pod nastavenie a vložte svoj HTML kód favicon do sekcie
. Kliknite Uložiť:Ako pridať favicon na váš web Wix
Svoju favicon môžete pridať na svoj web Wix tak, že prejdete na Spravovať web > Favicon:
Kliknite na Nahrať Favicon a vyberte alebo nahrajte svoj obrázok. Neexistuje žiadne tlačidlo na uloženie, ale buďte si istí, že vaša favicon bude automaticky uložená systémom.
Ako pridať favicon na váš web Shopify
Ak chcete pridať svoju favicon na svoju stránku Shopify, musíte prejsť na svoju stránku Internetový obchod:
Kliknite na Prispôsobiť:
Kliknite na Nastavenia témy > Favicon:
Môžete vybrať obrázok z knižnice médií alebo nahrať nový obrázok:
