A hiányzó favicon: az apró részlet, amitől a webhelyed befejezetlennek tűnik a böngészőfülön
Az az általános ikon a böngészőfülön azt súgja: „befejezetlen webhely”. Íme, mi az a favicon, miért számít, és hogyan állítsd be helyesen.
Megnyitsz tíz fület, és más cégek éles, tiszta logói között a tiéd egy üres papírlapot vagy egy általános földgömböt mutat. Apró részlet, de a látogató agya azonnal kiolvassa: „itt valami nincs befejezve.” Senki nem mondja ki hangosan, de a benyomás csendben megszületik.
A favicon az az apró ikon a fül sarkában, az oldal címe mellett. Megjelenik a könyvjelzők között, az előzményekben, a telefonod füllistájában, sőt néha még a Google mobilos találatai között is. Ez az egyik legolcsóbban javítható részlet egy weboldalon, és egyben az egyik, ami elválasztja az „amatőrt” a „komoly vállalkozástól”. Nézzük meg pontosan, miért számít, és hogyan állítsd be rendesen, nem félgőzzel.
Mi is valójában a favicon, és hol látják az emberek
A favicon a „favorites icon” kifejezésből ered – ez az a kis ikon, amit a böngésző az oldal címe mellé tesz. Kicsi, de több helyen bukkan fel, mint gondolnád:
- a nyitott fülön, az oldal neve mellett;
- a könyvjelzősávon és a kedvencek listájában;
- a böngészési előzményekben és a címsor javaslataiban;
- a telefonod füllistájában, ahol a cím szinte eltűnik, és nagyrészt csak az ikon marad;
- mobilon néha még a Google-találatod mellett is.
Amikor hiányzik, a böngésző egy általános szimbólumot tesz oda – egy üres lapot vagy egy földgömböt. Más webhelyek saját ikonjai között körülvéve a tiéd az egyetlen, ami „üresnek” tűnik. Nem katasztrófa, de pontosan az a fajta részlet, ami azt üzeni: „a munka nincs befejezve.”
Miért csorbítja a hiteledet egy ilyen apró részlet
Az emberek nem egy ellenőrzőlistával a kezükben ítélnek meg egy weboldalt. Megérzik. És az apró jelzések – egy hiányzó favicon, egy oda nem illő betűtípus, egy szétnyújtott fotó – összeadódnak a „gondosság” vagy a „gondatlanság” összképévé.
A favicon azért különleges, mert pontosan akkor jelenik meg, amikor valaki visszatér hozzád. Aki nyitva hagyta a fületed hét másik között, egy pillantással kell megtalálnia téged. Egy tiszta ikonnal azonnal rád talál. Nélküle te vagy az „üres lap”, amit véletlenül becsuk.
Aztán ott a bizalom kérdése: ha a cég nem vette észre ezt a részletet, amely már az első másodperctől látható, vajon milyen más, kevésbé látható dolgok maradtak ki? Talán igazságtalan. De így működik az érzékelés.
Hogy néz ki egy jó favicon (nem a logód kicsinyítve)
A klasszikus hiba az, hogy fogod a teljes logót, szöveggel együtt, és belegyömöszölöd egy apró négyzetbe. Ekkora méretben a szöveg elmosódott folttá válik. Egy jó favicon néhány szabályt követ:
- Egyszerű és felismerhető nagyon kicsi méretben is – egyetlen betű, egy szimbólum, egy tiszta forma.
- Jó kontraszt, hogy világos és sötét fülön is olvasható legyen.
- Olyan háttér, ami nem tűnik el – kerüld a teljesen átlátszó hátteret, ha a forma fehér, különben eltűnik a világos témákon.
- Ugyanaz az identitás, mint a márka többi része: ugyanaz a szín, ugyanaz a szellemiség.
Ha hosszú nevű logód van, használd csak a kezdőbetűt vagy a belőle vett szimbólumot. A cél nem az, hogy mindent belezsúfolj, hanem hogy egy pillantásra felismerhető legyen – mint egy gomb, amire a szemed olvasás nélkül rátalál.
Hogyan add hozzá, lépésről lépésre (bármi is a platform)
A legtöbb modern platformon a favicon egyetlen helyről kerül be, kód nélkül.
- WordPress.com-on vagy klasszikus WordPress-en: Testreszabás → Webhely identitása → tölts fel egy „Site Icon”-t. Kezeli helyetted a méreteket.
- Más platformokon (Wix, Shopify stb.): a beállításokban keresd a „favicon” vagy „site icon” kifejezést.
- Egyedi fejlesztésű webhelyen: hozzáadod az ikonfájlokat és néhány sort a <head> részbe (favicon.ico, egy nagyobb PNG-verzió, és egy apple-touch-icon arra az esetre, amikor valaki elmenti a webhelyet a telefonja kezdőképernyőjére).
Két gyakorlati tipp: forrásként használj egy tiszta, négyzet alakú képet, legalább 512×512 px méretben, hogy mindenhol jól nézzen ki. És miután beállítottad, ha még mindig a régi ikont látod, az a böngésző gyorsítótára – kényszerítsd újratöltésre az oldalt, vagy nyisd meg egy privát ablakban.
Gyakori hibák és hogyan kerüld el őket
Néhány csapda, amit gyakran látok:
- Egy kis képernyőre készített ikon – feltöltesz egy apró képet, és elmosódottnak tűnik a nagy felbontású telefonokon. Indulj egy nagy, négyzet alakú forrásból.
- Túl kicsi szöveg – ha a teljes logó belekerül, 16 pixelen összegabalyodik. Egyszerűsíts.
- Egy szín, ami eltűnik – a fehér átlátszó háttéren kísértetiesen néz ki a világos témákon; adj neki hátteret vagy egy jól látható formát.
- „Beállítottam, de semmi sem változik” – szinte mindig a gyorsítótár. Ne állítsd be kétszer; inkább kényszerítsd újratöltésre.
- Elfelejtve az aloldalakon – egy jól megépített webhelyen a favicon mindenhol ugyanaz; ellenőrizd a belső oldalakat, ne csak a főoldalt.
Ezek egyike sem végzetes önmagában, de együtt ez a különbség a „gondos” és a „félbehagyott” között.
Egy apró jelzés egy nagyobb egészen belül
Egy hiányzó favicon ritkán az egyetlen probléma. Általában más apró, kihagyott részletekkel jár együtt: a fül címe azt írja, „Kezdőlap”, a cég neve helyett, hiányzik a WhatsApp-megosztási kép, a menü furcsán viselkedik mobilon. Mindegyik önmagában jelentéktelennek tűnik. Együtt viszont eldöntik, hogy olyan vállalkozásnak tűnsz-e, amelyre az emberek támaszkodhatnak.
Így dolgozunk mi az MPO Web Studio-nál: nemcsak „egy szép webhely”, hanem azok a részletek, amelyek csendben meggyőznek – favicon, helyes címek, megosztási képek, sebesség. Távolról dolgozunk, az egész országban, és először akár ingyen felépíthetünk neked egy demót a webhelyedből, hogy pontosan lásd, hogyan nézne ki – faviconnal együtt. Ha épp most vetted észre az üres lapot a füleden, és szeretnéd megjavítani (és vele együtt a többi részletet is), írj nekünk WhatsApp-on, és elintézzük.
Gyakran ismételt kérdések
Befolyásolja a favicon a Google-helyezésemet?+
Közvetlenül nem – nem rangsorolási tényező. De mobilon a Google néha megjeleníti a faviconodat a találatod mellett, és egy tiszta ikonnal könnyebben észrevehető és rákattintható vagy. Tehát közvetve segít, a bizalmon és a felismerhetőségen keresztül, nem az algoritmuson át.
Milyen méretű és formátumú legyen?+
Indulj egy tiszta, négyzet alakú képből, legalább 512×512 px méretben. A modern platformok ebből automatikusan legenerálják az összes kisebb méretet. Egyedi webhelynél általában egy favicon.ico-t, egy PNG-verziót és egy apple-touch-icont használsz a kezdőképernyőre mentéshez.
Beállítottam, de még mindig a régi ikont látom. Miért?+
Szinte biztosan a böngésző gyorsítótára, amely nagyon szívósan tartja a faviconokat. Kényszerítsd újratöltésre az oldalt, ürítsd ki a gyorsítótárat, vagy nyisd meg a webhelyet egy privát ablakban. Általában hamarosan frissül; ne állítsd be kétszer aggodalmadban.
Használhatom simán a logómat faviconként?+
Csak ha egyszerű. Egy hosszú nevű logó elmosódott folttá válik kis méretben. Legjobb, ha csak a kezdőbetűt vagy a logóból vett szimbólumot használod, megtartva a márka színét, hogy egy pillantásra felismerhető legyél.
Ez olyasmi, amit magam is megcsinálhatok, vagy kell hozzá valaki?+
WordPress-en, Wixen vagy Shopify-on néhány perc alatt magad is hozzáadhatod a beállításokból. Egyedi webhelyen, vagy ha a többi részletet is rendesen elvégeztetnéd (címek, megosztási képek, sebesség), érdemes olyasvalakit bevonni, aki mindet egyszerre kezeli.
7 hiba, amely elriasztja az ügyfeleket a weboldaláról
Adja meg az e-mail-címét, és azonnal itt megkapja az útmutatót. Spam nélkül.
Szeretné látni, hogyan nézne ki a cége weboldala?
Írjon nekünk WhatsAppon, és ingyen elkészítünk egy bemutató weboldalt a cége nevével. Előbb megnézi, utána dönt — minden kötelezettség nélkül.