Čo je Favicon
Favicony uľahčujú používateľom identifikáciu vašej lokality, keď majú otvorených veľa kariet vo webovom prehliadači. Favicony sa v prehliadači zvyčajne zobrazujú tesne pred adresou URL. Môžete tiež vidieť ikony favicon na záložkách, výsledky automatického dopĺňania Google a históriu vyhľadávania. Tu sú miesta, kde je možné zobraziť ikony favicon v rôznych prehliadačoch.
Favicony možno definovať ako ikony, ktoré sa používajú ako súčasť brandingu stránky. Favicon môže byť logo značky, znak alebo skupina znakov, časť loga alebo dokonca všeobecný obrázok, ktorý predstavuje typ podnikania alebo odvetvia, v ktorom značka pôsobí.
V tomto článku skúmame, čo spôsobuje, že sa ikony favicon nezobrazujú, a ako tieto problémy vyriešiť.
Ako správne nainštalovať Favicons
Ak chcete, aby sa ikona vykresľovala správne, musíte ju správne nainštalovať. Najprv vytvorte favicon. Je ich veľa generátory favicon ktoré na to môžete použiť. Potom ho pridajte na svoju stránku. Tu je návod, ako ho nainštalovať na hlavné stránky vášho webu:
- Nahrajte súbor favicon.ico do požadovaného adresára na vašej stránke.
- Vložte tento kód do sekcie :
- ‘images’ je potrebné nahradiť adresárom, kde je uložená vaša favicon.
- ‘favicon.ico’ je potrebné nahradiť tým, čo ste pomenovali svoju ikonu.
- Upozorňujeme, že hodnota rel môže byť aj „icon“, „apple-touch-icon“ alebo „apple-touch-icon-precomposed“
- Hodnota href môže byť relatívna cesta (kde používate cestu k súboru, kde je uložená ikona favicon) alebo absolútna adresa URL (kde používate svoju doménu a pridáte súbor favicon k adrese URL ako na https://abc.com/favicon .ico)
Viac informácií o pridávaní favicon nájdete v tomto článku. Môžete si tiež prečítať o Pokyny Google pre ikony favicon tu.
Bežné dôvody, prečo sa vaša favicon nezobrazuje
Pomocou nášho nástroja na audit webových stránok môžete skontrolovať, či sa vaša favicon zobrazuje správne. Tu sú bežné dôvody, prečo sa vaša favicon nezobrazuje, a ako vyriešiť problémy:
Chyby syntaxe
Jednoduchá syntaktická chyba v kóde, ktorý používate na implementáciu svojich favicon, môže spôsobiť, že sa vaša favicon nezobrazí. Tu je príklad:
Vyššie uvedený kód má 1 jednoduchú chybu syntaxe:
- V odkaze href chýbajú úvodzovky
Váš prehliadač uložil vašu stránku do vyrovnávacej pamäte ako stránku bez ikony favicon
Keď pridáte favicon na vašu stránku, nemusí sa zobraziť, pretože váš prehliadač „uložil“ vašu stránku ako stránku bez favicon. Musíte vymazať vyrovnávaciu pamäť v prehliadači alebo použiť iný prehliadač.
Prípadne pridajte /favicon.ico k názvu svojej domény ako na www.abc.com/favicon.ico
Nesprávna cesta k súboru
Musíte sa uistiť, že cesta k súboru vašej favicon je správna. Ak máte svoju ikonu v priečinku s obrázkami, uistite sa, že cesta k súboru má /images/favicon.ico v závislosti od toho, ako ste ikonu pomenovali.
Ak sú vaše CSS a ikona súrodenci v tom, že sú na „rovnakej úrovni“, uistite sa, že pred názvom súboru favicon nemáte lomku, ako by to malo byť vo vašom href:
href=”favicon.ico”
Prehliadač nezobrazuje obľúbené ikony, ak sú miestne
Prehliadače ako Chrome a Safari nezobrazujú ikony favicon, ak sú lokálne (neboli nahrané na server). Chrome napríklad dokáže zobraziť ikonu favicon iba vtedy, ak sa nachádza v priečinku sťahovania.
Odkaz na vytvorenie favicon nie je na správnom mieste
Je dôležité umiestniť odkaz na pridanie vašej favicon na správne miesto. Musí byť umiestnený v sekcii hlavičky vašej webovej stránky a nie kdekoľvek inde. Zatiaľ čo ak je umiestnený v tele, môže fungovať v niektorých prehliadačoch, iné prehliadače ako Chrome ho nenačítajú.
Názov súboru vášho Favicon je stále predvolený názov súboru
Niekedy je dôvod, prečo sa vaša favicon nezobrazuje, v dôsledku nezmenenia názvu súboru. Jednoduchá oprava je premenovanie súboru favicon z predvoleného „favicon.ico“
Zamerajme sa teraz na to, prečo sa favicony nezobrazia v prehliadačoch Chrome, WordPress, Shopify, Wix a Squarespace:
Dôvody, prečo sa ikona Favicon nezobrazuje konkrétne v prehliadači Chrome
Tu sú dôvody, prečo sa vaša favicon nemusí zobrazovať v prehliadači Chrome:
Veľkosť favicon je nesprávna
Spomenuli sme, že Google má špecifické usmernenia ktoré je potrebné dodržiavať pri pridávaní favicon na vašu stránku. Jedným z nich je, že veľkosť ikony musí byť v násobkoch 48 a nemôže byť 16×16. Ak je veľkosť vašej ikony 16 x 16, nezobrazí sa.
Systémy na správu obsahu (CMS) majú tiež špecifické veľkosti, ktoré odporúčajú. WordPress odporúča 512 x 512 a Squarespace 300 x 300. Tieto CMS dokážu zmeniť veľkosť favicon tak, aby vyhovovali rôznym scenárom. Väčšia veľkosť je potrebná napríklad pre záložky, zatiaľ čo pre mobil môže byť potrebná menšia veľkosť.
Tento článok skúma rôzne veľkosti favicon, kde sú najvhodnejšie, a dokonca aj zastarané veľkosti.
Mať súbor Favicon v koreňovom adresári, ale nepridávať odkaz, ktorý ho „importuje“
Len preto, že súbor favicon je vo vašom koreňovom adresári, neznamená to, že sa automaticky nahrá pri načítaní vašej webovej stránky. Uistite sa, že máte v hlavičke tieto odkazy:
Toto je to, čo importuje favicon na váš web.
Dôvody, prečo sa Favicon nezobrazuje konkrétne v Shopify
Tu sú dôvody, prečo sa vaša favicon nemusí zobrazovať v Shopify:
Odkaz na import favicon je na nesprávnom mieste
Dôležité je, kam odkaz umiestnite. Uistite sa, že je v sekcii
a nie.
Pozrite sa, ako pridať favicon do vášho online obchodu Shopify
Dôvody, prečo sa Favicon nezobrazuje konkrétne vo WordPress
Tu sú dôvody, prečo sa vaša favicon nemusí zobrazovať vo WordPresse:
V nástroji Customizer je ikona lokality určená pre AMP Favicon
Ak použijete nástroj Customizer na nahranie vlastnej ikony favicon, nemusí fungovať, pretože je určená pre stránky, ktoré používajú AMP. Ak chcete tento problém vyriešiť, musíte najprv odstrániť ikonu favicon, ktorú ste nahrali pomocou nástroja Customizer. Potom musíte nainštalovať doplnok s názvom ‘Favicon od RealFavicon Generator‘. Tento doplnok vám umožňuje nahrať obrázok, ktorý chcete použiť ako svoju favicon. Musí byť vo formáte png alebo jpg. Plugin vám pomôže previesť ho na .ico.
Môže existovať doplnok, ktorý pridáva prvky tela do vašej hlavy / hlavy
Musíte sa uistiť, že nemáte doplnok, ktorý vytvára prvky tela vo vašej sekcii
. Prejdite si sekciu hlavy a ak uvidíte kód, ktorý patrí do sekcie tela, skontrolujte doplnky, ktoré ste nainštalovali pri pridávaní favicon na vašu stránku WordPress. Pokračujte a deaktivujte ho alebo dokonca odinštalujte.Nezadali ste typ obrázka, ak to nie je .ico
Ak je vaša ikona vo formáte .png, musíte upraviť odkaz, ktorý používate na odovzdanie ikony favicon, aby obsahoval text nasledovne:
Musíte tiež pridať súbor .ico do koreňového adresára stránky.
Zistite, ako pridať favicon na web WordPress.
Dôvody, prečo sa Favicon nezobrazuje konkrétne na Squarespace
Tu sú dôvody, prečo sa vaša favicon nemusí zobrazovať v Squarespace:
Verzia uložená vo vyrovnávacej pamäti ešte nie je neplatná
Kód šablóny v sekcii
vždy používa ako názov súboru ‘favicon.ico’. Toto je verzia vo vyrovnávacej pamäti. Ak ho chcete zrušiť, zmeňte názov súboru.Stále ste prihlásení do CMS
Ak ste stále prihlásení do svojho CMS, môže sa stále zobrazovať predvolená ikona Squarespace. Ak chcete vidieť svoju vlastnú favicon, musíte sa odhlásiť z CMS.
Záver
Favicony sa hodia na pomoc pri konzistentnosti značky. Vďaka nim je vaša stránka ľahko identifikovateľná, pričom používateľ musí na prvý pohľad identifikovať niekoľko stránok, napríklad keď je otvorených veľa kariet. Sú skvelé pre opakovaných návštevníkov a zákazníkov. Keď si používateľ uloží vašu stránku do záložiek, pomocou ikon favicon bude ľahko identifikovateľná.
Implementácia favicon nemusí ísť vždy hladko a my sme sa pozreli na bežné dôvody, prečo sa favicony nezobrazia. Skúmali sme aj problémy, ktoré môžu nastať pri používaní konkrétnych systémov na správu obsahu – CMS – ako WordPress, Shopify alebo SquareSpace. Ako ste si možno všimli, väčšina problémov je dostatočne jednoduchá a môžete ich vyriešiť. V prípade potreby však neváhajte požiadať o odbornú pomoc.
