Favicon

A favicon az a kis ikon, amely a webböngészőben a lapfüleken (tabokon) a weboldal neve mellett megjelenik.

Miért nem hagyhatod le egy weboldalról?

Azonosíthatóság: Ha a felhasználónak 20 lap van megnyitva a böngészőjében (ami valljuk be, gyakori), a szöveg már nem látszik, vagy csak az első betűk. Csak a favicon alapján tudja, melyik lapra kell kattintania.

Hitelesség és profizmus: Egy favicon nélküli oldal befejezetlennek, amatőrnek tűnik (a böngészők ilyenkor egy üres földgömböt vagy lap ikont tesznek ki helyette).

Márkatudatosság: Erősíti a logód vagy a márkád vizuális jelenlétét.

A faviconok méretei (2026-os szabványok)

Régebben elég volt egyetlen apró ikont feltölteni. Ma viszont a kijelzők (Retina, 4K) és az eszközök (PC, Mac, iPhone, Android) sokszínűsége miatt több méretre és formátumra van szükség, hogy az ikon mindenhol egységesen tudjon működni.

A legfontosabb méretek:

• 16 × 16 px: A klasszikus méret, ez jelenik meg a böngészők fülén.

• 32 × 32 px: A könyvjelzők sávjában és az asztali parancsikonoknál használatos.

• 48 × 48 px: A Google keresőmotorja ezt a méretet (vagy ennek többszörösét) tartja optimálisnak a keresési találati listához.

• 180 × 180 px: Apple Touch Icon. Ha egy iPhone vagy iPad felhasználó elmenti a weboldaladat a kezdőképernyőjére (mint egy applikációt), ez az ikonméret fog számára megjelenni.

• 192 × 192 px és 512 × 512 px: Android eszközök és a PWA-k (Progresszív Webes Alkalmazások) számára szükséges méretek.

Formátumok: .ico, .png vagy .svg?

Formátum	Előnyök	Hátrányok	Mikor használd?
.ico	Univerzális, a legrégebbi böngészők is kezelik. Egyetlen .ico fájlba több különböző méretű képet is be lehet csomagolni.	Elavult technológia, nagyobb fájlméret, nem támogatja a modern effekteket.	Kötelező biztonsági tartaléknak a régi böngészők (pl. Internet Explorer maradványok) miatt.
.png	Támogatja az átlátszóságot (transzparencia), szép színeket produkál, könnyű létrehozni.	Pixelgrafikus, így ha túlnyújtják, elmosódhat. Minden mérethez külön fájl kell.	A mai napig a legelterjedtebb, standard megoldás.
.svg	Vektoros, vagyis végtelenül nagyítható anélkül, hogy veszítene a minőségéből. Szuper kicsi a fájlmérete. Támogatja a Sötét/Világos módhoz alkalmazkodó színeket.	Nagyon régi böngészők nem kezelik.	A modern favicon tervezés abszolút nyertese. Ha teheted, használj SVG-t a fő ikonnak!

Hogyan tervezz jó favicont?

Mivel a favicon többnyire mikroszkopikus méretben (16×16 pixel) jelenik meg, a tervezése speciális megközelítést igényel:

Egyszerűsíts a végletekig! A teljes logód szinte biztosan olvashatatlan lesz ekkora méretben. Inkább csak a logód első betűjét (pl. Facebook "f", Pinterest "P") vagy a logó legkarakteresebb grafikus elemét (pl. Nike -> pipa) használd!

Használj átlátszó hátteret! A kör vagy szabálytalan alakú ikonok mögött legyen átlátszó a háttér (transzparens PNG vagy SVG), hogy szépen illeszkedjen a böngészőfül színéhez (ami lehet szürke, fehér vagy fekete is, a felhasználó beállításai alapján)!

Készülj fel a Sötét módra (Dark mode)! Ha a logód fekete, és átlátszó a háttere, a sötét módot használó böngészőkben (ahol a fül fekete) teljesen láthatatlanná válik. Adj neki egy vékony fehér kontúrt, vagy használj SVG formátumot, ami CSS segítségével automatikusan invertálja a színeit, ha a felhasználó sötét módot használ!

Teszteld kicsiben! Tervezés közben folyamatosan kicsinyítsd le a képernyődön 16×16 pixelre! Ha ott már csak egy paca látszik, túl bonyolult a dizájnod.

💡 Pro Tipp: Nem kell manuálisan legyártanod a 10 különböző méretű PNG fájlt. Léteznek ingyenes online generátorok (pl. RealFaviconGenerator vagy Favicon.io). Csak feltöltöd a logód nagy felbontású verzióját, és a rendszer egyetlen kattintásra legenerálja az összes méretet, a hozzátartozó HTML kóddal együtt.