A favicon az a kis ikon, amelyet a böngésző a fül címe mellett, a könyvjelzőkben és az előzményekben mutat a weboldalad helyett. Technikailag egy képfájl, amit a HTML <head> szekciójában egy <link rel="icon"> tag jelöl ki, vagy amit a böngésző a domain gyökerében keres /favicon.ico néven.
Hogyan működik
A böngésző minden oldalbetöltéskor keresi az oldal ikonját. Először a <head>-ben lévő <link rel="icon"> vagy <link rel="apple-touch-icon"> tageket nézi meg. Ha egyik sincs, automatikusan lekéri a /favicon.ico címet a domain gyökeréből. Ez az automatikus kérés akkor is lefut, ha soha nem töltöttél fel ilyen fájlt: ilyenkor a szerver 404-et ad vissza, és a fül üres lapot mutat.
Modern oldalakon nem egy fájl van, hanem több. A böngészőfül 16x16 és 32x32 pixeles ikont használ, az iOS kezdőképernyő 180x180-at, az Android telepíthető ikon pedig 192x192 és 512x512 méretet a web app manifestből. Az SVG-favicon egyetlen fájllal fedi le a méreteket, és sötét módban más színt is tud mutatni a prefers-color-scheme médialekérdezéssel.
Mi köze a keresőkhöz és az AI-hoz
A Google a mobil találati oldalon megjeleníti az oldal faviconját az eredmény fölött. Ha nincs, egy szürke alapértelmezett földgömb kerül a helyére. Ez nem rangsorolási tényező, de a találati oldalon látható vizuális jel, ami a kattintási arányt befolyásolja. A Google külön dokumentálja a követelményeit: az ikonnak legalább 8x8 pixelesnek kell lennie, és a méretének 48 többszörösének kell lennie (48x48, 96x96, 144x144 a javasolt).
A generatív keresőknél és az AI-összefoglalókban a favicon a forrásmegjelölés grafikai eleme. Az AI-válaszok alatti hivatkozás-csempéken gyakran csak a favicon és a domain látszik. Ugyanez a logika él az Open Graph képeknél is: a gép valamilyen vizuális azonosítót fog keresni az oldaladhoz, és ha nem adsz neki, generál vagy üresen hagy.
Mikor számít igazán
A favicon hatása önmagában alacsony. Akkor lesz érzékelhető, ha sok fület nyitogató felhasználóid vannak, vagy ha visszatérő látogatókra építesz. A dokumentációs oldalak, SaaS-felületek és webshopok esetében a fül ikonja navigációs segédeszköz. Az is számít, hogy egy hiányzó favicon szemre azonnal feltűnik: ez az első jel a látogatónak, hogy az oldalt nem fejezték be rendesen.
Röviden: a favicon öt perc munka, és minden olyan felületen ott lesz, ahol a márkád kicsiben jelenik meg.
Miért fontos
Felhasználói oldalról
A fül ikonja az egyetlen dolog, ami a márkádból látszik, amikor valakinek 15 fül van nyitva. Szöveg nincs, csak a 16x16 pixeles kép. Ha nincs ikon, a felhasználó nem találja vissza az oldaladat a fülek között.
Keresőből és AI-ból
A Google mobil találati oldalon az eredmény fölött megjelenít egy ikont a domainhez. Ha nem adsz meg favicont, a Google alapértelmezett szürke földgömböt tesz oda. A találati oldalon ez vizuális hátrány a versenytársakhoz képest, akiknek van logójuk.
A generatív keresők forráshivatkozásai szintén faviconnal jelölik a domaint. Az AI-válaszok alatti kis csempéken sokszor csak az ikon és a domain neve fér el.
Bizalmi jel
A riportokban ezt látjuk: ahol hiányzik a favicon, ott jellemzően más alapbeállítás is hiányzik. Az üres fül azt üzeni, hogy az oldalt nem fejezték be. Egy webshopnál ez mérhető bizalmi kérdés.
Költség-haszon
A favicon tipikus gyors győzelem: egy fájl feltöltése és egy sor HTML. Nincs kockázata, nem tör el tőle semmi, és percek alatt kész. Pontosan ezért nem éri meg kihagyni, még ha a hatása alacsony is.
Technikai példa
Minimális, de teljes favicon-blokk a <head> szekcióban. Modern böngészőnek elég az SVG, a régiek és a Google az ICO-t használják.
<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
</head>
A site.webmanifest a telepíthető ikonokat írja le. Az Android kezdőképernyő ezeket használja.
{
"name": "Példa Kft.",
"short_name": "Példa",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Gyors ellenőrzés parancssorból. A státuszkód és a Content-Type fejléc a lényeg.
curl -I https://pelda.hu/favicon.ico
# HTTP/2 200
# content-type: image/x-icon
# cache-control: public, max-age=31536000
Mit néz ebből a riport
Az audit megnézi, hogy a HTML fejlécében van-e favicon-hivatkozás, illetve elérhető-e a fájl. A hatása alacsony, a hatóköre kód: egy sor HTML és egy feltöltött fájl. Az ajánlás ennyi: adj hozzá favicont a <link rel="icon"> taggel.
Gyakori kérdések
Elég, ha csak feltöltöm a favicon.ico fájlt a gyökérbe?
A böngészők többsége megtalálja így is, mert automatikusan lekérik a /favicon.ico címet. Ez viszont csak tartalék mechanizmus. Biztosabb, ha a <head>-ben is kiteszed a <link rel="icon"> taget, mert így te szabod meg a fájl nevét, helyét és méretét.
Milyen méretű képet készítsek?
Indulj egy 512x512 pixeles négyzetes PNG-ből, és abból generálj kisebb változatokat. A Google azt kéri, hogy az ikon mérete a 48 többszöröse legyen, tehát 48x48, 96x96 vagy 144x144. A böngészőfülhöz 16x16 és 32x32 kell, az iOS kezdőképernyőhöz 180x180.
Kicseréltem a favicont, de a régi látszik. Mi a baj?
Szinte biztosan cache. A böngészők sokáig tárolják a favicont, néha a normál cache-ürítés sem elég. Próbáld inkognitó ablakban, vagy nevezd át a fájlt és frissítsd a <link> tagben az utat. A Google találati oldalán a csere hetekbe is telhet.
Befolyásolja a favicon a Google rangsorolást?
Nem, ez nem rangsorolási tényező. Viszont megjelenik a mobil találati oldalon és a generatív keresők forráshivatkozásain. Hiányában szürke alapértelmezett ikont kapsz, ami a kattintási arányodat rontja a versenytársakhoz képest.
SVG-favicont használjak vagy ICO-t?
Mindkettőt. Az SVG egyetlen fájllal minden méretet lefed, és sötét módban más színt is tud mutatni. Az ICO-ra viszont szükség van a régebbi böngészőkhöz és a Google feldolgozásához, ezért a /favicon.ico fájlt is tartsd meg.
