Milyen favicon-méretekre van szükséged 2026-ban? Az ideális készlet

2026-ban az ideális favicon-készlet a következő: egy favicon.ico, amely 16, 32 és 48 px-es képeket tartalmaz, egy 96x96-os PNG (a Google Keresőhöz), egy opcionális SVG favicon, egy 180x180-as apple-touch-icon.png, valamint 192x192-es és 512x512-es PNG-k (plusz egy maskable 512-es), amelyeket a webalkalmazás-manifestben (web app manifest) kell megadni. A Windows csempékre és a régi Apple-méretekre csak akkor van szükség, ha nagyon régi eszközöket is támogatnod kell. Az alábbiakban mindenre kitérünk: mérettáblázattal, azonnal használható HTML-lel és a leggyakoribb hibákkal, amelyeket érdemes elkerülni.

A favicon-világ régen kusza volt: minden böngésző és operációs rendszer a saját méretét kérte, ami a hírhedt, 20 soros <head> blokkokat eredményezte. Ma ennek nagy része elavult. A modern böngészők egyetlen jó ikont méreteznek át, az iOS egy méretet kér, az Android pedig a manifestből olvas. Ez a cikk elválasztja azt, ami valóban kell, attól, ami csak jó, ha van.

A rövid válasz: a favicon-fájlok ideális készlete

• favicon.ico (16, 32, 48 px egyetlen fájlban) a webhely gyökerében. A böngészők, hírolvasók és számos eszköz még mindig automatikusan lekérik a /favicon.ico címet.
• favicon.svg (opcionális, de ajánlott) a bármilyen méretben éles megjelenítéshez és a sötét mód támogatásához.
• PNG 16x16, 32x32 és 96x96 kifejezett tartalékként. A 96 px-es változat segíti a Google Keresőt, amely a 48 px többszörösét követeli meg.
• apple-touch-icon.png 180x180-as méretben, átlátszatlanul, átlátszóság nélkül.
• 192x192-es és 512x512-es PNG a manifest.json fájlban, plusz egy maskable 512x512 ikon Androidra.
• theme-color meta tag a böngésző felületének színezéséhez mobilon.
• Windows csempék (70, 150, 310 px) browserconfig.xml fájllal, kizárólag a régi Windowshoz és az IE11 rögzített webhelyeihez.

Favicon-méretek táblázata: cél, fájlnevek és prioritás

Használd ezt a táblázatot ellenőrzőlistaként. A „Kötelező” azt jelenti, hogy egy átlagos webhely enélkül hibásnak vagy befejezetlennek tűnik; az „Ajánlott” egyértelmű minőségjavulást jelent; az „Opcionális” szűk körű vagy régi eszközökre vonatkozik.

favicon.ico: 16, 32 és 48 px egyetlen fájlban

