Mi is az a favicon❓

ℹ️ A favicon mindenféleképpen egy esély, hogy weboldaladdal kitűnj a többi közül❗

✅ Ha megnézed ugyanis, az esetek többségében az alkalmazott 🔗 CMS logója lesz az URL címek mögött, nem olyan favicon, amiről egy tevékenységre vagy vállalatra lehet asszociálni.

Erről a kis ikonról bevezetésül

A favicon egy kis ikon (általában 16 × 16 vagy 32 × 32 képpontból áll), amely egy webhely azonosítására szolgál a böngésző lapján, a könyvjelzőlistában vagy bárhol máshol.

Favicon jelentése

A „kedvencek ikonja” a favicon jelentése, az elnevezése ebből ered. Ez az az elem, amely weboldalunk azonosítására szolgál, ha valaki felveszi a kedvencek listájára. Pont ezért gondolom úgy, hogy fontos kommunikációs eszköz.

🤔 Hogy is néz ki ez a favicon egy weboldalon❓

Ez egy olyan szimbólum, amely a vállalati imázst közvetíti, és a következőkre használják:

Márkakép kialakítása, akkor érdekes, amikor valaki böngészi weboldalunkat, és a böngésző URL-jének területére szegezi a 👀 tekintetét.

 

Az emberek általában több weboldalt is megnyitnak, s ezért eszméletlen sok fül szokott teremni a böngésző ablakban. Ilyenkor nagyon jól jön, ha a többi közül kitűnik weboldalunk.

Sokan előszeretettel alkalmazzák a kedvencek listáját, azaz webböngészőjük könyvjelző megoldását. Ott is remek funkciót tölthet be.

💡Hogyan hozható létre ez a favicon weboldalunk, blogunk számára❓

Számos program segíthet a létrehozásában. Ez például egy remek 🔗favicon készítő❗

Azt tanácsolom, hogy a kedvenc ikonod 16 × 16 pixelben készítsd el, s ha weboldalad, blogod rendelkezik valamilyen logóval akkor a favicon olyan legyen. Létrehozhatod őket képekből, de pixelenként is könnyen elkészíthető.

Ha már létrehoztad, mentsd el a favicon.ico néven, és FTP-n keresztül fel tudod tölteni  weboldalad, blogod gyökérkönyvtárába. Az tévhit, hogy feltétlen .ico kiterjesztés kell, lehet akár .png is, node itt írtam is 😊

Törekedjünk az egyszerűségre!

Noha a favicon a márka vizuális arca, a lehető legegyszerűbbnek kell lennie. Kis mérete és a felhasznált formák egyszerűsége miatt a színek létfontosságúak a potenciális fogyasztók figyelmének felkeltéséhez és a kitűnéshez. A túl sok részlet miatt a favicon zsúfoltnak és rendetlennek tűnhet, erre érdemes figyelni.

Semmi esetre se használj Clipart Képeket

Itt arra gondolok, hogy ne egy már valaki által elkészített favicon megoldást használj, ami Google Images -el vagy bármivel pillanatok alatt megtalálható. Érdemes törekedni az egyediségre. A fenti képen amit példaként helyeztem ide, olyan favicon látható ami a SEO világát kapcsolja össze a tudással, ismeretterjesztéssel.

Rövidítés

Ennek gyakori megoldása a vállalkozás nevének vagy a mozaikszavak kezdőbetűjének használata. Dönthetsz úgy is, hogy céged nevének rövidítését használod. Játsz néhány különböző variáció gondolatával és válaszd ki a legpraktikusabbat.

Színkoordináció

A színválasztásnak is szóba kell jönnie. A kontrasztos színek megkönnyítik a szem számára, hogy felismerje a formákat és a favicon fókuszpontját. Ne feledd, hogy a böngészők kissé eltérőek lehetnek. Például néhány szürke, fekete vagy fehér háttérrel rendelkezik, amely fölé kerül a favicon.

A favicon méretei körüli kérdések : szerintem ez sokszor a megcélzott közönség felhasználási szférájától függ

Ahogy fentebb említettem, a 16px általában ajánlott. Azért javasoltam, mert minden böngészőben használható, de ha minden lehetséges felhasználási esethez szeretnénk favicon-t létrehozni, ezek az instrukcióim 👇

16 képpont: Általános használatra minden böngészőben megjelenhet a címsávban, a lapokon vagy a könyvjelzők nézeteiben

24: rögzített webhely az Internet Explorer 9-ben

32: Új lapoldal az Internet Explorerben, a tálca gombja a Windows 7+ rendszerben és a Safari „Olvasás később” oldalsávja

57: szabványos iOS kezdőképernyő (iPod Touch, iPhone első generációs 3G-re)

72: iPad kezdőképernyő ikonja

96: A Google TV platform által használt favicon

114: iPhone 4+ kezdőképernyő ikonja (a retina kijelző szabványos méretének kétszerese)

128: Chrome Internetes áruház

195: Opera Speed Dial számára a legjobb

Milyen formátumokat használj a faviconhoz❓ 

A múlttal ellentétben, amikor a favicon csak és kizárólag Windows ICO formátumú lehetett, most néhány egyéb grafikus fájlformátum opció is kínálkozik. 👇

