Mi az a favicon, és miért számít a márkád szempontjából?

A favicon az az apró ikon, amely a böngésző fülön jelenik meg, az oldal címe mellett. Alapvetően a logód miniatűr változata: ott látod a Chrome vagy a Safari fülén, a könyvjelzők listájában, a böngészési előzményekben, és egyre gyakrabban közvetlenül a találataid mellett is a Google mobilos keresésében. Apróságnak tűnik, de ez az első vizuális nyom, amit a márkád a saját weboldaladon kívül hagy.

Miért számít a favicon a márkád szempontjából

Képzelj el egy felhasználót, akinek 12 füle van nyitva. Favicon nélkül a füled egy generikus, üres oldal, amit lehetetlen kiszúrni. Faviconnal viszont egy pillantás alatt felismerhető. Ugyanez igaz a könyvjelzőkre is: aki elmentett téged, az ikon alapján talál rád újra, nem a szöveg alapján.

Van egy másik konkrét ok is: a Google mobilos találatai között a favicon az oldal neve mellett jelenik meg. Egy favicon nélküli oldal ott hanyagnak tűnik, míg egy tiszta ikonnal rendelkező oldal komolyabbnak és megbízhatóbbnak hat. Ez nem garantál neked semmilyen rangsorolást (ilyet senki nem ígérhet), de növeli a professzionalizmus benyomását pontosan abban a pillanatban, amikor valaki eldönti, melyik linkre kattintson. Ha fontos számodra, hogyan nézel ki a keresésben, érdemes elolvasnod a helyi SEO útmutatónkat is.

Pontosan hol jelenik meg a favicon

• Böngésző fül — az oldal címe mellett, asztali és mobil eszközökön egyaránt.
• Könyvjelzősáv és kedvencek listája — szavak nélkül is azonosít téged.
• Böngészési előzmények — segít a gyors felismerésben.
• Google találatok mobilon — a domainnév mellett.
• Telefon kijelzője — ha valaki hozzáadja az oldalt a kezdőképernyőjéhez (főleg iPhone-on), az ikon egyfajta "alkalmazássá" válik.
• Parancsikonok és webalkalmazások — Androidon, amikor az oldalt parancsikonként mentik el.

Hogyan készíts favicont a logódból

Az aranyszabály: a favicon nem a teljes logód lekicsinyítve. 16 pixelen egy szöveget is tartalmazó logó olvashatatlan foltba fullad. Ami működik, az egy egyszerű elem — a márka kezdőbetűje, egy szimbólum, egy felismerhető forma — egy jól kontrasztos háttéren.

A gyakorlati lépések:

1. Indulj ki a logódból, de emeld ki belőle a legegyszerűbb elemet (egy betűt, egy piktogramot).

2. Alakítsd négyzet alakúvá, és hagyj körülötte egy kis levegőt, hogy ne tűnjön zsúfoltnak.

3. Teszteld le kicsiben — kicsinyítsd le a képet 16×16 px méretűre a képernyőn. Ha még mindig felismerhető, akkor jó.

4. Generáld le a fájlokat egy ingyenes "favicon generátor" eszközzel: tölts fel egy legalább 512×512 px méretű négyzet alakú képet, és megkapod a teljes készletet.

5. Tedd fel az oldalra: WordPressen a Testreszabás → Webhely azonossága menüpont alatt adhatod hozzá; egy általunk épített oldalon közvetlenül a kódba integráljuk.

Ha nincs egy letisztult logód, pontosan ez az a fajta dolog, amit megoldunk, amikor felépítjük az oldaladat.

Milyen méretekre és formátumokra van szükséged

Nem kell mindet kézzel elkészítened — egy generátor előállítja őket a feltöltött egyetlen képből. De hasznos tudni, hogy melyik mire való:

Néhány gyakorlati szabály, amit a Google dokumentációja és az Evil Martians útmutató (2026) is megerősít: indulj ki egy legalább 512×512 px méretű képből; a Google egy 48×48 px-nél nagyobb favicont javasol, hogy mindenhol jól nézzen ki; iPhone esetén pedig kerüld az átlátszó hátteret, mivel az iOS úgyis fehérrel tölti ki. Az SVG ideális az élességhez, de tartsd meg a .ico fájlt tartalékként is, mivel nem minden régebbi böngésző érti az SVG-t.

Megéri a fáradságot?

Igen, és ez az egyik legolcsóbb márkabefektetés, amit megtehetsz. Egy favicon nem kerül annyiba, mint egy új logó, és egyszer kell megcsinálni. Ha mi építjük fel az oldaladat (Landing 290–490 €, Bemutatkozó oldal 490–890 €, Webshop 690 €-tól), a favicon a csomag része — a logódból generáljuk le, és helyesen telepítjük, a fent felsorolt összes mérettel, hogy neked soha ne kelljen a fájlokkal bajlódnod.

Ha szeretnéd látni, hogyan nézne ki a füled egy megfelelően elkészített faviconnal, írj nekünk WhatsAppon, és készítünk neked egy ingyenes demót: wa.me/40750257140.