PWA ikon generátor

Készítsd el az ikonokat, amelyekre egy telepíthető webalkalmazásnak szüksége van — 192 és 512 px-es PNG-k, plusz egy site.webmanifest — egyetlen képből, teljes egészében a böngésződben.

Adatvédelem az első helyen: minden kép helyben, a böngésződben kerül feldolgozásra. Semmi sem kerül feltöltésre, tárolásra vagy elküldésre bármilyen szerverre.

Az ikonok, amelyektől telepíthető lesz az app

Egy progresszív webalkalmazás telepíthetőségét részben az ikonjai döntik el: a böngészők egy webes manifestet keresnek, amely legalább egy 192×192-es és egy 512×512-es PNG-t deklarál, mielőtt telepítési ajánlatot tennének vagy tisztességes ikont raknának a kezdőképernyőre. Ez a generátor mindkettőt lerendereli a forrásképedből, és ír egy site.webmanifestet, amely hivatkozik rájuk — mellé az apple-touch-icont, amit az iOS vár, és egy favicon.ico-t a hétköznapi lapokhoz.

Formázd az indítóhoz

Az Android indítók körbe vagy lekerekített négyzetbe maszkolhatják az ikont, így a szélig futó grafika levágódhat. Adj hozzá belső margót és tömör hátteret itt, és a lényeg a biztonságos területen belül marad, bármilyen maszkot alkalmaznak; az élő előnézet minden méretben mutatja az eredményt. Minden az eszközödön renderelődik a Canvas API-val — a logód soha nem kerül feltöltésre —, és a teljes készlet zipként tölthető le.

Gyakran ismételt kérdések

Feltöltésre kerül a képem a favicon elkészítéséhez?
Nem. A favicon.ico, a PNG-ikonok és a manifest mind helyben, a böngésződben készülnek a Canvas API segítségével. A képed soha nem hagyja el az eszközödet.
Milyen méreteket és fájlokat kapok?
Egy többfelbontású favicon.ico-t (16, 32 és 48 px), PNG-ikonokat 16, 32, 48, 180 (apple-touch-icon), 192 és 512 px méretben, egy site.webmanifest fájlt, valamint egy HTML-kódrészletet, amelyet a <head> részbe illeszthetsz.
Átalakíthatok egy PNG-t vagy SVG-t ICO-vá?
Igen. Adj hozzá egy PNG, JPG, SVG vagy WebP fájlt, és tölts le egy valódi favicon.ico-t. Az SVG logók előbb helyben, nagy felbontáson kerülnek raszterizálásra.
Melyik kép működik a legjobban?
Egy négyzetes kép egyszerű, jó kontrasztú logóval. A nem négyzetes képek középre igazítva kerülnek levágásra; a kitöltés és az alak vezérlőivel úgy keretezheted, ahogy szeretnéd.
Hogyan telepítem a favicont?
Csomagold ki a csomagot a webhelyed gyökérmappájába, és illeszd be a mellékelt HTML-kódrészletet az oldalaid <head> részébe. A favicon.ico-t a legtöbb böngésző automatikusan felismeri.