Windows ICO: Messze a legszélesebb körben támogatott fájl. Előnye, hogy több felbontást és bitmélységet is tartalmazhat, ami nagyon jól működik, és különösen hasznos a Windows számára. Az ICO egy 32 képpontos ikont is kínál, amely hasznos az Internet Explorer Windows 7 tálcájához. Ez az egyetlen formátum, amely nem használja a <link> elemet.

PNG: Ez a formátum több különböző okból is hasznos. Nincs szükség speciális eszközökre a PNG-fájlok létrehozásához, így nagyon felhasználóbarát. A lehető legkisebb fájlméretet adja, és támogatja az alfa-átlátszóságot. Ennek a stílusnak azonban az egyik nagy hátránya, hogy az Internet Explorer nem támogatja a PNG-fájlokat; csak az ICO fájlokat támogatja. Ugyanakkor ezt a helyzetet itt frappánsnak ki is mentem azzal a megjegyzésemmel, hogy elég soványka már azoknak az eseteknek a száma ahol a webböngésző Internet Explorer. A Microsoft Edge böngészőnek pedig nincs baja azzal ha a favicon mondjuk PNG.

SVG: Ezt a formátumot az Opera böngészők használják és támogatják.

GIF: Ez a formátum nem kínál semmilyen előnyt a régi böngészőkben való használaton kívül. Hajlamosak az irritációra is, és az általános konszenzus az, hogy semmiképpen sem jelentenek előnyt.

JPG: Bár ez a formátum használható, nem általános, és nem biztosít olyan jó felbontást, mint a PNG. Ezenkívül a favicon kis mérete miatt a JPEG elveszíti minden előnyét. Szóval nem ajánlom!

APNG: Ez a PNG animált változata, és bár a Firefox és az Opera támogatja, ugyanazok a problémák, mint az animált GIF esetében. Feleslegesen elvonja a felhasználók figyelmét.

Tipp favicon beállításához WordPress CMS esetén

Általában a legtöbb WordPress sablon tartalmaz beállítási lehetőséget a favicon számára. Amennyiben azonban egyszerűen nem találod sehol a favicon beállítási lehetőséget,

✅ akkor a legegyszerűbb módja blogod FTP gyökérkönyvtárának index.php fájljába bejegyezni a favicon-t az alábbi HTML parancs szerint:

<link type=”image/x-icon” href=”favicon.ico” rel=”shortcut icon” />


A Faviconok fontosak a SEO számára❓

A Faviconok közvetlenül nem felelősek a keresőoptimalizálásáért, azonban közvetetten felelősek, és fontos eszközei a keresőmotorok találati eredményein megjelenő rangsorolás javításának.

Sokan azt gondolják, hogy a faviconok nem befolyásolják a webhely rangsorolását. A valóság, ha egy SEO kampány szemszögéből nézzük, hogy sok tényező akad. Nincs közvetlen hatásuk a keresési rangsorolásra, esztétikai célokat szolgálnak, de

a lényeg az, hogy a faviconok mégis fontosak a SEO számára❗

Mert ha megfelelően megtervezték, akkor webhelyed professzionálisabbnak fogja mutatni magát akár a már említett könyvjelzőket tartalmazó webhelyeket kereső fogyasztók számára. Időről időre a keresőmotorok pl. a Google ténylegesen felvesz a címkétől balra található faviconokat a keresési eredmények közé. Ilyen esetekben egy minőségi favicon segíthet növelni az átkattintásokat.

Az alábbiakban prezentálom a favicon hogyan segítheti a keresőoptimalizálást👇

Elősegíti a felhasználóbarát kultúra kialakulását

A felhasználóbarát webhely közvetett módon javítja a keresőmotorokban lévő helyezést. Ha egy favicon látható a böngésző lapjain, a könyvjelzőkön, az előzmények archívumában és így tovább, akkor a felhasználók időt takaríthatnak meg azáltal, hogy nehézségek nélkül azonosíthatják milyen weboldalról is van szó, ezáltal növelve annak valószínűségét,

📢 hogy a felhasználók tényleges interakcióba lépnek webhelyeddel 😉

Az internetezők valóban emlékeznek egy faviconra?

✅ A válasz egy határozott IGEN!

Az emberek könnyebben emlékeznek egy faviconra, mint egy céglogóra. Tehát a kedvenc ikonjainak megtervezésekor tedd őket felismerhetővé és emlékezetessé, hogy az emberek lássák  – még akkor is, ha nem közvetlenül az URL-en landolnak.

Könyvjelzők szerepéről még egy kicsit

A favicon előnyt jelent azokkal a webhelyekkel szemben, amelyek nem használnak ilyet.

Nem árt tudni, hogy a Google Chrome böngészője például levon bizonyos keresési rangsorolási jeleket az interneten könyvjelzővel ellátott webhelyek esetén. Ha nincs ez a favicon a webhelyeden, akkor elszalasztod annak lehetőségét, hogy a Chrome böngészőben felkerüljön a könyvjelzők közé, így közvetve lemaradsz az ismertetett előnyről. Márpedig mindez növeli a webhely forgalmát.

Konklúzió

A faviconok olyanok, mint azok az apró részletek, amelyekre általában nem fordítunk túl sok figyelmet. A valóság azonban az, hogy korántsem értelmetlenek, hanem a hálózat jelentős részét képezik, mind felhasználói felület, mind márkaépítési szempontból.

👋 Egyesek azt állítják, hogy a nagy dolgok kis méretben látnak napvilágot 😉