Telepíthető webalkalmazás
Normál és maskable ikonokat készít a kezdőképernyőre vagy az alkalmazásindítóba telepíthető webapphoz. A weboldalas faviconokat külön jelölheted be.
Egy ikon. Minden helyre készen.
Vágd négyzetre a képet, ellenőrizd valódi ikonméretben, majd töltsd le a kész favicon- vagy PWA-csomagot.
Egy képből teljes ikoncsomag
Vágd, igazítsd és ellenőrizd valódi méretben, majd válaszd ki, mely weboldalas és webapp ikonok kerüljenek a ZIP-be.
Húzd ide a logót vagy ikont
PNG, JPG, WebP vagy biztonságosan megtisztítható SVG · legfeljebb 20 MB · ajánlott 1024 × 1024 px
A fájl nem hagyja el az eszközödet.
Pontosan melyik favicon és webapp fájlokra van szükséged?
Az exportcélok szabadon kombinálhatók. Egyszerű weboldalhoz csak a Weboldal opció kell; telepíthető webapphoz válaszd a webappikonokat, és kérésre a használatra kész site.webmanifest fájlt is.
Weboldal
Bloghoz, céges oldalhoz, webshophoz vagy portfólióhoz. Ettől jelenik meg az ikon a böngészőfülön, a könyvjelzőkben és Apple eszközökön.
Jelöld be minden hagyományos weboldalhoz, bloghoz, webshophoz és portfólióhoz.
+ site.webmanifest
A webapp nevét, ikonjait, színeit és indulási beállításait összekapcsoló manifestet készít. Az offline működéshez ettől függetlenül külön service worker szükséges.
A Weboldal fájljai
Ezek adják a böngészős favicon és az Apple Touch ikon támogatását.
favicon.ico- A hagyományos, széles körben támogatott böngészőikon. Egyetlen fájlban tartalmazza a 16, 32 és 48 pixeles változatot.
favicon-16x16.png- A böngészőfül és a nagyon kis méretű böngészőfelületek éles ikonja.
favicon-32x32.png- Nagy pixelsűrűségű kijelzőkön használt favicon, például böngészőfülekhez és könyvjelzőkhöz.
favicon-48x48.png- Nagyobb böngésző- és rendszerfelületekhez használható PNG favicon.
apple-touch-icon.png- Az iPhone és iPad ezt használja, amikor valaki a weboldalt a kezdőképernyőhöz adja.
favicon.svgOpcionális- Modern böngészőkben minden méreten éles, skálázható favicon. Csak akkor kerül a csomagba, ha SVG fájlt töltesz fel.
favicon-code.html- A weboldal <head> részébe másolható, kész HTML hivatkozásokat tartalmazza.
A webapp ikonfájljai
Csak a Telepíthető webalkalmazás opció kiválasztásakor készülnek el.
web-app-manifest-192x192.png- A telepített webalkalmazás normál, kisebb felbontású ikonja Androidon és más PWA-képes rendszereken.
web-app-manifest-512x512.png- A telepítéshez és nagyobb rendszerfelületekhez használt nagy felbontású alkalmazásikon.
web-app-manifest-192x192-maskable.png- Biztonsági margóval készülő kis PWA-ikon, amelyet az operációs rendszer kör, négyzet vagy más alakúra vághat.
web-app-manifest-512x512-maskable.png- A maskable alkalmazásikon nagy felbontású változata telepítési és indítófelületekhez.
A manifest kiegészítés
A + site.webmanifest opció a webapp ikonok mellé a telepítési metaadatokat és a HTML-hivatkozást adja.
site.webmanifest- A telepíthető webalkalmazás stabil azonosítóját, indulási URL-jét, navigációs hatókörét, nevét, ikonjait, színeit és megjelenítési módját leíró, használatra kész fájl.
favicon-code.html- A weboldal <head> részébe másolható manifest hivatkozást és theme-color meta elemet tartalmazza. Ha a Weboldal opciót is kéred, annak favicon hivatkozásai ugyanebbe a fájlba kerülnek.
A README.md minden exportba bekerül, és csak a kiválasztott fájlokhoz tartozó telepítési lépéseket sorolja fel. Ha a Weboldal és a manifest opció is aktív, egy közös favicon-code.html készül.
Adatvédelem
A logód nálad marad
A Morf a böngésződben készíti el az ikonokat és a letölthető csomagot. A forrásképet nem tölti fel.
- A vágás, az előnézet és minden ikon elkészítése a saját böngésződben történik.
- Ha SVG-t töltesz fel, a Morf biztonságosan megtisztítja, mielőtt használja.
- A PNG-, ICO- és ZIP-fájlok közvetlenül a saját eszközödön készülnek el.
Favicon kérdések, röviden
A forrásképről, az ICO-ról, az SVG-ről és a PWA maskable ikonokról.
Milyen képből lesz jó favicon?
Egyszerű, négyzetes, erős kontrasztú grafikát használj. Az 1024 × 1024 px-es forrás ideális; 512 px alatt Morf figyelmeztet, mert a nagy PWA-ikon lágyabb lehet.
Az SVG megmarad vektorosnak?
Igen, ha SVG-t töltesz fel, a csomag a biztonságosan megtisztított SVG-t is tartalmazza. Raszteres képből Morf nem készít ál-vektoros fájlt.
Mi van a favicon.ico fájlban?
Egy szabványos ICO-konténer, benne külön 16 × 16, 32 × 32 és 48 × 48 pixeles PNG frame-ekkel.
Miért különbözik a maskable ikon?
Az Android többféle alakra maszkolhatja az appikont. A külön, nagyobb safe-zone-nal és teljes háttérrel készített változat segít elkerülni a fontos részek levágását.