Mi az a favicon, és hogyan készítsünk egyet a logónkból (2026)

A favicon az az apró ikon, amely a webhelyét képviseli egy böngészőfülön, egy könyvjelzőn vagy egy telefon kezdőképernyőjén. Készítse el a logó szimbólumából, egyszerűsítse úgy, hogy 16–32 pixelen is olvasható legyen, és szállítsa a minimális 2026-os fájlkészletet: egy SVG-t, egy ICO tartalékfájlt és egy 180×180-as apple-touch-icont.

Szerző LogoSagaKözzétéve
Ezen az oldalon
  1. Mi az a favicon?
  2. Miért számít egy favicon?
  3. A szükséges favicon méretek és formátumok
  4. Hogyan készítsünk favicont a logónkból
  5. Favicon hivatkozása a HTML-ben
  6. Bónusz: sötét módhoz alkalmazkodó favicon
  7. A favicon tesztelése
Ugyanaz a jel favicon méretekben megjelenítve, köztük egy böngészőfül méretű változatban.
A favicon a logó jele, olyan mértékig egyszerűsítve, hogy apró méretben is tiszta maradjon.

Mi az a favicon?

A favicon (a „favorite icon”, azaz „kedvenc ikon” rövidítése) az a kis négyzet alakú kép, amely egy weboldalt képvisel egy böngészőfülön, egy könyvjelzőn, egy előzménybejegyzésen és egy telefon kezdőképernyőjén. Szinte mindig egy márka logójának egyszerűsített változata — pontosabban a jelé, mivel abban a méretben nincs hely a teljes névnek.

Miért számít egy favicon?

A favicon egy kicsi, de állandó márkaépítő elem. Egy tucat nyitott fül mellett gyakran ez az egyetlen mód arra, hogy valaki egy pillantással megtalálja a webhelyét, egy kezdőképernyőre mentett ikon pedig kidolgozott alkalmazásikonok mellett jelenik meg. Egy éles, márkahű favicon átgondoltnak tűnik; egy hiányzó vagy elmosódott befejezetlennek.

A szükséges favicon méretek és formátumok

Nincs szükség arra a tucatnyi ikonra, amelyet a régi útmutatók listáznak. 2026-ban a minimális, megbízható készlet kicsi:

FájlMéretCél
favicon.svgbármilyenmodern böngészők; alkalmazkodhat sötét módhoz
favicon.ico16 + 32régi tartalék (régebbi böngészők)
apple-touch-icon.png180×180iOS kezdőképernyő
PWA ikonok (opcionális)192, 512telepíthető webalkalmazások

A régebbi útmutatók által ajánlott méretek, mint a 64×64, a 96×96 és a 128×128, elavultak — hagyja ki ezeket. Az .ico egy tartalékfájl, nem a fő fájl: az SVG-t támogató böngészők azt fogják előnyben részesíteni.

Hogyan készítsünk favicont a logónkból

  1. Induljon a jelből, ne a teljes logóból — a név nem lesz olvasható fülméretben.
  2. Egyszerűsítsen az apró méretekhez. Hagyja el az apró részleteket, a vékony vonalakat és a finom átmeneteket, amelyek eltűnnek 16–32 pixelen. Részesítse előnyben a határozott formákat és a magas kontrasztot.
  3. Tartsa négyzet alakban, kis kitöltéssel, hogy ne szoruljon a fül szélei közé.
  4. Exportálja a készletet — SVG, ICO és a 180×180-as PNG — a logó vektoros mesterfájljából.
A LogoSaga szerkesztő exportlépése, amely a favicon.svg-t a logófájlok között mutatja.
A vektoros mesterfájlból való exportálás olyan favicont ad, amely pontosan megegyezik a logóval.

Mivel az SVG az ideális mesterformátum, érdemes megismerni az SVG-t és a PNG-t logókhoz, mielőtt exportálna.

Favicon hivatkozása a HTML-ben

Mutasson a fájlokra az oldalak <head> részéből. Egy modern, minimális készlet így néz ki:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Az SVG-t támogató böngészők azt használják; a többi visszaesik az ICO-ra.

Bónusz: sötét módhoz alkalmazkodó favicon

Egy SVG favicon saját sötét módú stílust is hordozhat. Ágyazzon be egy médialekérdezést az SVG-be, hogy a jel a böngésző témájával együtt váltson színt:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

A Chrome, a Firefox és az Edge figyelembe veszi ezt; a Safari még nem, ezért válasszon olyan színeket tartalékként, amelyek mindkét témában jól olvashatók.

A favicon tesztelése

Ellenőrizze egy valódi böngészőfülön, világos és sötét módban, valamint egy telefon kezdőképernyőjén. Mivel a böngészők erősen gyorsítótárazzák a faviconokat, minden módosítás után frissítsen erőteljesen — vagy törje meg a gyorsítótárat a fájl átnevezésével vagy egy ?v=2 hozzáadásával. Ha fülméretben zavarosnak tűnik, egyszerűsítse tovább a jelet: a favicon az őszinte próbája annak, mennyire jól egyszerűsíthető egy logó.

Ha a logóját a LogoSaga segítségével építi, az export már tartalmazza a favicon.svg-t a logó SVG-je és PNG-je mellett, így a favicon mindig pontosan megegyezik a jellel.

Készítsen logót hozzáillő faviconnal

Gyakori kérdések

Milyen méretű legyen egy favicon?

Biztosítson egy skálázható SVG-t, plusz PNG raszterméreteket: a 32×32 a modern fülméret szabvány, a 16×16 a klasszikus kis méret, a 180×180 pedig az Apple touch ikon. A PWA-khoz 192×192 és 512×512 is szükséges.

Milyen formátumú legyen egy favicon — SVG, PNG vagy ICO?

Használjon SVG-t a modern böngészőkhöz, ICO-t régi böngészőkhöz tartalékként, és PNG-ket az apple-touch-iconhoz és a PWA méretekhez. Az SVG skálázható, és akár sötét módhoz is alkalmazkodhat; az ICO a régebbi böngészőket fedi le.

Változhat egy favicon sötét módban?

Igen, SVG faviconnal. Ágyazzon be egy prefers-color-scheme médialekérdezést az SVG-be, hogy meghatározza a világos és sötét színeket. A Safari ezt még nem veszi figyelembe, ezért válasszon olyan semleges színt, amely mindkettőn jól olvasható.

Miért nem jelenik meg vagy nem frissül a faviconom?

A böngészők agresszíven gyorsítótárazzák a faviconokat. Módosítás után frissítsen erőteljesen, vagy törje meg a gyorsítótárat a fájl átnevezésével vagy egy lekérdezési karakterlánc, például a favicon.svg?v=2 hozzáadásával, és ellenőrizze, hogy az oldal fejlécében lévő link-tagek helyesek-e.

Forrás