Tudtad, hogy a favicon a weboldalon a Brand egyik alapeleme

A jó marketing, a Brand építése a részletekben rejlik. Több SEO Audit során találkoztuk már vele, hogy ez az aprócskának tűnő elem hiányzik a weboldalból, pedig fontos eleme egy honlapnak.
Apróságnak tűnik, de a favikon (favicon) fontos szerepet játszik a márkánk, és a Brand építésében.
Ezzel a 16x16 pixeles ikonnal találkozhatunk, a böngészőkben, a kedvencekben, az asztali ikonokban.

Biztos vagyok benne, sokan azt gondoljátok, kisebb gondod is nagyobb ennél a weboldalon, miért foglalkozzak vele, fontos ez egyáltalán?

Miért fontos a favicon?

Észre sem veszed, hogy ezeket az elemeket használod a mindennapi böngészésed során legyen szó asztali számítógépről vagy mobilról. Folyamatosan látod böngészés közben, és vizuális azonosítást ad a weboldalnak. Beleég valahol az agyad hátterébe, ránézel egy böngésző címsorra és azonnal tudod melyik weboldal kihez tartozik, olvasás vagy kattintás nélkül.
A forma, a színek, összekapcsolódnak a weboldallal és tudat alatt befolyásolnak, erősítőik a Brand-et.

 

Böngészők címsorában is megtalálható a favicon
Böngészők címsorában is megtalálható a favicon

 

Szerintem egyik ikonról sem kell bemutatni, melyik Brandhez tartozik.
Rohanó világban élünk minden szinte minden a sebességről szól, főleg az Internet. Egy favikonnal is ki tudsz tűnni a tömegből, és lehetőséget adsz a felhasználónak, hogy egyszerűbben és gyorsabban rád találjon a sok böngésző ablak között!

Hidd el a felhasználók észreveszik a hiányát, és minőségi visszacsatolás azonnal romlik.

 

 Favicon történelem


1999 márciusában a Microsoft kiadta az Internet Explorer 5 böngészőt, amely először támogatta a favikont. Eredetileg a favicon egy fájl volt, amelyet egy webhely gyökérkönyvtárába favicon.ico néven helyeztek el. Az Internet Explorer ebben úttörő volt, és hamar megszerették a felhasználók, hogy nem csak az címsorban találkozhatott vele, de a könyvjelzőkben is megjelent. HTML 4.01 ajánlás lett, 1999 decemberében, majd később a XHTML 1.0 ajánlás, 2000. januárjában. Lassan 20 éve használható ez a kis Brand elem.

 

Favikon és a SEO kapcsolata

Sokan állítják, hogy semmi kapcsolat nincs a favicon és a keresőoptimalizálás között, és ami azt illeti igazuk is van meg nem is. Hasonlóan működik, mint a META description. Közvetlen hatása ténylegesen nincs, de közvetetten kihat a felhasználói élményre. Még nagyobb jelentősége lett 2019 májusában, mikor a Google bejelentette, hogy algoritmus frissítést hajtottak végre és a mobil keresési eredményekben is megjelenik a favicon. A 16x16 pixeles méretet pedig teljesen ignorálja.

Favicon mobil keresési megjelenés
Mobil keresések

 

Ekkor lépett színe igazán a SEO értéke is mert a favicon segítségével, az átkattintási arány is növelhető. Ha az átkattintási arány nő, a SERP pozíciónkra is kihatással van. Ha eddig még nem volt favikonod, érdemes mihamarabb pótolni.

Miként változtatta meg a Google a favicon alkalmazását?

A Google 2019 májusában bevezette a mobil keresési találatokban a favikon használatát, viszont rájöttek arra, hogy a kicsi 16x16 pixeles ikon, furán néz ki ha nagyítani szeretnék őket. Ezért kiadott egy közleményt, hogy a faviconnak olyan négyzetnek kell lennie, melynek mérete 48-cal osztható.
Lehet például 48 × 48, 96 × 96, 144 × 144 stb. pixelből.


Az SVG-fájlok természetesen nem rendelkeznek konkrét mérettel. A faviconok összes érvényes formátuma támogatott (ICO, PNG, GIF, animált GIF, JPEG, APNG, SVG).
A Google 16 × 16 képpontosra méretezi át a képet a keresési találatok között, ezért győződj meg arról, hogy a favicon jól mutat ebben a felbontásban is.

