Mi az a favicon, és miért fontos a weboldalad számára?

A favicon (az angol „favorite icon”, vagyis „kedvenc ikon” rövidítése) az a kis négyzet alakú kép, amely a weboldalt képviseli a böngészőfüleken, könyvjelzők között, az előzményekben, a Google keresési találatai között, a telefonok kezdőképernyőjén és a telepített webalkalmazásokban. Azért fontos, mert egy pillantással felismerhető arcot ad az oldalnak, megkönnyíti a megtalálását sok megnyitott fül között, azt sugallja, hogy az oldal professzionális és megbízható, és ma már a Google találataiban is az oldalnév mellett jelenik meg. Favicon nélkül a látogatók egy általános földgömb- vagy üres oldal ikont látnak, a szervered naplóiban pedig 404-es hibák gyűlnek. Teljes favicon-készletet ingyen készíthetsz a MakeFav favicon generátorral.

Mi az a favicon?

A favicon egy apró, márkázott grafika, jellemzően a logó leegyszerűsített változata vagy egyetlen betű vagy szimbólum, amelyet a böngészők és más szoftverek letöltenek a weboldaladról, és mindenhol megjelenítenek, ahol egy kompakt vizuális azonosítóra van szükség. Asztali böngészőben általában 16×16 CSS pixeles méretben jelenik meg, de maga a fájl legyen nagyobb, hogy a nagy pixelsűrűségű kijelzőkön is éles maradjon.

Technikailag a favicon csak egy képfájl, amelyre a HTML-ből hivatkozunk (vagy egy alapértelmezett helyen található), és amelyet a felhasználói ügynökök az oldal tartalmától külön töltenek le. Manapság a „favicon” ritkán egyetlen fájl. Egy modern oldal általában ugyanabból az ikonból több változatot is kiszolgál, hogy a böngészők, keresőmotorok, az iOS és az Android is a nekik megfelelő formátumot és méretet kapják.

A favicon rövid története

A favicon 1999 márciusáig nyúlik vissza, amikor a Microsoft kiadta az Internet Explorer 5-öt. A böngésző lehetővé tette az oldalak mentését a „Kedvencek” listájába, és az oldal gyökerében kereste a favicon.ico nevű kis ikonfájlt, hogy megjelenítse az egyes mentett bejegyzések mellett. Az ötlet egyszerű volt: ha egy oldal szolgáltatott /favicon.ico fájlt, az ikon megjelent a könyvjelző mellett.

Más böngészők hamarosan átvették a funkciót, a füles böngészés pedig sokkal hasznosabbá tette. Ahogy a fülek lettek a navigáció fő eszközei, a favicon a könyvjelzők dekorációjából alapvető navigációs segédeszközzé vált. Az évek során a megoldás fejlődött:

• A 2000-es évek eleje: a <link rel="icon"> elem lehetővé tette, hogy az oldalak bármilyen URL-en lévő ikonra hivatkozzanak, nem csak a gyökérben lévőre, és az IE-n kívüli böngészők elkezdték elfogadni a PNG és GIF fájlokat.
• A 2010-es évek: az Apple bevezette az apple-touch-icon ikont az iOS kezdőképernyőihez, az Android és a Windows pedig saját konvencióikat, például manifest ikonokat és csempeképeket.
• Ma: az SVG faviconok, a webalkalmazás-manifestek, a sötét módot figyelembe vevő ikonok és a Google keresési találatokra vonatkozó favicon-követelményei miatt a favicon az oldal technikai felépítésének kicsi, de valódi részévé vált.

Hol jelennek meg ma a faviconok

A favicon sokkal több helyen látható, mint a böngészőfülön. A legfontosabbak:

