1. Adjon hozzá képet
Húzzon egy fájlt a kijelölt területre, vagy válasszon grafikát az eszközéről. Támogatott formátumok: PNG, JPG, SVG. Ajánlott méret: min. 512×512 pixel.
Készítsen favicon.ico-t weboldalához egyetlen képből
Generáljon favicon.ico-t és teljes PNG ikonkészletet weboldalához egyetlen képből. Minden feldolgozás helyben történik a böngészőben.
Loading tool editor...
Ez az eszköz nagyobb képernyőn működik
Az eszköz kényelmes használatához nyissa meg laptopon, asztali számítógépen vagy táblagépen fekvő módban.
Tipp
Ha táblagépet használ, váltson fekvő módra - ha az ablak szélessége elég nagy, az eszköz automatikusan betöltődik.
Mi az a favicon és miért érdemes rendelkeznie eggyel?
A favicon egy kis ikon, amely a böngészőfülön jelenik meg az oldal címe mellett. Láthatja a könyvjelzőkben, a böngészési előzményekben és a telefon kezdőképernyőjén is, amikor valaki parancsikónként adja hozzá az oldalt.
Ez a kis grafika fontos funkciót tölt be - segít a felhasználóknak gyorsan felismerni egy oldalt sok nyitott fül között. Amikor valakinek tucat fül van nyitva a böngészőben, a favicon gyakran az egyetlen látható elem, amely azonosítja az oldalt.
A generátor teljes ikonkészletet hoz létre: klasszikus favicon.ico fájlt böngészőkhöz, PNG ikonokat különböző méretekben és apple-touch-icont Apple eszközökhöz. Ha webalkalmazást (PWA) épít, 192x192 és 512x512 ikonokat is generálhat manifest fájllal együtt.
Hogyan készítsen favicont 3 lépésben
A favicon generálása mindössze néhány másodpercet vesz igénybe:
2. Válasszon méreteket
Válassza ki a szükséges ikonméreteket. Szokványos weboldalhoz: favicon.ico, 32×32 és 180×180. PWA-hoz adja hozzá a 192×192 és 512×512 méreteket.3. Töltse le a fájlokat
A generálás után töltse le az összes fájlt ZIP-ként vagy minden ikont külön. Az eszköz alatt talál útmutatást a favicon hozzáadásáról.
Milyen ikonméreteket generál az eszköz?
Minden méretnek megvan a felhasználási területe:
favicon.ico (32×32)
Klasszikus formátum, amelyet minden böngésző felismer. A böngészőfülön jelenik meg.
16×16 és 32×32 PNG
Szabványos méretek modern böngészőkhöz. Füleken és könyvjelzőkben jelennek meg.
180×180 PNG (apple-touch-icon)
Ikon Apple eszközökhöz (iPhone, iPad). Megjelenik, amikor valaki hozzáadja az oldalt a kezdőképernyőhöz.
192×192 és 512×512 PNG
Ikonok webalkalmazásokhoz (PWA). A manifest által megkövetelt és alkalmazásboltokban használt.
Ha nem épít PWA-t, csak erre van szüksége: favicon.ico, 32×32 PNG és 180×180 PNG. Ez a három fájl a legtöbb felhasználási esetet lefedi.
Mi teszi különlegessé a favicon generátort?
Adatvédelem - a fájlok nem hagyják el a számítógépét
Minden művelet helyben, a böngészőben történik. A kép nem kerül elküldésre semmilyen szerverre. Az oldal bezárása után minden adat törlődik.Teljes készlet egy helyen
Favicon.ico, PNG ikonok, apple-touch-icon, PWA ikonok és manifest - minden egyetlen képből, egyetlen eszközben.PNG, JPG és SVG támogatás
Bármilyen formátumú logót használhat. Ha SVG-je van - az ikonok minden méretben élesek lesznek.Készen áll weboldalhoz és PWA-hoz
Az eszköz manifest.json fájlt generál webalkalmazásokhoz. Lentébb talál integrációs útmutatót.
Hogyan használja a favicon generátort
A favicon generálása néhány egyszerű lépés:
1. Adja hozzá a forrásképet
Húzzon egy fájlt a kijelölt területre, vagy válasszon grafikát az eszközéről. Támogatott formátumok: PNG, JPG, SVG. Egyszerű logó vagy ikon legalább 512×512 pixelben működik a legjobban.2. Válassza ki az ikonméreteket
Válassza ki, milyen ikonméretekre van szüksége. Kiválaszthat mindent vagy csak néhányat. Szokványos weboldalhoz: favicon.ico, 32×32 és 180×180.3. Generálási beállítások konfigurálása
További beállítások: háttér (átlátszó vagy választott szín), manifest (PWA konfigurációs fájl) és automatikus letöltés.4. Generálás és fájlok letöltése
A generálás indítása után az eszköz helyben dolgozza fel a képet - semmi nem kerül szerverre. Töltse le az összes fájlt ZIP archívumként vagy az egyes ikonokat külön.
PNG méretek
16×1632×32180×180
Átlátszó háttér (PNG/ICO)
Generálási beállítások - mit csinál mindegyik?
Háttér (átlátszó vagy szín)
Alapértelmezésben a generátor megőrzi az átlátszóságot. Választhat adott háttérszínt is.
Manifest generálás (site.webmanifest)
JSON fájl webalkalmazásokhoz (PWA). Ha nem épít PWA-t, ez a beállítás nem szükséges.
Hogyan töltse le a generált fájlokat
Az ikonok generálása után több letöltési lehetőség áll rendelkezésre:
Összes letöltése ZIP-ként
Az "Összes letöltése" gomb az összes generált fájlt egyetlen ZIP archívumba csomagolja. Ez a legkényelmesebb lehetőség, ha a teljes ikonkészletre van szüksége.Egyedi fájlok letöltése
Minden generált ikonnak saját letöltés gombja van - letölthet egyetlen fájlt a teljes készlet letöltése nélkül. Hasznos, ha csak egy méretet kell frissíteni.
Hol és hogyan adja hozzá a favicont
WordPress
A legtöbb WordPress téma beépített lehetőséget kínál a webhelyikon beállításához. Az adminisztrációs panelben találja:
Megjelenés → Testreszabás → Webhelyazonosság → Webhelyikon
Töltse fel oda az 512×512-es fájlt - a WordPress automatikusan generálja a kisebb méreteket. A teljes kontroll érdekében a fájlokat közvetlenül a gyökérkönyvtárba is feltöltheti FTP-n keresztül.
Milyen forráskép működik a legjobban?
A favicon nagyon kis grafika - akár 16×16 pixel is. Nem minden kép működik jól forrásként:
Egyszerű formák és olvasható szimbólumok
Egyszerű logók, egyes betűk vagy szimbólumok működnek a legjobban. Kerülje az összetett grafikákat sok részlettel.Négyzetes formátum
A favicon négyzet alakú. Ha a forráskép aránya nem 1:1, vágva vagy nyújtva lesz.Elegendően nagy méret
Legalább 512×512 pixeles forrásképet ajánlunk. A kisebb képek felnágyításra kerülnek.SVG formátum mint ideális forrás
Az SVG minőségromlás nélkül skálázódik, így az ikonok minden méretben élesek lesznek.Magas kontrasztú színek
A faviconnak különböző háttereken láthatónak kell lennie (világos fülek, sötét mód). Válasszon színeket, amelyek megmaradnak olvashatónak.
Favicon a Google keresési eredményeiben
A Google a webhely URL-je mellett jeleníti meg a faviconokat a keresési eredményekben. A mobil keresési eredmények 2019 óta mutatják a faviconokat. Az asztali eredmények 2020 januárjától követték. A favicon tehát minden Google-keresésnél látható márkaelemként jelenik meg.
A Google konkrét követelményeket támaszt a faviconok megjelenítéséhez. Az ikonnak legalább 48×48 pixel méretűnek kell lennie. Négyzetesnek kell lennie. A képnek fehér háttéren is egyértelműen láthatónak kell maradnia. A Google elutasítja a nem megfelelő vagy üres tartalmú ikonokat.
A Googlebot az oldal tartalmától függetlenül indexeli a faviconokat. A favicon frissítése a keresési eredményekben néhány naptól több hétig tarthat. A favicon fájlt nem szabad blokkolni a robots.txt-ben - különben a Google nem tudja lekérni az új verziót.
A Bing szintén megjeleníti a faviconokat az eredményeiben. A DuckDuckGo minden találati link mellett mutatja a webhely ikonját. A teljes favicon készlet egységes márkamegjelenést biztosít az összes nagy keresőmotorban. A felhasználók gyorsabban ismerik fel az ismerős faviconokat, ami magasabb kattintási arányhoz járul hozzá.
Favicon és márkaidentitás Magyarországon
A vizuális következetesség a favicon és a logó között erősíti a márka megjegyezhetőségét. Az ikon a böngészőfülekben, a könyvjelzőkben, a böngészési előzményekben és a telefon kezdőképernyőjén jelenik meg. Amikor egy felhasználónak tíz vagy több füle van nyitva, a favicon marad az egyetlen látható elem, amely azonosítja a webhelyet.
A magyar e-kereskedelemben az Árukereső.hu és a Shopline megjeleníti a faviconokat az összehasonlító eredményeknél. Az eMAG.hu és a Pepita.hu webshopok számára a megkülönböztethető favicon versenyelőnyt jelent és professzionalizmust sugároz.
A Shoprenter - népszerű magyar e-shop rendszer - lehetővé teszi a favicon beállítását a sablonbeállításokban. Az Unas és a WooCommerce ugyanezt a lehetőséget kínálja. Egy egyszerűsített logóverzió vagy az első betű működik a legjobban kis pixelméreteknél.
A szolgáltató vállalkozások - ügyvédi irodáktól a fogorvosi rendelőkig - a böngészőfül ikonjának szintjén építik az ügyfelek bizalmát. A favicon hiánya vagy a böngésző alapértelmezett ikonja alacsony professzionalizmusra utalhat.
Favicon PWA-khoz és mobileszközökhöz
A Progressive Web Apps további ikonokat igényel a standard faviconon túl. A manifest.json fájlnak tartalmaznia kell egy ikontömböt 192×192 és 512×512 pixeles méretben PNG formátumban.
A maskable ikonok speciális ikontípust képviselnek Android eszközökön. Az operációs rendszer különböző formákba - körökbe, lekerekített négyzetekbe vagy cseppekbe - vágja a maskable ikonokat. A biztonsági zóna a kép belső 80 százalékát fedi le. Minden lényeges grafikai elemnek ezen a zónán belül kell elhelyezkednie a levágás elkerülése érdekében.
Az Apple külön apple-touch-icon fájlt igényel 180×180 pixel méretben. Ezt a fájlt a HTML head szakaszában kell deklarálni - az iOS nem olvassa a manifest fájlból.
Magyarországon magas az okostelefon-penetráció. Magyar bankok mint az OTP Bank és a K&H, valamint digitális szolgáltatások alkalmazzák a PWA technológiát a gyors hozzáférés érdekében a telefon kezdőképernyőjéről.
A Lighthouse ellenőrzés a Chrome fejlesztői eszközeiben megvizsgálja a favicon és a PWA ikonok meglétét és érvényességét. A hiányzó vagy érvénytelen favicon figyelmeztetést generál a PWA kategóriában.
Gyakran ismételt kérdések a favicon generátorról
Milyen méretűnek kell lennie a forrásképnek favicon generáláshoz?
Az ajánlott méret legalább 512×512 pixel négyzetes formátumban (1:1). Ilyen forrásból az ikonok minden méretben élesek és olvashatóak lesznek. Ha SVG formátumú logója van - használja azt, mivel a vektorgrafika minőségromlás nélkül skálázódik.
Generálhatok csak favicon.ico-t a többi ikon nélkül?
Igen. A generálás előtt pontosan kiválaszthatja, milyen méretekre van szüksége - pl. csak favicon.ico vagy csak bizonyos PNG méretek.
Milyen képformátumokat támogat a favicon generátor?
A generátor PNG, JPG és SVG formátumú képeket fogad el. Kimenetként favicon.ico fájlt és a kiválasztott méretű PNG ikonokat generál, amelyek készen állnak a weboldalra feltöltésre.
A favicon befolyásolja a Google keresési rangsorolást?
Nem közvetlenül - a favicon nem rangsorolási tényező. Közvetve azonban befolyásolja a márkafelismerést: egy professzionális ikonnal rendelkező oldalt könnyebb azonosítani sok nyitott fül között, ami magasabb átkattintási arányt eredményezhet a keresési eredményekben.
Mely ikonméretek nélkülözhetetlenek egy szokványos weboldalhoz?
Egy tipikus weboldalhoz három fájl elegendő: favicon.ico (32×32), egy 32×32-es PNG ikon és apple-touch-icon 180×180. Ha az oldalnak webalkalmazásként (PWA) kell működnie, 192×192 és 512×512 ikonokra plus manifest fájlra is szükség van.
Mi az a site.webmanifest fájl és mikor szükséges?
Ez egy konfigurációs fájl webalkalmazásokhoz (PWA), amely információkat tartalmaz az ikonról, a névről és az alkalmazás színeitől. Akkor szükséges, ha az oldalnak alkalmazásként kell működnie a telefon kezdőképernyőjén. Szokványos weboldalakhoz nem szükséges.
A favicon ugyanolyan jelenik meg minden böngészőben?
A legtöbb modern böngésző (Chrome, Firefox, Edge, Safari) felismeri a favicon.ico fájlt és a PNG ikonokat. Különbségek lehetnek a megjelenített ikon méretében - a Chrome a PNG 32×32-t részesíti előnyben, míg a Safari iOS-en az apple-touch-icon 180×180-at használja. A legjobb kompatibilitás érdekében ajánljuk a teljes méretkészlet generálását.
Miért nem változik a favicon új fájl feltöltése után?
A böngészők agresszíven cache-elik a faviconokat. Új ikon feltöltése után próbálja törölni a böngésző cache-ét, vagy adjon hozzá verzióparamétert a fájl elérési útjához (pl. /favicon.ico?v=2). A változás néhány órát vehet igénybe, mire láthatóvá válik.
Segítsen nekünk fejleszteni eszközeinket
Van ötlete egy új funkcióhoz, hibát talált, vagy szeretne javasolni egy másik eszközt, amely megkönnyítené a munkáját? Írjon nekünk – 24 órán belül válaszolunk.