A formátumok alkalmazásár figyelj, mert nem minden böngésző támogatja.

BöngészőICOPNGGIFanimált GIFJPEGAPNGSVG
Edge Igen Igen IgenNem---
Firefox1.0-tól1.0-tól1.0-tólIgenIgen3.0-tól 41.0-tól
Google ChromeIgenIgen4.0Nem4.0NemNem
Internet Explorer5.011.011.0NemNemNemNem
Opera7.07.07.07.07.09.544.0
Safari Igen 4.04.0Nem4.0Nem12.0

 

 Fontos információ!


A Google már május óta elkezdte osztani a „büntetéseket” a nem megfelelő favicon méretek miatt miatt. A büntetés eredménye, hogy nem jelenik meg az ikonod a találati listán.

 

Google 5 pontos ajánlása a favikon használatára

  1. Mind a favicon fájljának, mind a kezdőlapnak feltérképezhetőnek kell lennie a Google által (vagyis nem lehetnek letiltva a Google elől).
  2. A faviconnak a webhely márkájának vizuális reprezentációjának kell lennie annak érdekében, hogy a felhasználók gyorsan azonosíthassák a webhelyet, amikor átfutják a keresési találatokat.
  3. A faviconnak olyan négyzetnek kell lennie, melynek oldalhossza 48-cal osztható. Állhat például 48 × 48, 96 × 96, 144 × 144 stb. képpontból. Ne használj 16 × 16 képpontos favicont.
  4. A favicon URL-jének állandónak kell lennie (ne változtassa gyakran az URL-t), a favicon.ico fájlt helyezd el a weboldalad gyökér könyvtárába is. A favicon URL-je. Lehet relatív elérési út (/favicon.ico) vagy abszolút elérési út (https://www.hwonline.hu/favicon.ico), de ugyanazon a domainen kell lennie, mint amelyen a kezdőlap is található.
  5. A Google nem jelenít meg olyan favicont, amely kifogásolhatónak minősül. Kifogásolható lehet többek között az, ha pornográfiát vagy gyűlöletkeltésre alkalmas szimbólumot (például horogkeresztet) tartalmaz. Ha ilyen típusú képet észlel, a Google alapértelmezett ikonnal helyettesíti a favicont.

 

Hogy alkalmazd a favikont weboldaladon

 

Favicon készítés

Hozz létre egy legalább 48x48 pixelből álló képet. Nem probléma, ha a mérete ennél nagyobb. A kép ne legyen bonyolult vagy aprólékos mert a 16x16 pixeles összenyomásban nem lesz azonosítható csak egy négyzetes paca lesz látható.

Ha megvan a kép akkor látogass el erre az oldalra: https://iconifier.net
Tallózd ki a képedet, majd válaszd a beállításokat, és állítsad be az ikon méreteket.

iconifier.net ikon méretek beállítása
iconifier.net ikon méretek beállítása


 
Ezután nyomj az Iconify gombra.
A művelet befejezésével az alsó boxban megjelennek az ikonok.

Ikonok letöltése és HTML kód
Ikonok letöltése és HTML kód


 
Kattints a ZIP fájlra és töltsd le. Letöltés után csomagold ki és a benne lévő fájlokat, másold fel a weboldalad gyökér könyvtárába.
Ha ezzel megvagy, másold ki a forrást, és illeszd be, a weboldalad forrásába a < HEAD > < /HEAD >  közé.

A HW Plus CMS fejlesztése során törekszünk arra, hogy a felhasználónak a weboldal optimalizálásához minden információt rendelkezésére bocsájtson. Ezért a CMS figyelmeztet, ha nem megfelelő méretű a favicon.ico mérete, így azonnal cserélni tudod ha szükséges!
 


 

Összegzés

A favicon, egy remek eszköz Brand építésre és már a keresőoptimalizálást is elősegíti. Alkalmazása roppant egyszerű, és percek alatt elvégezhető. Pár perc ráfordítással sokkal színvonalasabb lesz a weboldalad megjelenése.