• Böngészőfülek: a legláthatóbb hely, ahol az ikon gyakran az egyetlen, amit látsz, ha sok fül van megnyitva.
• Könyvjelzők és kedvencek: az ikon az oldal címe mellett áll a könyvjelzősávokban és menükben.
• Előzmények és leggyakrabban látogatott oldalak: a böngészők az előzmények listáján és az új fül oldalán is megjelenítik a faviconokat.
• Google keresési találatok: mobilon és asztali gépen egyaránt a Google az oldal faviconját az oldalnév és az URL mellett jeleníti meg.
• Kezdőképernyők: amikor egy látogató iOS-en vagy Androidon a kezdőképernyőre teszi az oldaladat, a touch ikon vagy a manifest ikon lesz az alkalmazásszerű parancsikon.
• Telepített PWA-k: a progresszív webalkalmazások a webalkalmazás-manifestben megadott ikonokat használják az indítóikonhoz, az indítóképernyőhöz és a feladatváltóhoz.
• Windows-csempék és kitűzött oldalak: a régebbi Windows- és Edge-verziók a kitűzött oldalakhoz megadott csempeképeket használták; a modern verziók többnyire a szokásos ikonjaidat használják újra.
• Hivatkozás-előnézetek egyes alkalmazásokban: bizonyos chat- és produktivitási eszközök (jól ismert példa a Slack) az oldal faviconját jelenítik meg a kibontott hivatkozás mellett. A legtöbb előnézet főként az Open Graph képekre támaszkodik, de a kis márkajelet gyakran a favicon adja.

Miért fontos a favicon a weboldaladnak

Márkafelismerés

Az emberek gyorsabban ismerik fel a színeket és az alakzatokat, mint ahogy elolvassák a szöveget. Egy következetes ikon, amely ismétlődik a füleken, könyvjelzők között és a keresési találatokban, minden alkalommal ismerősséget épít, ami ingyenes márkaexpozíció minden látogatáskor.

Bizalom és hitelesség

A hiányzó favicon befejezetlennek láttatja az oldalt. Egy tiszta, helyesen megjelenő ikon kis jelzés arról, hogy valaki odafigyel a részletekre, ami erősíti azt a benyomást, hogy az oldal legitim. Ez nem biztonsági funkció, és az adathalász oldalak is lemásolhatják az ikonokat, de egy üres alapértelmezett ikon ritkán segít abban, hogy egy vállalkozás megalapozottnak tűnjön.

Átkattintási arány a keresési találatokban

Mivel a Google a favicont a találatod mellett jeleníti meg, az része lesz annak, hogyan néz ki az eredményed a versenytársakéi mellett. A Google nem közöl rangsorolási hatást a faviconokra vonatkozóan, ezért ne számíts rangsorjavulásra. Az előny a vizuális felismerésben rejlik: azok a felhasználók, akik ismerik az ikonodat, nagyobb eséllyel veszik észre és választják a te találatodat, különösen mobilon, ahol a találatok tömörek.

Használhatóság sok megnyitott fül mellett

Amikor egy böngészőben húsz fül van nyitva, a címek semmivé rövidülnek, és csak a favicon marad. Egy megkülönböztethető ikon lehetővé teszi, hogy az emberek azonnal megtalálják a füledet, és visszatérjenek hozzá ahelyett, hogy újat nyitnának vagy elfelejtenék.

Professzionális benyomás

Egy jól megtervezett favicon ugyanazt a részletekre való odafigyelést mutatja, mint az oldalad többi része. Termékoldalaknál, dokumentációknál, blogoknál és webalkalmazásoknál egyaránt az egyik legolcsóbb csiszolási lehetőség.

A fülek megtalálásának akadálymentessége

Az ikonok segítenek azoknak a felhasználóknak, akik inkább vizuálisan pásztáznak, mint olvasnak, például a diszlexiával vagy kognitív eltérésekkel élőknek, és mindenkinek, aki gyorsan vált a feladatok között. Egy nagy kontrasztú, egyszerű formájú ikont könnyebb kiszúrni. Ne feledd azonban, hogy a favicon kiegészítő: nem helyettesíti az érthető oldalcímet, amelyre a képernyőolvasók és a kisegítő technológiák támaszkodnak.

Mi történik, ha nincs faviconod

A böngészők automatikusan lekérik a /favicon.ico fájlt a domained gyökeréből, akkor is, ha a HTML-ed nem említ ilyet. Ha a fájl nem létezik, több dolog történik:

• Általános ikon: a látogatók alapértelmezett földgömb-, dokumentum- vagy üres ikont látnak a fülön és a könyvjelzők között, ami anonimnak tűnik.
• 404-es hibák a naplóidban: minden böngésző, amely kéri a fájlt, sikertelen kérést generál. Forgalmas oldalakon ez zajt visz a hozzáférési naplókba, a hibafigyelésbe és az analitikába, és elrejtheti a valódi problémákat.
• Nincs ikon a Google-találatokban: érvényes, bejárható favicon nélkül a Google az alapértelmezett helyőrzőjét mutatja a találatod mellett.
• Felesleges kérések: a böngészők újra próbálkozhatnak, ami kicsi, de értelmetlen terhelést ad a szerverednek.

Még egy nagyon egyszerű ikon is jobb a semminél, mert megszünteti a 404-eseket, és a felhasználóknak is ad valami felismerhetőt.

A favicon-formátumok bemutatása

Egyetlen formátum sem fed le minden platformot, ezért a legtöbb oldal fájlok egy kisebb készletét használja.

A régi Windows-csempeképekre (amelyeket a browserconfig.xml fájlon keresztül kellett beállítani) az Internet Explorer 11-hez és a régi Edge-hez volt szükség. Ma ritkán szükségesek, kivéve, ha ezeket a környezeteket is támogatnod kell.

A Google favicon-irányelvei a keresési találatokhoz

Ha azt szeretnéd, hogy az ikonod megjelenjen a Google Keresőben, kövesd a Google közzétett követelményeit:

• Méret: a képnek négyzet alakúnak (1:1) kell lennie, és a méretének 48 pixel többszörösének, például 48x48, 96x96 vagy 144x144. A Google ezután megjelenítéshez 16x16-ra kicsinyíti. A minimálisan támogatott méret 8x8, de a 48x48-as vagy nagyobb méret ajánlott.
• Formátumok: bármely, a böngészők által támogatott formátum megfelel, beleértve az ICO, PNG és SVG formátumot is.
• Stabil URL: ne változtasd gyakran a favicon URL-jét. A stabil cím segít a Google-nek naprakészen tartani az ikonodat.
• Bejárható: mind a favicon fájlnak, mind a főoldalnak elérhetőnek kell lennie a Googlebot számára. Ne tiltsd le őket a robots.txt fájlban, és ne tedd őket bejelentkezés mögé.
• Egy deklaráció oldalanként: az ikon az oldal főoldalához kötődik, ezért a <link> címkét a főoldalad head részébe tedd.
• Reprezentatív és megfelelő: az ikonnak tükröznie kell a márkádat, és a Google lecserélheti az alapértelmezettre azt, amely sértő vagy félrevezető.

Miután közzétettél vagy módosítottál egy faviconot, a Google-nek napokba vagy hetekbe telhet az újrabejárás és a frissítés, ezért ne várj azonnali változást.

Hogyan készíts gyorsan faviconot a MakeFavval

Nincs szükséged tervezőszoftverre vagy parancssorra. A MakeFav generátor egyetlen forrásképből elkészíti a fent leírt fájlokat.

1. Készítsd elő a grafikát. Használj négyzet alakú logót vagy szimbólumot 512 x 512 px vagy nagyobb méretben. Az egyszerű formák működnek a legjobban, mert az ikont 16 px-en fogják látni.
2. Töltsd fel a MakeFav főoldalán, vagy nyisd meg a szerkesztőt, hogy exportálás előtt módosítsd a képet, a hátteret és a margót.
3. Nézd meg az előnézetet kis méretekben, világos és sötét háttéren, hogy megbizonyosodj arról, hogy olvasható marad.
4. Töltsd le a csomagot. Tartalmazza az ICO-t, a PNG méreteket, az Apple touch ikont, a manifest ikonokat és a beillesztendő HTML-részletet.
5. Töltsd fel a fájlokat a weboldalad gyökerébe, hogy elérhetők legyenek olyan útvonalakon, mint a /favicon.ico.
6. Add hozzá a HTML-t minden oldal <head> részéhez, vagy a közös elrendezésedhez vagy sablonodhoz.
7. Ellenőrizd a favicon-ellenőrzővel, majd töröld a böngésző gyorsítótárát, és töltsd újra az oldalt, hogy lásd az új ikont.