Az ICO fájl egy tároló, amely több bitképet foglal magában. Egy jó favicon.ico tartalmaz 16x16-os, 32x32-es és 48x48-as képeket is, hogy a böngésző vagy az operációs rendszer a legközelebbi találatot választhassa. Helyezd a domain gyökerébe (https://example.com/favicon.ico). Még ha a HTML máshová mutat is, sok crawler, RSS-olvasó és régebbi böngésző továbbra is pontosan ezt az URL-t kéri le, így ha megvan, elkerülöd a felesleges 404-es bejegyzéseket a naplóidban.

Ne egyszerűen nevezz át egy PNG-t .ico kiterjesztésűre. A legtöbb böngésző elfogadja, de egyes eszközök elutasítják, és elveszíted a több felbontás előnyét. Exportálj valódi ICO-t.

PNG faviconok: 16, 32 és 96 px

A kifejezett sizes attribútummal ellátott PNG-hivatkozásokkal a böngésző az ICO feldolgozása nélkül választhatja ki a legjobb bitképet. A gyakorlatban a 32x32 lefedi a nagy felbontású lapokat, a 16x16 pedig ma már szinte felesleges. A 96x96-os méretet érdemes hozzáadni, mert a Google Kereső az eredmények mellett faviconokat jelenít meg, és olyan négyzet alakú ikont vár, amelynek mérete a 48 px többszöröse (48x48, 96x96, 144x144 és így tovább). A 96 px-es fájl élesebb forrást ad a Google-nek, mint egy 48 px-es, amikor a mobilos találatokhoz kicsinyíti.

Tervezési tipp: 16 px-en az apró részletek eltűnnek. Használj határozott, egyszerű formát, erős kontrasztot, és kevés szöveget vagy egyáltalán ne használj. Az ikonodat exportálás előtt finomhangolhatod és megtekintheted a MakeFav szerkesztőben.

SVG favicon és sötét mód

Az SVG favicon egyetlen apró fájl, amely bármilyen képpontsűrűségen éles marad. A Chromium-alapú böngészők és a Firefox támogatják. A Safari támogatása történetileg korlátozott volt, ezért soha ne csak az SVG-re támaszkodj: tartsd meg az ICO és a PNG tartalékokat.

A legnagyobb előnye a témázhatóság. Mivel az SVG tartalmazhat CSS-t, az ikont a felhasználó színsémájához igazíthatod a prefers-color-scheme segítségével:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Vedd figyelembe, hogy a media query a böngésző vagy az operációs rendszer témáját tükrözi, amelyet a lapsáv is használ. Nem követi a saját weboldaladon lévő témakapcsolót.

Egy ismert furcsaság: ha az ICO és az SVG is fel van sorolva, a Chrome az ICO-t választhatja. Ha az ICO-t a sizes="32x32" attribútummal adod meg, az SVG-t pedig utána sorolod fel, a Chrome az SVG-t részesíti előnyben, ahogyan az alábbi kód mutatja.

Apple touch icon: 180x180 és a régi méretek

Amikor a felhasználó hozzáadja az oldaladat az iOS vagy iPadOS kezdőképernyőjéhez, a Safari az apple-touch-icon-t használja. Ma egyetlen 180x180 px-es PNG elég: az iOS lekicsinyíti a régebbi eszközök és az iPadek számára. Nevezd el apple-touch-icon.png-nek, és tedd a gyökérbe; az iOS alapértelmezés szerint akkor is keresi ezt a fájlt, ha nincs link tag.

Az Apple-ikon szabályai:

• Nincs átlátszóság. Az iOS feketével tölti ki az átlátszó képpontokat, így egy átlátszó logó gyakran fekete folttá válik. Adj hozzá egyszínű hátteret.
• Nincsenek lekerekített sarkok. Az iOS a saját lekerekítő maszkját alkalmazza. Teljes négyzetet adj meg.
• Tartsd a fontos tartalmat távol a szélektől, mert a sarkok levágásra kerülnek.

Mikor van szükséged a régi méretekre (57, 72, 76, 114, 120, 144, 152, 167)? Csak akkor, ha az iOS 6-ot vagy korábbit támogatsz, vagy eszközönként pontos képpontvezérlést szeretnél az iPad Pro (167 px) és az iPad (152 px) esetében. 2026-ban szinte minden webhelynek elég a 180x180-as fájl. Az alábbi maximális kompatibilitású beállítás a teljesség kedvéért néhányat tartalmaz.

Android- és PWA-ikonok: 192, 512 és maskable

A Chrome Androidon és a többi PWA-képes böngésző az ikonokat a webalkalmazás-manifestből olvassa, nem a <link rel="icon"> elemből. A telepíthetőséghez legalább egy 192x192-es és egy 512x512-es PNG kell. A 192 px-es ikont a kezdőképernyőn és az alkalmazásindítóban használják; az 512 px-es ikon az indítóképernyőkön és a telepítési párbeszédablakokban jelenik meg.

Maskable ikonok és a biztonságos zóna

Az Android adaptív ikonjait az eszköztől függően körré, squircle-lé vagy más alakzattá lehet vágni. A maskable ikont úgy tervezik, hogy biztonságosan vágható legyen: a fontos tartalomnak a biztonságos zónán belül kell lennie, amely a kép 80%-os átmérőjű, középre igazított köre (a sugár az oldal 40%-a). Egy 512x512-es fájlnál ez azt jelenti, hogy a logót egy körülbelül 410 px átmérőjű körön belül kell tartanod, a háttérszínt pedig mind a négy szélig ki kell terjeszteni, hogy a maszkolás után ne látszódjanak hézagok.

A maskable ikont külön bejegyzésként add meg a "purpose": "maskable" értékkel. Kerüld az "any maskable" használatát egyetlen fájlon: a maszkoláshoz szükséges ráhagyás túl kicsinek tűnik, ha az ikon maszkolás nélkül jelenik meg.

Példa manifest.json

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

A fájlt application/manifest+json (vagy application/json) típussal szolgáld ki, és minden oldalról hivatkozz rá a <link rel="manifest" href="/manifest.json"> elemmel. Egyes projektek site.webmanifest néven használják; a név nem számít, a hivatkozás igen.

Windows csempék és browserconfig.xml

A Windows 8.1 és a 10 lehetővé teszi, hogy a felhasználók a Start menühöz rögzítsenek egy webhelyet, az IE11 és a régi Edge pedig a csempeképeket a browserconfig.xml fájlból olvassa. A szokásos méretek: 70x70 (kicsi), 150x150 (közepes), 310x150 (széles) és 310x310 (nagy). A Chromium-alapú Edge ehelyett a manifestet és a hagyományos faviconokat használja, így ez egy régi funkció. Csak akkor add hozzá, ha a közönséged között még mindig vannak régebbi Windows-környezetek, például vállalati rendszerekben.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: a böngészőfelület színezése

A theme-color meta tag megmondja a mobilböngészőknek (és néhány asztali böngészőnek), hogy milyen színt használjanak a címsorhoz vagy a címsávhoz. Nem favicon, de ugyanahhoz az arculati készlethez tartozik. Megadhatsz külön értékeket a világos és a sötét módhoz:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimális modern beállítás vs. maximális kompatibilitás

Minimális modern beállítás (a legtöbb webhelynek ajánlott)

Öt fájl lefedi a valós használat több mint 99%-át: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) és a két manifest-ikon (192 és 512). Add hozzá a 96x96-os PNG-t, ha számít a Google Keresőben való láthatóság, és egy maskable ikont, ha PWA-t szállítasz.

