Ingyenes favicon-generátor minden platformhoz

A favicon-generátor megspórolja a weboldal márkázásának fárasztó részét: ugyanannak a logónak a hat méretre exportálását, minden fájl helyes elnevezését, és a címkék megírását, amelyek megmondják minden platformnak, hol találja meg őket. A favicon kicsi, de messzire jut. Ott van a böngészőfülekben, a könyvjelzőkben és az előzményekben, a telefonok kezdőképernyőjén, valamint a webhelyneved mellett a Google-találatokban, ahol a Google legalább 8x8 pixeles négyzet alakú ikont kér, és a 48x48-nál nagyobbat ajánlja (Google Search Central, favicon a keresési találatokban).

Hogyan használd a favicon-generátort?

Húzz ide egy PNG, JPG vagy SVG fájlt, lehetőleg 512x512 pixeles vagy annál nagyobb méretűt. A generátor minden méretben vászonra rajzolja a képedet, kiemelkedő simítással, és a hat eredményt egymás mellett mutatja.

1. Készíts négyzet alakú forrást. Az eszköz minden négyzetes méretre átméretezi a képet anélkül, hogy levágná, ezért a téglalap alakú logó megnyúltnak látszana. Előbb vágd négyzetre, a jel körül hagyj egy kis szegélyt.
2. Húzd ide a fájlt, vagy kattints a kiválasztásához. Az előnézet másodpercen belül megjelenik.
3. Töltsd le a csomagot a „Összes letöltése (.zip)” gombbal, vagy az egyes PNG fájlokat külön-külön.
4. Másold be a HTML-kódot minden oldal <head> részébe, általában a sablonodba.
5. Másold ki a manifestet, töltsd ki a name és a short_name mezőt a márkáddal, majd mentsd site.webmanifest néven a webhelyed gyökerébe.
6. Töltsd fel a fájlokat a gyökérbe, a domain gyökerébe, hogy a /favicon-32x32.png és a kód többi útvonala működjön.

Mivel a feldolgozás a böngészőben történik, a generátor olyan nem kiadott logókkal és ügyféltől kapott fájlokkal is működik, amelyeket nem küldhetsz harmadik fél szerverére.

Milyen favicon-méretekre van szükséged 2026-ban?

Hat PNG fájl fedi le a böngészőket, az iOS-t, az Androidot és a Windowst. A táblázat felsorolja, mit készít a generátor, hol jelenik meg az egyes fájl, és melyik címke vagy fájl hivatkozik rá.

A 192-es és 512-es pár nem véletlen: a Chromium-alapú böngészőknél a webalkalmazás-manifesztnek legalább egy 192x192-es és egy 512x512-es ikont kell tartalmaznia, a Chrome pedig a többi helyhez méretezi őket (web.dev, webalkalmazás-manifeszt hozzáadása). A 180x180-as méret megegyezik az Apple saját webklip-mintakódjának nagy felbontású iPhone-ikonjával (Apple, webalkalmazások beállítása). A Windows-csempe régi fájl: nem árt, és ha nem régi Windows-telepítéseket céloz meg, elhagyhatod a címkét.

Milyen HTML-kódot ad a generátor?

Hat sor a <head> részbe: két rel="icon" hivatkozás a PNG favicon-okhoz, az Apple touch icon, a manifeszt hivatkozása, a Windows-csempe és egy theme-color meta címke. Ha egy oldal több ikont sorol fel, a böngésző ezek type és sizes attribútumát olvassa, kiválasztja a legmegfelelőbbet, és ha egy fájl nem tölthető be, a következőre lép (MDN, hivatkozástípusok).