Példa HTML-részlet

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Az ICO hivatkozás sizes="48x48" attribútuma segít abban, hogy a böngészők az SVG-t részesítsék előnyben, ha támogatják, miközben az ICO megmarad tartalékként. A 96 px-es PNG megfelel a Google 48 többszörösére vonatkozó szabályának.

Példa webalkalmazás-manifestre

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Ha build-folyamatokkal dolgozol, vagy automatizálni szeretnéd az ikonkészítést, nézd meg a fejlesztői forrásokat.

Tervezési tippek a jól működő faviconhoz

• Légy egyszerű. Egyetlen forma, egy betű vagy egy merész monogram jobb, mint egy részletes logó, amely 16 px-en péppé válik.
• Használj erős kontrasztot. Győződj meg róla, hogy az ikon látható a világos és a sötét böngészőtémákon is. Segít egy színes háttércsempe.
• Kerüld a szöveget. Egyetlen kezdőbetű rendben van; a szavak ebben a méretben olvashatatlanok.
• Hagyj egy kis margót a maszkolható és lekerekített sarkú ikonokhoz, hogy semmi fontos ne vágódjon le.
• Maradj következetes a logóddal és a márkaszíneiddel, hogy a favicon erősítse a felismerést.
• Teszteld valódi eszközökön, és nézd meg, hogyan néz ki egy fülön, egy könyvjelzőn és egy Google-találatban.

Gyakori favicon-problémák

Ha az ikonod nem jelenik meg, a szokásos okok a gyorsítótárazás, a hibás útvonalak és a blokkolt fájlok. A böngészők agresszíven gyorsítótárazzák a faviconokat, ezért a frissítések megtekintéséhez gyakran elég egy kemény frissítés vagy egy új privát ablak. Ellenőrizd, hogy a fájl URL-je 200-as állapotkódot és a megfelelő tartalomtípust ad-e vissza, és hogy a <link> címke a <head> részben van-e. A kereséshez győződj meg arról, hogy a robots.txt nem tiltja le az ikont vagy a főoldalt. A MakeFav ellenőrző segíthet gyorsan kiszúrni ezeket a problémákat.

Gyakran ismételt kérdések

Mit jelent a favicon szó?

A favicon a „favorite icon”, vagyis „kedvenc ikon” rövidítése. A név az Internet Explorer 5-ből ered, amely 1999-ben először használt egy kis ikonfájlt a böngésző Kedvencek listájának bejegyzései díszítésére. A kifejezés megmaradt, bár az ikon ma már sok más helyen is megjelenik.

Segít a favicon a SEO-ban?

A favicon nem közvetlen rangsorolási tényező. Ugyanakkor megjelenik az oldalad neve mellett a Google találataiban mobilon és asztali gépen is, így javíthatja a márkafelismerést és a találatod vizuális vonzerejét, ami közvetve támogathatja a kattintásokat. Az ikon megjelenéséhez a Google irányelveinek követése teszi jogosulttá.

Milyen méretű legyen a favicon?

A Google Keresőhöz használj négyzet alakú képet, amelynek mérete 48 pixel többszöröse, például 48x48 vagy 96x96. A szélesebb lefedettséghez adj meg egy ICO fájlt, egy 180x180-as Apple touch ikont, valamint 192x192-es és 512x512-es manifest ikonokat is. A skálázhatóság miatt az SVG jó kiegészítés.

Szükségem van még a favicon.ico fájlra, ha PNG-t vagy SVG-t használok?

Továbbra is jó ötlet. A böngészők és egyes eszközök alapértelmezés szerint kérik a /favicon.ico fájlt, és a régebbi szoftverek erre támaszkodnak. Az ICO fájl megtartása az oldal gyökerében megelőzi a 404-es hibákat, és biztonságos tartalékot ad arra az esetre, ha az SVG vagy a PNG nem támogatott.

Miért nem frissül a faviconom?

A böngészők és a keresőmotorok hosszú ideig gyorsítótárazzák a faviconokat. Próbálj ki egy kemény frissítést, egy privát ablakot, vagy töröld a gyorsítótárat. Győződj meg arról, hogy a fájl útvonala helyes, és az új fájl van kiszolgálva. A Google Keresőben a módosított ikon újrabejárása és frissítése napokat vagy heteket vehet igénybe.