<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">
<link rel="manifest" href="/manifest.json">

Maximális kompatibilitású beállítás

Ezt válaszd, ha széles vagy vállalati közönséget szolgálsz ki, vagy minden lehetséges klienst le szeretnél fedni. Kifejezett PNG-méreteket, régi Apple-méreteket, Windows csempéket és témaszíneket is hozzáad.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Figyeld meg a / jellel kezdődő, gyökérhez viszonyított útvonalakat. Ezek bármilyen oldalmélységben működnek, ami elvezet a leggyakoribb hibákhoz.

Gyakori favicon-hibák és javításuk

1. Hibás útvonalak

Az olyan hivatkozás, mint a href="favicon.ico", az aktuális URL-hez viszonyítva értelmeződik, így a / címen működik, de a /blog/post/ címen elromlik. Használj gyökérhez viszonyított (/favicon.ico) vagy abszolút URL-eket. Ellenőrizd azt is, hogy a fájlok valóban léteznek: nyisd meg az egyes URL-eket közvetlenül a böngészőben, és győződj meg róla, hogy HTTP 200-at adnak vissza, nem pedig átirányítást egy 404-es oldalra vagy egy bejelentkezési falra.

2. Hiányzó vagy hibás sizes attribútum

A sizes nélkül a böngészőknek le kell tölteniük az ikonokat a vizsgálatukhoz, és rossz ikont választhatnak. Mindig add meg a sizes attribútumot a PNG-hivatkozásokon, és ügyelj rá, hogy megegyezzen a valódi képpontméretekkel. Az a fájl, amelyet 32x32-esnek jelölsz, de valójában 64x64-es, következetlen eredményeket okoz.

3. Agresszív gyorsítótárazás

A böngészők sokáig gyorsítótárazzák a faviconokat, gyakran az oldal gyorsítótárától függetlenül. Egy arculatváltás után a régi ikon napokig megmaradhat. Változtasd meg a fájlnevet, vagy adj hozzá verziójelölő lekérdezési karakterláncot (/favicon.ico?v=2), és frissítsd a link tageket. A kényszerített újratöltés gyakran nem frissíti a lapikont; az ikon URL-jének közvetlen megnyitása és újratöltése általában igen.

4. Nem négyzet alakú képek

A faviconoknak négyzet alakúnak kell lenniük. Egy téglalap alakú logó kiszámíthatatlanul megnyúlik, levágódik vagy sávokat kap. Tervezz külön négyzet alakú jelet, például egy kezdőbetűt vagy szimbólumot, ahelyett, hogy egy széles szóképet kicsinyítenél.

5. Az átlátszó Apple touch iconok feketévé válnak

Az iOS feketével tölti ki az átlátszóságot. Adj a 180x180-as ikonnak átlátszatlan hátteret, és ne kerekítsd előre a sarkokat.

6. Maskable ikonok biztonságos zóna nélkül

Ha a logó egy maskable ikon széleit érinti, az Android levágja. Tartsd a középső 80%-os körön belül, és töltsd ki a teljes vásznat a háttérszínnel.

7. Az ikonok blokkolása a crawlerek elől