A generált kódban két beállítást érdemes átírni. A theme-color és a manifeszt színei alapértelmezés szerint fehérek (#ffffff): ha azt szeretnéd, hogy a böngészősáv és a telepített alkalmazás indítóképernyője illeszkedjen a márkádhoz, cseréld ezeket a márkaszínedre. A manifeszt szándékosan üresen hagyja a name és a short_name mezőt: a web.dev szerint a kettő közül legalább az egyik kötelező, a short_name pedig ott jelenik meg a kezdőképernyőn, ahol kevés a hely.

Segít-e a favicon a SEO-ban?

Nem rangsorolási tényező, de alakítja, hogyan néz ki a találatod. A Google megjelenítheti a favicon-odat a webhelyneved mellett minden találat tetején, így az egyértelmű ikon segít a keresőknek felismerni a márkádat, és az általános földgömbös ikonnal szemben növelheti a kattintási arányodat.

A Google felsorolja a feltételeket, és ha valamelyik hiányzik, a favicon általában nem jelenik meg:

• Hivatkozáscímke a főoldalon. A Google a rel="icon", a shortcut icon, az apple-touch-icon és az apple-touch-icon-precomposed címkéket olvassa.
• Feltérképezési hozzáférés. A Googlebotnak el kell érnie a főoldalt, a Googlebot-Image-nek pedig az ikonfájlt. Egy robots.txt szabály, amely letiltja a képek mappáját, elrejtheti a favicon-odat.
• Legalább 8x8 pixeles négyzet alakú fájl, lehetőleg 48x48-nál nagyobb, támogatott formátumban: BMP, GIF, ICO, PNG, JPEG, PPM vagy TIFF. A generált PNG fájlok megfelelnek.
• Egy favicon hosztnevenként. Egy aldomain saját ikont kaphat; egy alkönyvtár, például a /blog, nem.
• Stabil URL, amelyet nem változtatsz gyakran.

Változtatás után a Google-nek újra fel kell térképeznie a főoldalt, ami ugyanebben a dokumentációban szerint néhány naptól több hétig is eltarthat. A főoldal indexelésének kérése a Search Console-ban gyorsítja ezt.

Hogyan tervezz olyan favicont, amely 16 pixelen is olvasható?

Először a legkisebb méretre tervezz. 16x16-os méretben az egész ikon 256 pixelből áll, így egy szlogennel együtt a teljes logó elmosódott foltként jelenne meg. Ezek a szabályok olvashatóvá teszik az ikont:

• A logó jelét használd, ne a teljes logót. Egy szimbólum vagy egyetlen vastag betű átvészeli a kicsinyítést; egy szó nem.
• Töltsd ki a négyzetet. Hagyj vékony szegélyt, de kerüld a nagy üres kereteket, amelyek apróra zsugorítják a jelet a böngészőfülön.
• Válassz erős kontrasztot és két-három sima színt. A vékony vonalak és az átmenetek kis méretben eltűnnek.
• Nézd meg a világos és a sötét témát is. Egy átlátszó PNG sötét jellel eltűnik a sötét fülsávon; egy tömör háttér vagy egy világos körvonal megoldja ezt.
• Gondolj az Android-maszkokra. Az Android az alkalmazásikonokat körbe vághatja. Az MDN olyan maszkolható ikont ajánl, amelynek a fontos része biztonságos zónán belül van, és átlátszatlan háttere van (MDN, alkalmazásikonok meghatározása). Ha a jeled a szélekig ér, a 192-es és 512-es fájlokhoz exportálj egy szegéllyel ellátott változatot.

Mely favicon-hibák a leggyakoribbak?

A legtöbb hibás favicon elérési úttól vagy gyorsítótártól származik, nem magától a képtől.

• Rossz mappába feltöltött fájlok. A generált kód a gyökérre mutat (/favicon-32x32.png). Ha a fájlokat a /assets mappába teszed, minden útvonalat frissíts.
• Nincs fájl a /favicon.ico címen. Ha egy oldal nem deklarál ikont, a HTML-szabvány szerint a böngészők alapértelmezés szerint kérhetik a /favicon.ico fájlt (WHATWG HTML-szabvány, linktípusok). Az olyan oldalak, amelyeken nincsenek címkék, például a PDF-ek vagy a hibaoldalak, így 404-es hibát okoznak a naplóidban. A generátor csak PNG fájlokat készít, ezért ha ezt a tartalékot szeretnéd, exportáld a 32x32-es PNG-t ICO fájlként bármilyen képszerkesztővel.
• Egy régi ikon, amely nem tűnik el. A böngészők agresszívan gyorsítótárazzák a favicon-okat. Nevezd át a fájlt, vagy egy átdolgozás után adj hozzá verziószámot (?v=2).
• Címkék csak a főoldalon. A böngészők oldalanként olvassák az ikont, ezért a kódot a közös sablonba tedd.
• Megnyúlt logó. A generálás előtt vágd négyzetre a forrást, ahogy fentebb leírtuk.

Miután a fájlok online vannak, futtasd a favicon-kinyerőt a domainedre, hogy lásd, mely ikonokat találja meg valójában a feltérképező robot, majd az oldalon belüli SEO-auditot, hogy ellenőrizd a többi fejrészcímkét.

Hogyan illeszkedik a favicon a márkádhoz az AI-válaszokban?

Az AI-asszisztensek, mint a ChatGPT és a Perplexity, gyakran megjelenítik az általuk idézett webhelyek ikonját a forráshivatkozás mellett. Az egységes favicon ott is felismerhetővé teszi a márkádat, de ez csak a keret: az, hogy idéznek, a tartalmadtól és a tekintélyedtől függ. Annak megállapításához, hogy a webhelyed egyáltalán megjelenik-e ezekben a válaszokban, az AI-említéskövetés havonta méri a márkád említéseit, kérdésenként és modellenként, a GEO- és SEO-irányítópult pedig a Google-kattintások és -pozíciók mellé teszi őket.

Egy teljes favicon-készlet egy négyzet alakú képet és két percet igényel. Generáld le fent az ikonjaidat, illeszd be a kódot a sablonodba, majd nézd meg a Sorank-csomagokat, hogy növeld azt a forgalmat, amely látni fogja őket, autopilot módban.