Favicon na webovú stránku môžeme dostať niekoľkými spôsobmi, ale najprv vás všetkých pozdravím. Dobré nedeľné predpoludnie priatelia. Tak ako väčšinu nedelí tak aj dnes si spravíme takú nedeľnú kázeň o dvanástej, v dóme nedeľnej webovej neresti. Dáme si k tomu kávičku ☕ a môžeme začať „slintať“ nad nedostatkami toho, čo vidíme okolo seba na webe. Začneme trocha netradičným postupom.
Favicon na webovú stránku do Bing prehľadávača
Prečo prehľadávač Bing nezobrazuje váš favicon vo výsledkoch vyhľadávania?
Bing je pri zobrazovaní favicon vo výsledkoch vyhľadávania trochu „svojský“. Zatiaľ čo Google zobrazuje favicon pri každej výsledkovej URL, Bing to robí len selektívne. Často len pri overených značkách, alebo populárnych stránkach. Vieme však aj túto taktiku prehľadávača Bing mierne ovplyvniť. Ide len o to ako správne napísať príkaz v sekcii „head“. Bing na rozdiel od iných prehliadačov je troška (ja to nazvem zaostalý) obmedzený. Ak má stránka nižší počet spätných odkazov alebo nižší autoritný status, Bing môže favicon ignorovať. Môže to byť aj otázka času, kým sa favicon začne zobrazovať, ak je stránka novšia alebo menej navštevovaná. Treba mu však pomôcť tým, že do sekcie (head) zapíšeme ten správny typ a tvar definície pre favicon.
Pre Bing je vraj zaostalý obrázok .ico a lepšie mu vyhovuje png obrázok a ešte lepšie svg formát obrázka. Mnohokrát som sa tomu divil, prečo práve png a svg keď už aj tak máme avif alebo webp formáty. Prehľadávač Bing práve moderné formáty ignoruje a uprednostňuje png a svg. V takomto tvare: <link rel=“icon“ type=“image/png“ sizes=“32×32″ href=“/favicon-32×32.png“>. Je to tým že Bing nemá takú konzistentnú politiku ako Google. Bing je menej predvídateľný v UI/UX vo výsledkoch vyhľadávania ako iné prehľadávače. Skutočnosť, že sa obrázok nenachádza pri URL adrese vo vyhľadávači neznamená a nefunguje to ako penalizácia. Je to len ako mierne obmedzenie vizuálnej prezentácie. Preto sa pre prehľadávač Bing nehodí formát ico, webp alebo avif. Podporované veľkosti obrázkov pre Bing a sú dokonca odporúčané veľkosti: 32x32px, alebo až 48x48px a pre svg formát až 120x120px.
Obrázok podľa priorít
Obrázok ktorý bude prezentovať naše záujmy, alebo bude prezentovať webové stránky je zväčša logo webu. Tento obrázok ukazuje čím sa webové stránky zaoberajú, alebo akú má tématiku. Na farebnom zobrazení to nemá žiadny vplyv. Farby majú vplyv len na veľkosť bajtov. Čím sýtejšie a rozsiahlejšie farebné RGB, tým bude obrázok obsahovať viac bajtov. Tu už nejdem vôbec hovoriť o prehľadávači Bing, ale o ostatných prehľadávačoch. Favicon ico má optimálnu veľkosť 16x16px a do 800 bajtov. Nad 800 bajtov už je trocha priveľký, no ešte stále spracovateľný aj okolo 1500 bajtov.
Favicon png už také obmedzenia nemá ale vždy je na mieste uvažovať, aby aj rozmer 32x32px čo najmenší. Ikony by mali byť umiestnené vždy za značkou UTF-8 ako prvé a to v poradí priority. Vždy je prvý v poradí ten prvý zapísaný a teda najvýznamnejší. Favicony rozdeľujeme, lebo nie je favicon ako favicon. Jeden obrázok môže byť spoločný pre všetky potreby. To je zvyčajne vo WordPress favicon 512x512px. Ak vám záleží na maximálnej kompatibilite naprieč všetkými vyhľadávačmi, najlepšie je použiť fallback cez viacero formátov. Tento zápis je samozrejme súčasťou technického SEO pre vyhľadávače.
Favicon zväčšený náhľad. Klikni sem.
Záleží na potrebe
Ak je to pre vás „priorita“ pokojne môžeme použiť všetky zápisy naraz. Pre rýchlosť webu to nebude mať žiadny nevhodný efekt. Pri testovaní stránky tam bude na konci testu vždy iba jeden favicon a to ten, ktorý je najdôležitejší. Varujem vás, nepoužívajte formát SVG ako prvý v poradí, ten nie je podporovaný v niektorých prehliadačoch. Nie je podporovaný ako favicon vo všetkých kontextoch. Naopak český Seznam a aj slovenský Zoznam takisto zobrazujú tento obrázok vo formáte .webp, avif, png ak je správne deklarovaný. Googlebot a iné roboty vždy z webu načítajú len prvý favicon, ktorý akceptujú, podľa svojej priority a podpory formátu. Nasledujúci správny formát bude zvyčajne vybraný ako fallback, ak prvý zápis pre dané prostredie nie je podporovaný.
Favicon pre Yandex
Toto je mimoriadna téma, pretože Yandex je úplne niekde inde ako všetky ostatné roboty vyhľadávačov. Ak teda je váš web zameraný na ruské prostredie a teda je písaný azbukou budete potrebovať doplniť iný favicon. Nemusí byť písaný za každú cenu azbukou, môže to byť rovno angličtina alebo iný jazyk. Yandex uprednostňuje formát svg+xml a až potom všetky ostatné typy obrázkov. Vyžaduje sa veľkosť 120×120, 32×32, alebo 16×16 pixelov v tvare <link rel=“icon“ type=“image/svg+xml“ sizes=“120×120″ href=“/favicon-120×120.svg“>. Yandex uprednostňuje veľkosť 120x120px až potom všetky ostatné veľkosti v poradí.
Favicon ako prostriedok vyjadrenia
Netuším ako ste vstúpili na moju doménu, či ste prišli cez vyhľadávanie alebo ste prišli cez odkaz. No dám to do pozornosti. Ja používam dve rozdielne logá v obrázkoch favicon. Zvolil som rozdielnu taktiku ako je rokmi zaužívaná. Pre prehliadač používam ikonu okrovej farby „WP“ (povedzme WordPress alebo aj Wildlife Photo ak chcete) a pre prehľadávač používam čiernobielu transparentnú ikonu pre SEO. Je to len môj vlastný zámer, alebo teda taktický manéver (neprezradím dôvody) ktorým sa chcem odlíšiť od zaužívaných šablón. Dávam to do pozornosti len preto, že sa to dá a nemá to žiadny vplyv na hodnotenie webu vo vyhľadávaní. Overiť dvojitosť zobrazenia môžete napríklad zadaním do vyhľadávania Google kľúčovej frázy „geniálny wordpress“ alebo „knutov blog o seo“. Tu viem s istotou, že prvé odkazy sú vysoko a sú moje. Pozrite ako vyzerá favicon na web stránke a ako vyzerá vo vyhľadávaní.
Pre vás pripravil Pavol Knut Navrátil