Ha a robots.txt tiltja a favicon útvonalát, a Google nem tudja letölteni, és általános földgömb ikont fog mutatni a keresési találatokban. Ne feledd azt sem, hogy a Google-nek a faviconra ugyanazon a hoszton van szüksége, mint az oldalra, és csak időnként frissíti, így a változások megjelenése napokig vagy hetekig is eltarthat.

8. A manifest-hivatkozás vagy a purpose értékek elfelejtése

Egy nem hivatkozott manifest, vagy az, amelyből hiányoznak a 192 és 512 px-es ikonok, megakadályozza a telepítési felszólítást a Chrome-ban. Ellenőrizd a böngésző fejlesztői eszközeiben az Application (Alkalmazás) lapon.

Az egész készlet előállítása egyetlen kattintással

Egy tucat fájl kézi elkészítése képszerkesztőben, majd ICO-vá alakítása és a manifest megírása fárasztó és hibalehetőségekkel teli. A MakeFav egyetlen képből, szövegből vagy emojiból előállítja a fenti összes fájlt: többméretű favicon.ico, PNG-k, SVG, Apple touch icon, 192/512-es PNG-k, maskable ikon, Windows csempék, manifest.json és browserconfig.xml, valamint egy beillesztésre kész HTML-részlet, mindez egyetlen ZIP-letöltésben. A szerkesztőben finomhangolhatod a hátteret, a ráhagyást és az alakzatot, egy meglévő webhelyet ellenőrizhetsz a favicon-ellenőrzővel, a generálást pedig automatizálhatod a fejlesztői erőforrások segítségével.

Üzembe helyezési ellenőrzőlista

1. Töltsd fel az összes fájlt a webhelyed gyökerébe.
2. Illeszd be a HTML-részletet minden oldal <head> elemébe (vagy a közös elrendezésedbe).
3. Győződj meg róla, hogy az útvonalak gyökérhez viszonyítottak, és HTTP 200-at adnak vissza.
4. Ellenőrizd a világos és a sötét módot, egy iOS-es kezdőképernyős telepítést és egy Android-telepítést.
5. Futtasd le az ellenőrzőt, hogy kiszűrd a hiányzó vagy eltérő méreteket.
6. Ha régi ikont cseréltél, ürítsd a gyorsítótárat egy verziójelölő karakterlánccal.

Gyakran ismételt kérdések

Kell még favicon.ico 2026-ban?

Igen. Bár a modern böngészők elfogadják a PNG-t és az SVG-t, sok crawler, hírolvasó, e-mail kliens és régebbi böngésző még mindig közvetlenül a /favicon.ico címet kéri le. A 16, 32 és 48 px-es képeket tartalmazó, többméretű ICO kis fájl, amely megelőzi a hiányzó ikonokat és a 404-es hibákat.

Milyen méretű legyen a favicon a Google Keresőhöz?

A Google olyan négyzet alakú faviconot követel meg, amelynek mérete a 48 px többszöröse, legalább 48x48. A 96x96-os PNG biztonságos választás, és az SVG is támogatott. A Google azt is megköveteli, hogy a fájl feltérképezhető legyen, ezért ne blokkold a robots.txt fájlban. A frissítések megjelenése napokig vagy hetekig is eltarthat.

Elég a 180x180 az Apple touch iconhoz?

Szinte minden webhelynél igen. Az iOS és az iPadOS minden jelenlegi eszközhöz lekicsinyíti a 180x180-as PNG-t. A régebbi méretek (57–152 px) csak nagyon régi iOS-verzióknál számítanak. Ne felejts el átlátszatlan hátteret használni, hogy az ikon ne váljon feketévé.

Mi az a maskable ikon, és kell-e nekem?

A maskable ikon egy 512x512-es PNG, amelyet az Android adaptív ikonformáihoz terveztek. A fontos tartalma a középen lévő, 80%-os átmérőjű körön belül van, a háttér pedig kitölti az egész négyzetet. Csak akkor van rá szükséged, ha telepíthető PWA-t kínálsz, de ettől az ikon natívnak hat, ahelyett, hogy egy fehér körben ülne.

Miért látszik még mindig a régi faviconom, miután megváltoztattam?

A böngészők külön és hosszú ideig gyorsítótárazzák a faviconokat. Nevezd át a fájlt, vagy adj hozzá verziójelölő lekérdezési karakterláncot, például ?v=2, frissítsd a link tageket, majd nyisd meg közvetlenül az ikon URL-jét, és töltsd újra. A keresőmotoroknak tovább tarthat a saját példányuk frissítése.